We Keep Coding

Gridstack widgets can't be moved after new widgets are added

Application made with RactiveJS, Redux and Gridstack.
When new widgets are added, all is fine and widgets are movable/resizable as well. But when I delete all widgets and add, for example, two new, then:
widgets can't be moved and can't be resized. As in picture:
when try to delete widget it disappear, but other widgets change their position.
jsFiddle is provided as follows
You can see that right widget is moved to the right side, but handle stays where it is. So why is such behavior and how to deal with that?
RactiveJS application have three components
DashboardComponent
WidgetGridComponent
WidgetComponent
Code provided as follows:
var Widget = Ractive.extend({
isolated: false, // To pass events to WidgetGrid component (makeWidget, removeWidget, etc.)
template: '#widgetTemplate',
components: {},
oninit: function() {
// Load data to widget
},
oncomplete: function() {
this.drawChart();
},
drawChart: function() {
var self = this;
function exampleData() {
return [{
"label": "One",
"value": 29.765957771107
},
{
"label": "Two",
"value": 0
},
{
"label": "Three",
"value": 32.807804682612
},
{
"label": "Four",
"value": 196.45946739256
},
{
"label": "Five",
"value": 0.19434030906893
},
{
"label": "Six",
"value": 98.079782601442
},
{
"label": "Seven",
"value": 13.925743130903
},
{
"label": "Eight",
"value": 5.1387322875705
}
];
}
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.showLabels(true);
d3.select("#widget" + self.get("id") + " svg")
.datum(exampleData())
.transition().duration(350)
.call(chart);
return chart;
});
},
data: function() {
return {
id: null,
x: null,
y: null,
width: null,
height: null,
}
}
});
var WidgetGrid = Ractive.extend({
// isolated:false,
// twoway:false,
template: '#widgetGridTemplate',
components: {
Widget: Widget,
},
onrender: function() {
// Init gridstack instance
this.bindGridstack();
},
deleteWidget: function(id) {
Action.deleteWidget(id);
},
removeWidget: function(id) {
$(".grid-stack").data("gridstack").removeWidget("#widget" + id);
},
createWidget: function(id) {
$(".grid-stack").data("gridstack").makeWidget("#widget" + id);
},
updateWidgetSize: function(id, width, height) {
Action.updateWidgetSize(id, width, height);
},
updateWidgetPosition: function(id, x, y) {
Action.updateWidgetPosition(id, x, y);
},
bindGridstack: function() {
var self = this;
var options = {
animate: true,
auto: false, // if false gridstack will not initialize existing items (default: true)
float: true, // enable floating widgets (default: false)
disableOneColumnMode: true,
width: 10, // amount of columns (default: 12)
height: 10, // maximum rows amount. Default is 0 which means no maximum rows
// height: 10,
// cellHeight: 80,
disableResize: false,
disableDrag: false,
verticalMargin: 0,
resizable: {
handles: 'se'
}
};
var grid = $(".grid-stack").gridstack(options);
// On user ends resizing
grid.on('gsresizestop', function(event, elem) {
var $el = $(elem);
var node = $el.data('_gridstack_node');
var id = node.el.attr("id").replace("widget", "");
self.updateWidgetSize(id, node.width, node.height, node.el.css("width"), node.el.css("height"));
});
// On user ends dragging
grid.on('dragstop', function(event, ui) {
var $el = $(event.target);
var node = $el.data('_gridstack_node');
var id = $el.attr("id").replace("ar-widget", "");
self.updateWidgetPosition(id, node.x, node.y);
});
},
data: function() {
return {
widgets: [],
}
}
});
var Dashboard = Ractive.extend({
el: '#dashboard', //document.body,
template: '#dashboardTemplate',
isolated: true,
append: false,
oninit: function() {
this.on("add", function() {
Action.addWidget()
});
},
components: {
WidgetGrid: WidgetGrid,
},
data: function() {
return {
store: {}
}
}
});

