The search button works on the first click, but once it is closed either by clicking the X (close button) or by running a search (setting to close after search) it does not open, there are also no errors in the console so I am unable to determine what is wrong and how to fix it.
var previouslySelectedRow = null;
var rowIsSelected = null;
var previousRowIsSelected = null;
var currentRowId;
var currentCount;
var cancelEditing = function(theGrid) {
var lrid;
if (typeof previouslySelectedRow !== "undefined") {
// cancel editing of the previous selected row if it was in editing state.
// jqGrid hold intern savedRow array inside of jqGrid object,
// so it is safe to call restoreRow method with any id parameter
// if jqGrid not in editing state
theGrid.jqGrid('restoreRow', previouslySelectedRow);
// now we need to restore the icons in the formatter:"actions"
lrid = $.jgrid.jqID(previouslySelectedRow);
$("tr#" + lrid + " div.ui-inline-edit").show();
$("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
}
};
var parsedResult = JSON.parse(DecodeAscii(result));
ShowDebugNotification("DEBUG INFO(" + ajaxCall + "): <br />" + result, false);
$("#productsTable").jqGrid({
data: parsedResult,
datatype: "local",
loadonce: true,
height: 'auto',
marginLeft: 'auto',
colNames: [
'Product Id', 'Add', 'Product Name', 'Product Code', 'Customer Price'
],
colModel: [
{ name: 'Id', width: 0, hidden:true },
{ name: "actions", template: "actions", width: 50, formatoptions:{
delbutton: false,
editbutton: false
} },
{ name: 'Name', index: 'Name', width: 550, search: true, searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']} },
{ name: 'ProductCode', index: 'ProductCode', width: 150, search: true, searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']} },
{ name: 'Price', index: 'Price', width: 100, search: false, formatter: 'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}}
],
rowNum: 15,
rowList: [5, 10, 15, 20],
pager: true,
gridView: true,
viewrecords: true,
iconSet: "jQueryUI",
sortname: 'Name',
sortorder: 'asc',
inlineEditing: { keys: false },
actionsNavOptions: {
addToCarticon: "ui-icon-cart",
addToCarttitle: "Add item to the cart",
custom: [
{ action: "addToCart", position: "first", onClick: function (options) {
var rowData = $('#productsTable').getRowData(options.rowid);
var cartButton = $(".ui-icon", "#jAddToCartButton_"+options.rowid);
if(cartButton.hasClass("ui-icon-cancel")){
cart.shift(rowData);
cartButton.removeClass("ui-icon-cancel");
cartButton.addClass("ui-icon-cart");
}
else if(cartButton.hasClass("ui-icon-cart")){
cart.push(rowData);
cartButton.removeClass("ui-icon-cart");
cartButton.addClass("ui-icon-cancel");
}
}
}]
},
loadComplete: function() {
$("#add-product-dialog-loading-message").hide();
$(".spinner").hide();
$("#add-product-dialog-form").dialog("open");
//for each object in cart
//if prodcut ID matches product Id in product
//grid then set button to a cancel icon
if(cart.length !== 0){
var cartIds = [];
var jsonCart = JSON.stringify(cart);
var parsedJsonCart = JSON.parse(jsonCart);
var productsInCart = $.grep(parsedJsonCart, function(el, i){
cartIds.push(el.Id);
});
var currentRows = $('#productsTable').getRowData();
var shownProductsThatAreInCart = $.grep(currentRows, function (el, i) {
return $.inArray(el.Id, cartIds) !== -1;
});
if(shownProductsThatAreInCart.length > 0){
var rowIds = $(this).jqGrid('getDataIDs');
$.each(rowIds, function(k, v) {
rowData = $('#productsTable').getRowData(v);
if($.inArray(rowData['Id'], cartIds) !== -1){
alert("Matched Product:\nRowData['id'] = " + rowData['Id'] + "\nto\nProduct in cart: " + cartIds.Id);
$(".ui-icon", "#jAddToCartButton_"+v).removeClass("ui-icon-cart");
$(".ui-icon", "#jAddToCartButton_"+v).addClass("ui-icon-cancel");
}
});
}
}
},
gridComplete: function() {
}
});
$("#productsTable").jqGrid("navGrid", {edit:false,add:false,del:false},
{},// use default settings for edit
{},// use default settings for add
{},// delete instead that del:false we need this
{multipleSearch:false,overlay:false,ignoreCase:true,closeAfterSearch:true,closeOnEscape:true,showQuery:true});
I don't think its a bug as I have seen many demos demonstrating how it is supposed to work, I am guessing I have a mis-configuration, please have a look over my code and help determine the issue.
One thing to keep in mind is I am getting the data to load the grid via an ajax call that returns json, all manipulation is done on the client, there is no posting data back to server at all.
Thank you!
The main problem is the combination of Searching options which you use:
{
multipleSearch: false, // it's default and can be removed
overlay: false, // !!! the option make the problem
ignoreCase: true, // it's not exist at all
closeAfterSearch: true,
closeOnEscape: true,
showQuery: true
}
The usage of the option overlay: false is bad because it makes another option toTop: true not working and the Searching dialog will be placed as the children of jQuery UI Dialog. If you remove the option then one can work with the Searching Dialog more easy and the second problem (a bug in calculation of position of jqGrid Searching Dialog) will not exist. Look at the modified demo:
https://jsfiddle.net/OlegKi/su7mf5k9/3/
UPDATED: It seems one have the problem in creating modal jqGrid dialog inside of modal jQuery UI dialog. The problem could be solved by removing modal: true option from the outer jQuery UI dialog. See https://jsfiddle.net/OlegKi/su7mf5k9/3/
In general one could create hybrid solution which changes the type of jQuery UI dialog from modal to non-modal dynamically, but it could be tricky https://jsfiddle.net/OlegKi/su7mf5k9/5/
Related
For some reason, my grid is blank with no rows (not even an empty row), no navigation icons and no editing icons. I'm using a few add-in features such as an autocomplete field (inside the grid), and a font resizing script so my script is a bit long. The page is receiving the properly formatted response from my functions page and it seems to match my jsonReader settings but it's not populating the grid with it. Here is my JSON formatted response from the page:
{"page":"1",
"total":1,
"records":"4",
"rows":[{"DetailID":"1","Quantity":"2","TaskName":"Differencial With Housing","UnitPrice":"335.00","ExtendedPrice":"670.00"}, {"DetailID":"2","Quantity":"1","TaskName":"Left axel seal","UnitPrice":"15.00","ExtendedPrice":"15.00"},{"DetailID":"3","Quantity":"1","TaskName":"Upper and Lower Bearings","UnitPrice":"55.00","ExtendedPrice":"55.00"}, {"DetailID":"5","Quantity":"1","TaskName":"Fluids","UnitPrice":"45.00","ExtendedPrice":"45.00"}]}
And here is my grid script:
<script>
function autocomplete_element(value, options) {
var $ac = $('<input type="text"/>');
$ac.val(value);
$ac.autocomplete({source: "autocomplete.php?method=fnAutocomplete"});
return $ac;
}
function autocomplete_value(elem, op, value) {
if (op == "set") {
$(elem).val(value);
}
return $(elem).val();
}
$(document).ready(function()
{
$('#filter').jqm();
var selectedRow = 0;
$("#list").jqGrid(
{
url:'managegrid.php',
datatype: 'json',
colNames:['DetailID', 'ProjectID','Qty.','Description','Unit Price','Total Cost'],
colModel :[
{name:'DetailID', index:'DetailID', hidden:true, editable:false},
{name:'ProjectID', index:'ProjectID', width:25, hidden:true, editable:true},
{name:'Quantity', index:'Quantity', editable:true, width:50, align:'right', edittype:'text', editoptions: {defaultValue:'1'}},
{name:'TaskName', index:'TaskName', editable:true, width:450, align:'left', edittype: 'custom', editoptions: {'custom_element' : autocomplete_element, 'custom_value' : autocomplete_value}},
{name:'UnitPrice', index:'UnitPrice', editable:true, width:100, align:'right'},
{name:'ExtendedPrice', index:'ExtendedPrice', editable:false, width:100, align:'right'}
],
onSelectRow: function(id){
if(DetailID && DetailID!==mkinline){
jQuery('#list').saveRow(mkinline);
jQuery('#list').editRow(DetailID,true);
mkinline=DetailID;
}
},
pager: $('#pager'),
rowNum:20,
rowList:[],
pgbuttons: false,
pgtext: null,
sortorder: "asc",
sortname: "DetailID",
viewrecords: true,
imgpath: '/js/jquery/css/start/images',
caption: 'Project Details',
height:'auto',
width:823,
mtype:'GET',
recordtext:'',
pgtext:'',
editurl:"editgrid.php",
toolbar:[true,"bottom"],
loadComplete:function(){
var recorddata = $("#list").getUserData();
$("#t_list").html(recorddata.MSG);
},
jsonReader: {
page: "PAGE",
total: "TOTAL",
records:"RECORDS",
root: "ROWS",
userdata:"USERDATA"
}
}
);
$("#t_list").css("color","blue");
jQuery("#list").jqGrid("inlineNav",'#pager',{edit:true,editicon: "ui-icon-pencil",add:true,addicon: "ui-icon-plus",search:false}, {}, {},
{url:"delgridrow.php",closeAfterDelete:true,reloadAftersubmit:false,afterSubmit:commonSubmit,caption:"Delete",msg:"Delete selected",width:"400"})
.navButtonAdd('#pager',{caption:"",title:"Reload Form",buttonimg:'/js/jquery/css/start/images/refresh.gif',onClickButton:function(id)
{
resetForm();
$("#list").setGridParam(
{
url:"managegrid.php",
page:1
}
).trigger("reloadGrid");
}
});
}
);
function gridSearch()
{
var pid = $("#DetailID").val();
var qty = $("#Quantity").val();
var tn = $("#TaskName").val();
var up = $("#UnitPrice").val();
$("#list").setGridParam(
{
url:"managegrid.php?ProjectID="+pid+"&Quantity="+qty+"&TaskName="+tn+"&UnitPrice="+up,
page:1
}
).trigger("reloadGrid");
$("#filter").jqmHide();
return false
}
function commonSubmit(data,params)
{
var a = eval( "(" + data.responseText + ")" );
$("#t_list").html(a.USERDATA.MSG);
resetForm();
return true;
} function resetForm()
{
window.location.reload(false);
}
</script>
I've been trying to figure this one out all weekend and it's driving me crazy so any help would be appreciated.
You should add the line of code
jQuery("#list").jqGrid("navGrid", '#pager',
{add: false, edit: false, del: false, search: false, refresh: false});
directly before calling of inlineNav.
UPDATED: Your code have many other problems too. For example, you should remove jsonReader option from your code, because it contains wrong values of properties (like root: "ROWS" instead of root: "rows", which is default and can be removed). You can consider to use jsonReader: { id: 'DetailID' } to use the value of DetailID as the rowid and to use DetailID instead of id during editing. I'd recommend you to define all variables before the usage (see mkinline and DetailID for example).
I am trying to make expandable button on the header of grid. On click of that It will expand and then again click it will close.
I wrote a function for expanding with flag 1 and 0.
My question is how to place a switch button on header of grid column.
Here I tried.
By Design time just for reference.
columns: [{
id: 'Sd',
header: 'Study',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Stu'
}, {
width: 130,
header: '<u style="color:blue;cursor:pointer;" title="Click on to view by Days" onclick="Fn_dayclick(0)">' +
'<img alt="Click on to view by Days" style="vertical-align:bottom;" ' +
'src="Images/508Images/group-expand.gif"> ' + "Subject" + '</u>',
id: 'Sub',
itemId: "Sub",
dataIndex: 'Sub',
hidden: false,
}, {
width: 130,
id: 'Ext',
header: 'Exclude',
dataIndex: 'Excl',
hidden: false
}]
In Subject header i given that code with + button and on click it call Fn_dayclick(0). But where to give code for - button which I prepared. This is in the case where I am designing column in code.
What to do when my column is coming from xml.
My code for Ajax
Ext.Ajax.request({
url: 'XML/Cohart.xml',
scope: this,
timeout: global_constants.TIMEOUT,
method: "GET",
disableCaching: true,
failure: function(response) {
utils.showOKErrorMsg(sdisMsg.ajaxRequestFailed);
},
success: function(response) {
var datas = response.responseXML;
Ext.each(datas.getElementsByTagName("HEADER"), function(header) {
this.buildField(header);
this.buildColumn(header);
}, this);
Ext.each(datas.getElementsByTagName("G"), function(columnData) {
this.fieldLength = this.fields.length;
this.record = [];
for (i = 0; i < this.fieldLength; i++) {
//this.record.push(columnData);
var fieldName = this.fields[i].name
this.record[fieldName] = columnData.getAttribute(fieldName);
}
this.data.push(this.record);
}, this);
this.store = new Ext.data.ArrayStore({
fields: this.fields
});
this.store.loadData(this.data);
},
//this.store.loadData(this.data);});
buildField: function(header) {
this.fields.push({
name: header.getAttribute("DATAINDEX")
});
},
buildColumn: function(header) {
var hiddenflg = !(header.getAttribute("VISIBLE"));
if (header.getAttribute("VISIBLE") == "false")
hiddenflg = true;
var strHeaderName = '';
if ((Ext.isIE && !PC.common.isIE10()))
strHeaderName = header.text;
else
strHeaderName = header.textContent;
var strToolTip = "";
this.columns.push({
header: Ext.util.Format.htmlEncode(strHeaderName),
tooltip: strToolTip,
dataIndex: header.getAttribute("DATAINDEX"),
width: parseInt(header.getAttribute("LENGTH")),
metaID: header.getAttribute("M"),
enableHdMenu: false,
hidden: hiddenflg,
menuDisabled: true,
sortable: false,
scope: this,
fixed: false,
expanded: true
});
},
});
Shall I put in render or anywhere else. Thanks for help.
If you want particular column header to be button with expandable then try this.
declare a variable and store your header in that. In if statement set header for that perticular column and in else statement set header for other columns.
in coloumn.push in place of header call your variable where you storing your header.
here is a code for you.
var headerstu;
if(header.getAttribute("DATAINDEX") === "SUB"){
if(header.showPara){ // decelear a showPara as boolean in ur function
headerstu = '<u style="color:blue;cursor:pointer;" title="Click on to view across Subject" onclick="Fn_Dayclick(1)">' +
'<img alt="Click on to view across Subject" style="vertical-align:bottom;" ' +
' src="Images/508Images/group-expand.gif" />' +
' ' + Ext.util.Format.htmlEncode(strHeaderName) + '</u>';
}else{
headerstu = '<u style="color:blue;cursor:pointer;" title="Click on to view across Subject" onclick="Fn_Dayclick(0)">' +
'<img alt="Click on to view across Subject" style="vertical-align:bottom;" ' +
' src="Images/508Images/group-close.gif" />' +
' ' + Ext.util.Format.htmlEncode(strHeaderName) + '</u>';
}// take a groupclose image which is opposite to group-expand
}else{
headerstu = Ext.util.Format.htmlEncode(strHeaderName);
}
this.columns.push({
header: headerstu,
tooltip: strToolTip,
dataIndex: header.getAttribute("DATAINDEX"),
width: parseInt(header.getAttribute("LENGTH")),
metaID: header.getAttribute("M"),
enableHdMenu: false,
hidden: hiddenflg,
menuDisabled: true,
sortable: false,
scope: this,
fixed: false,
expanded: true
});
},
Also I am not tested your complete code like function which you given on onclick but I am sure you can get changeable button on expandable column.
I have been struggling with some issues for a while now on jquery grid.
The first one is ... if my current row is currently being edited, if clicked outside of row, i dont want it to cancel my editing and select the new row. My current code is:
beforeSelectRow : function(id){
if($('tr#'+id).is('[editable="1"]') == '1'){
return false;
}
else if ($('tr#'+id).is('editable') != '1') {
return true;
}
}
How can i make it to work?
Also, i have a column with checkboxes [ department head column with yes or no values]. If i have a single checked checkbox, i want it to pop a alert when i click a new box and not leave edit.
At the moment i managed to make a little code for aftersavefunc, that will alert and change the Yes to a No if another box is checked but its not what i need as it acts after the row has been saved.
var checkboxCol = grid.getCol('HeadDepartament');
var numberOfCheckedBoxes=[];
for(k=0;k<ids.length;k++){
if(checkboxCol[k] == 'Yes'){
numberOfCheckedBoxes.push(checkboxCol[k]);
if (numberOfCheckedBoxes.length >1){
grid.setCell(id, 'sefDepartament', 'No');
alert('Please deselect the other checked box first');
numberOfCheckedBoxes = 0;
}
}
}
Update [ by oleg's request] :
$(function(){
var mydata = [
{id:0, nume:'Razvan', prenume:'Ciprian',username:'Razvan.Ciprian',email: 'Razvan.Ciprian#test.com','sefDepartament':'No',position: 'position 1',joinYear:'17-11-2015'},
{id:1, nume:'Jijel', prenume:'Codru',username:'Jijel.Codru',email: 'Jijel.Codru#test.com','sefDepartament':'No',position: 'position 5',joinYear:'18-11-2015'},
{id:2, nume:'Ionica', prenume:'Drumlung',username:'Ionica.Drumlung',email: 'Ionica.Drumlung#test.com','sefDepartament':'Yes',position: 'position 2',joinYear:'19-11-2015'},
{id:3, nume:'Rodent', prenume:'Dumitrache',username:'Rodent.Dumitrache',email: 'Rodent.Dumitrache#test.com','sefDepartament':'No',position: 'position 4',joinYear:'20-11-2015'}];
var grid = $('#grid');
var newId=0;
var newIdGeneratorFunction = function(){
return newId++ ;
};
var checkboxFormatFunc = function(cellvalue, options ,rowObject){
if(cellvalue == 'Yes')
return 'Yes';
else return 'No';
};
var afterSaveFunction = function(id){
var checkboxCol = grid.getCol('sefDepartament');
var ids = grid.jqGrid('getDataIDs');
var k;
var firstFoundId ;
var numberOfCheckedBoxes=[];
// Number of Checked Boxes Function begins;
for(k=0;k<ids.length;k++){
if(checkboxCol[k] == 'Yes'){
numberOfCheckedBoxes.push(checkboxCol[k]);
if (numberOfCheckedBoxes.length >1){
grid.setCell(id, 'sefDepartament', 'No');
alert('Please deselect the other checked box first');
numberOfCheckedBoxes = 0;
}
}
};
// Number of Checked Boxes Function ends;
};
var colModelSettings = [
{name:'id', label:'id',key: true,hidden: true,formatter: newIdGeneratorFunction , width:10,sorttype:'number',editable: false},
{name:'nume',label:'Nume',width:90, align: 'center',editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']}, editrules:{required:true}, editoptions: {defaultValue: ' '},formatter: 'text'},
{name:'prenume',label:'Prenume',width:100,editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center',editrules:{required:true},editoptions: {defaultValue: ' '},formatter: 'text'},
{name:'username',label:'Username',searchoptions: {sopt: ['eq','bw','ew','cn']},width:125,align: 'center' },
{name:'email',label:'Email',width:135,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center'},
{name:'sefDepartament',label:'Sef Departament',width:90,editable:true,align: 'center', stype:"select", searchoptions:{sopt: ['eq','ne'],value: "Yes:Yes;No:No"},formatter: checkboxFormatFunc,edittype:'checkbox',editoptions: { value:'Yes:No', defaultValue: 'No' }},
{name:'position',label:'Position',editable:true,stype: 'select',formatter: 'select',searchoptions: {sopt: ['eq','ne'],value: ' : ;position 1:position 1;position 2:position 2;position 3:position 3;position 4:position 4;position 5:position 5'},
align: 'center',edittype:'select',editoptions:{defaultvalue: 'P0: ',value: ' : ;position 1:position 1;position 2:position 2;position 3:position 3;position 4:position 4;position 5:position 5'},width: 75},
{name:'joinYear',label:'joinYear',editable:true,sorttype:'date',stype: 'datepicker',align: 'center',width: 70,
searchoptions:{sopt: ['eq','ne'],dataInit: function (elem) {
$(elem).datepicker(
{ dateFormat:'dd-mm-yy',
showButtonPanel: true }
)}},
editoptions:{size:20,defaultValue: ' ',
dataInit: function (elem) {
$(elem).datepicker(
{ showButtonPanel: true,
dateFormat:'dd-mm-yy',}
)}}},
{name:'experience', label:'Experience',searchoptions:{sopt: ['eq','bw','ew','cn']}, editable:false, editoptions:{defaultValue: ' '},align: 'center',width: 60},
{name:'actiuni',label: 'Actiuni',formatter: 'actions', formatoptions: {onEdit: onEditActionFunction,afterSave:afterSaveFunction},editable: false,sortable: false,search: false,width: 60 }
];
grid.jqGrid({
pager: '#pager',
data: mydata ,
datatype: 'local',
editurl:'clientArray',
height: 250,
loadonce: true,
viewrecords: true,
scrollOffset:0,
sortorder: 'asc',
caption:'Employee List' ,
autowidth: true,
colModel: colModelSettings,
beforeSelectRow : function(id){
if($('tr#'+id).is('[editable="1"]') == '1'){
return false;
}
else if ($('tr#'+id).is('editable') != '1') {
return true;
}
}
});
grid.jqGrid('navGrid', '#pager', {edit:false, add:false, save:false, cancel:false, search:true, searchtext: 'Search', refresh:true, del:false});
grid.jqGrid('inlineNav','#pager',
{
edit:true,
edittext: 'Edit',
save:true,
savetext: 'Save',
cancel: false,
add:true,
cancel: true,
canceltext: 'Cancel',
cancelicon: 'ui-icon-cancel',
addicon:'ui-icon-plus',
addtext: 'Add New Row',
addedrow: 'last',
addParams: {
position: 'last',
addRowParams: {
aftersavefunc : afterSaveFunction,
keys: true,
}
},
aftersavefunc : afterSaveFunction,
},
});
});
Update 2: I managed to block selecting a different row and leaving edit while editing the current row with this function:
beforeSelectRow : function(id){
var idsArray = grid.jqGrid('getDataIDs');
var i;
for(i=0;i<idsArray.length;i++){
if($('#'+idsArray[i]).is('[editable="1"]') ){
grid.editRow(idsArray[i],true);
return false;
}};
return true;}
I recommend you to try to use free jqGrid. It's the fork of jqGrid, which I develop since almost one year. It allows to simplify your code dramatically using the inline editing of inlineNav and formatter: "actions" which you use. All the options and callbacks of inline editing you can place directly in jqGrid options inside of inlineEditing option. I described the idea in the wiki article. Look at the demo which demonstrates it.
To customize selection or rows you can use beforeSelectRow which just returns false if you need to prevent selection. It's the correct way.
I have a colModel column that when a user presses the button, it will delete the row. However, I need this to go to the server (which is does) and delete it from the database using the row's ID.
This is the code that does it
colModel: [
...
{ name: 'id', index: 'Id', width: 70, hidden: true, editable: true,
{
name: 'actions', index: 'actions', width: 20, sortable: false, editable: false, formatter: imageFormat,
formatoptions: {
keys: true,
editbutton: false,
// I need to pass id from above into the server....this is what should happen here
delOptions: { url: Controller + 'Action?paramenter=' + id}
}
},
],
The problem is that I need to get the value of the id column and pass it in the parameter like above.
How can this be done?
Thanks
Ok I didnt use delOptions I used the .jqGrid('delGridRow') method inside the onSelectRow property,
and to get the id I used..
var myGrid = $('#grid'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'name');
So therefore...
jQuery("#resume").jqGrid('delGridRow', id, { height: 480, width: 400, closeAfterAdd: true, closeAfterEdit: true, recreateForm: true,url: Controller + 'Action?paramenter=' + celValue });
with the loadComplete() method, you can do like this:
$(table).find(".ui-inline-del").each(function() {
var delDivBtn = $(this);
var id_reg = /(\w+)([_]{1})(\w+$)/;
// remove the delete event
$(delDivBtn).removeAttr("onclick");
// add new click event
$(delDivBtn).click(function() {
var rowid = delDivBtn.attr("id").replace(id_reg, '$3');
alert(rowid);
});
});
I have a dgrid, working with tree column plugin. Every time that the user click on the tree, I call the server, catch the subrows(json) and bind it. But when it happens, these subrows are show in wrong position, like the image bellow. The most strange is when I change the pagination, after go back to first page, the subrows stay on the correct place.
(please, tell me if is possible to understand my english, then I can try to improve the text)
My dgrid code:
var CustomGrid = declare([OnDemandGrid, Keyboard, Selection, Pagination]);
var grid = new CustomGrid({
columns: [
selector({label: "#", disabled: function(object){ return object.type == 'DOCx'; }}, "radio"),
{label:'Id', field:'id', sortable: false},
tree({label: "Title", field:"title", sortable: true, indentWidth:20, allowDuplicates:true}),
//{label:'Title', field:'title', sortable: false},
{label:'Count', field:'count', sortable: false}
],
store: this.memoryStore,
collapseOnRefresh:true,
pagingLinks: false,
pagingTextBox: true,
firstLastArrows: true,
pageSizeOptions: [10, 15, 25],
selectionMode: "single", // for Selection; only select a single row at a time
cellNavigation: false // for Keyboard; allow only row-level keyboard navigation
}, "grid");
My memory store:
loadMemoryStore: function(items){
this.memoryStore = Observable(new Memory({
data: items,
getChildren: function(parent, options){
return this.query({parent: parent.id}, options);
},
mayHaveChildren: function(parent){
return (parent.count != 0) && (parent.type != 'DOC');
}
}));
},
This moment I am binding the subrows:
success: function(data){
for(var i=0; i<data.report.length; i++){
this.memoryStore.put({id:data.report[i].id, title:data.report[i].created, type:'DOC', parent:this.designId});
}
},
I was thinking, maybe every moment that I bind the subrows, I could do like a refresh on the grid, maybe works. I think that the pagination does the same thing.
Thanks.
edit:
I forgot the question. Well, How can I correct this bug? If The refresh in dgrid works. How can I do it? Other thing that I was thinking, maybe my getChildren is wrong, but I could not identify it.
thanks again.
My solution was change from PARENT hierarquia to CHILDREN hierarquia. Now works fine.
My dgrid code:
this.mapReportItems(reportDAO.get());
//this.mapReportItems(x);
this.loadMemoryStore(this.reportItems);
var CustomGrid = declare([OnDemandGrid, Keyboard, Selection, Pagination]);
var grid = new CustomGrid({
columns: [
selector({label: "#", disabled: function(object){ return object.type == 'DOCx'; }}, "radio"),
{label:'Id', field:'id', sortable: false},
tree({label: "Title", field:"title", sortable: false, indentWidth:20, shouldExpand:function() { return 0; }}),
//{label:'Title', field:'title', sortable: false},
{label:'Count', field:'count', sortable: true}
],
query: {parent: parent.children },
store: this.memoryStore,
deselectOnRefresh: false,
//columnReordering:true,
collapseOnRefresh:false,
pagingLinks: false,
pagingTextBox: true,
firstLastArrows: true,
pageSizeOptions: [10, 15, 25],
selectionMode: "single", // for Selection; only select a single row at a time
cellNavigation: false // for Keyboard; allow only row-level keyboard navigation
}, "grid");
My memory store:
this.memoryStore = Observable(new Memory({
data: items,
getChildren: function(parent){
return parent.children;
},
mayHaveChildren: function(parent){
//return (parent.count != 0) && (parent.type != 'DOC');
return (parent.children && parent.children.length) || (parent.count != 0 && parent.type != 'DOC');
}
}));
This moment I am binding the subrows:
success: function(data){
var node = this.memoryStore.get(this.designId);
for(var i=0; i<data.report.length; i++){
node.children.push({id:data.report[i].id, title:data.report[i].created, type:'DOC'});
}
this.memoryStore.put(node);
this.data = data;
},
Extra information. In my case I need map my Json data, this way:
this.reportItems = dojo.map(jsondata.reportDesign, function(report) {
return {
//'#uri': report[1],
id : report.id,
title : report.title,
count : report.count,
children: [],//report.children,
type : report.type
//parent : report.parent
};
});
This link was useful for me:
https://github.com/SitePen/dgrid/issues/346