There's several problems in there:
detach is not called when unrendering a component. It's only called when ractive.detach() is called. Your grid was not aware of the widget's removal. After Ractive unrendered the widget elements, this caused the grid to act weird.
On the flip side, grid.removeWidget() removes the widget from the DOM. After a state change, Ractive will still try to unrender. But since the element is no longer there and because Ractive wasn't aware of the widget's removal, it will cause a double removal.
After a state change, the data for the widget is no longer present. id is already undefined. You can no longer use id when you handle teardown, unrender nor destruct events. You'll have to disconnect a widget from the grid earlier, preferably before the state change.
Ideally, you should just let Ractive do the rendering/unrendering of elements and only inform gridstack about making/disconnecting widgets from the grid. You're already doing this on render by using makeWidget instead of addWidget. For removal, you simply need to do the same thing. removeWidget accepts a second argument which, if false, will disassociate a widget from the grid but not remove the element from the DOM. This leaves unrendering to Ractive after the state change.
Here's an example: https://jsfiddle.net/fm133mk6/

How to find Cell index inside kendo-grid & how to set dirty property as true

I just want to select Check Box on Icon 'A' click. So how will I find check box control.
<a class="tooltip-top" onclick="GridArchiveAction(#: id #); " title="Archive" ><img src="/Content/images/Archive.png" style="cursor: pointer;"/></a>
file.js
var GridArchiveAction = function (id) {
if (confirm("Are you sure you want to archive this item?")) {
var grid = $('#Grid').data("kendoGrid");
var item = grid.dataSource.get(id);
var dataRow = grid.dataSource.getByUid(item.uid);
if (dataRow != undefined) {
dataRow.addClass("k-state-selected")
.find(".isLockedchkbx")
.prop("checked", "checked");
} else {
alert("You Must Select A Row To Archive A Record!");
}
}
};

Please try with the below code snippet.
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<a class='tooltip-top' onclick='GridArchiveAction(this);' title='Archive' ><img src='http://www.naadsm.org/naadsm/files/common/smallZipFileIcon.png' style='cursor: pointer;'/></a>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
template: "<input class='isLockedchkbx' type='checkbox' />",
field: "ContactTitle",
title: "Contact Title"
}]
});
});
function GridArchiveAction(obj) {
if (confirm("Are you sure you want to archive this item?")) {
var grid = $('#grid').data("kendoGrid");
var row = $(obj).closest("tr");
$(row).find('.isLockedchkbx').prop("checked", "checked");
}
};
</script>
</body>
Let me know if any concern.

Why you need checkbox control?
Generally you can get it passing this like
onclick="GridArchiveAction(this, #: id #); "
//OR
var GridArchiveAction = function (this, id);`
You can get checkbox control by $(this).

One Column Value remain unchanged in kendo grid drag and drop

I'm fairly new to kendo UI but some how I managed to render a kendo grid with drag and drop feature Where users can drag and place rows.In my case I have three columns id,name,sequence
So I need to keep sequence column data unchanged while id and name data changed when a drag and drop of a row.
Ex id=1 Name=David Sequnce=0
id=2 Name=Mark Sequnce=1
Now I'm going to drag row 1 to 2 while data of the sequence column remain unchanged new data like this,
Ex id=2 Name=Mark Sequnce=0
id=1 Name=David Sequnce=1
In my case every row is getting changed. I need to implement this solution.
Can somebody help me out on this.
Cheers,
Chinthaka

Try this,
Script
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ id: 1, text: "David ", Sequnce: 0 },
{ id: 2, text: "Mark ", Sequnce: 1 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
Sequnce: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "Sequnce"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function (e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id"));
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("Sequnce");
target.set("Sequnce", dest.get("Sequnce"));
dest.set("Sequnce", tmp);
dataSource.sort({ field: "Sequnce", dir: "asc" });
}
}
});
});
</script>
View
<div id="grid">
</div>
Demo: http://jsfiddle.net/nmB69/710/

Refreshing grid data on click event

I have this code. In here I am retrieving a new set of values via a URL through Jquery Ajax($.get()) on calling a function gotoa() on some click event. I am obtaining the set of values correctly as i am getting right result on alert. But the grid is not updating itself at that moment. When i refresh the whole page then the grid updates. How to update the grid on calling of gotoa() itself. ?
The code ::
<script type="text/javascript">
function gotoa(){
$.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function(result){
alert(result);
var storedata={
identifier:"ID",
label:"name",
items:result
};
var store = new dojo.data.ItemFileWriteStore({data: storedata});
alert(store);
//var gridh = dijit.byId("gridDiv");
//gridh.setStore(store);
var gridStructure =[[
{ field: "ID",
name: "ID_Emp",
width: "20%",
classes:"firstname"
},
{
field: "Names",
name: "Name",
width: "20%",
classes: "firstname"
},
{ field: "Email",
name: "Mail",
width: "20%",
classes:"firstname"
}
]
];
var grid1 = new dojox.grid.DataGrid({
id: 'grid2',
store: store,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid1.domNode);
/*Call startup() to render the grid*/
grid1.startup();
// assuming our grid is stored in a variable called "myGrid":
dojo.connect(grid1, "onSelectionChanged", grid1, function(){
var items = grid1.selection.getSelected();
// do something with the selected items
dojo.forEach(items, function(item){
var v = grid1.store.getValue(item, "Names");
function showDialog() {
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
//if(name!="Mail")
showDialog();
}, grid1);
});
dojo.connect(grid1, "onCellClick", grid1, function sendmail(){
var items = grid1.selection.getSelected();
dojo.forEach(items, function(item){
var v1 = grid1.store.getValue(item, "Email");
alert(v1);
request.setAttribute("variablemail", v1);
});
});
},"text");
}
</script>
The output of alert(result) at a particular point of time is like this ::
[{"ID":1,"Names":"Shantanu","Email":"shantanu.tomar#gmail.com"},{"ID":2,"Names":"Mayur","Email":"mayur.sharma#gmail.com"},{"ID":3,"Names":"Rohit"},{"ID":4,"Names":"Jasdeep"},{"ID":5,"Names":"Rakesh","Email":"rakesh.shukla#gmail.com"},{"ID":6,"Names":"Divyanshu"},{"ID":8,"Names":"hello"},{"ID":9,"Names":"fine"},{"ID":10,"Names":"shivani"}]
And the output of alert(store) is like ::
[object Object]
And i am calling gotoa() on clicking anywhere inside a content pane(for the time being, later on will put a button or something) like this ::
<div dojoType="dijit.layout.ContentPane" title="Pending Activities" style="background-image: url('http://localhost:8080/2_8_2012/images/17.png');" onClick="gotoa();">
How to upgrade grid data ? thanks.

I am a newbie to dojo, i think this code will help you::
<script type="text/javascript">
function gotoa(isUpdate){
$.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function(result){
alert(result);
var storedata={
identifier:"ID",
label:"name",
items:result
};
var store = new dojo.data.ItemFileWriteStore({data: storedata});
alert(store);
if (isUpdate) {
var grid = dojo.byId('grid2');
grid.setStore(store);
} else {
var gridStructure =[[
{ field: "ID",
name: "ID_Emp",
width: "20%",
classes:"firstname"
},
{
field: "Names",
name: "Name",
width: "20%",
classes: "firstname"
},
{ field: "Email",
name: "Mail",
width: "20%",
classes:"firstname"
}
]
];
var grid1 = new dojox.grid.DataGrid({
id: 'grid2',
store: store,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid1.domNode);
/*Call startup() to render the grid*/
grid1.startup();
// assuming our grid is stored in a variable called "myGrid":
dojo.connect(grid1, "onSelectionChanged", grid1, function(){
var items = grid1.selection.getSelected();
// do something with the selected items
dojo.forEach(items, function(item){
var v = grid1.store.getValue(item, "Names");
function showDialog() {
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
//if(name!="Mail")
showDialog();
}, grid1);
});
dojo.connect(grid1, "onCellClick", grid1, function sendmail(){
var items = grid1.selection.getSelected();
dojo.forEach(items, function(item){
var v1 = grid1.store.getValue(item, "Email");
alert(v1);
request.setAttribute("variablemail", v1);
});
});
}
});
}
</script>
use gotoa() for initial loading of grid and gotoa(true) for updating the grid.

how to delete multiples rows in jqgrid if the method selarrrow returns arrays that has more than 1 index?

I have my grid with multiselect = true, something likes this, you can click each checkbox and then delete, when I delete my first row I know the method selarrrow creates and arrays It just delete, but when I want to delete the second row It just never do the delRowData method, and when I select multiple checkbox It just delete the first. I think my method is looping over and over againg each time and never delete at least visually the other row, how can I fix it?? any advise thanks
this is my method:
onSelectRow:function(id) {
$("#mySelect").change(function (){
if(($("#mySelect option:selected").text()) == 'Deleted') {
var id = $("#list2").getGridParam('selarrrow');
for(var i =0; i<id.length;i++) {
$("#list2").jqGrid('delRowData',id[i]);
}
});
}
html
</head>
<body>
<div>
Move to:
<select id="mySelect">
<option value="1">Select and option</option>
<option value="2">Trash</option>
<option value="3">Deleted</option>
</select>
</div>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
js
$("#Inbox").click(function () {
$.post('../../view/inbox.html', function (data) {
$('#panelCenter_1_1').html(data);
$("#list2").jqGrid({
url: '../..controller/controllerShowInbox.php',
datatype: 'json',
colNames: ['From', 'Date', 'Title', 'Message'],
colModel: [
{ display: 'From', name: 'name', width: 50, sortable: true, align: 'left' },
{ display: 'Date', name: 'date', width: 150, sortable: true, align: 'left' },
{ display: 'Title', name: 'title', width: 150, sortable: true, align: 'left' },
{ display: 'Message', name: 'message', width: 150, sortable: true, align: 'left' },
],
searchitems: [
{ display: 'From', name: 'name' },
{ display: 'Date', name: 'date' },
{ display: 'Title', name: 'title' },
{ display: 'Message', name: 'message' },
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'id_usuario',
viewrecords: true,
sortorder: "desc",
caption: "Inbox",
multiselect: true,
multiboxonly: true,
onSelectRow: function (id) {
$("#mySelect").change(function () {
if (($("#mySelect option:selected").text()) == 'Trash') {
var id = $("#list2").getGridParam('selarrrow');
if (id != '') {
var grid = $("#list2");
grid.trigger("reloadGrid");
$.post('../../controller/controllerChangeStatus.php', { id: id }, function (data) {
$('#panelCenter_2_1').html(data);
grid.trigger("reloadGrid");
});
}
} else if (($("#mySelect option:selected").text()) == 'Deleted') {
id = $("#list2").getGridParam('selarrrow');
if (id != '') {
var grid = $("#list2");
grid.trigger("reloadGrid");
$.post('../../controller/controllerChangeStatus.php', { id: id }, function (data) {
$('#panelCenter_2_1').html(data);
grid.trigger("reloadGrid");
});
}
} else {
}
});
}
});
});
});

You code looks very strange for me. I can't explain the effects which you describe without having the demo code, but I could point you to some places in the code which should be rewrote.
First problem: you use id parameter in the line onSelectRow:function(id) and then use the same variable name id to declare var id = $("#list2").getGridParam('selarrrow');. I don't understand why you do this. If you don't need parameter of onSelectRow you can just use onSelectRow:function() which will make the code more clear.
Second problems: you use binding to change event in $("#mySelect").change, but you use the statement inside of another event onSelectRow. So on every row selection you will have one more event handler to the change event. For example you would replace the body of $("#mySelect").change(function (){ to alert("changed!"). Then you would select two different rows and change the option in the "#mySelect". You will see two alerts. Then you select another row and change the option in the "#mySelect". You will see three alerts. And so on.
So you should rewrote your code in any way. If you will still have the same problem you should include full demo code (including HTML code with <select id="mySelect">...) which can be used to reproduce your problem.

I use a different approach. I build a vector of selected row ids and then process 'em with a single batch statemente server side then reload the grid.
More or less the code is.
var righe = $(nomeGrigliaFiglia).getGridParam("selarrrow");
if ((righe == null) || (righe.length == 0)) {
return false;
}
var chiavi = [];
for (var i = 0; i < righe.length; i++) {
var Id = righe[i];
var data = $(nomeGrigliaFiglia).jqGrid('getRowData', Id);
// Process your data in here
chiavi[i] = new Array(2)
chiavi[i][0] = data.FieldKey;
chiavi[i][1] = data.FieldChildId;
}
Note that I'm using this to actually send a int [][] to a C# Action

multiselect: true,
in your data process php $SQL .= "DELETE FROM ". $table. " WHERE no in ($_POST[id]);" ;