javascript - JQX Grid Not working in chrome -
i used jqx grid widget.and through javascript i'm populating cell values.this works firefox.but not working in chrome.here code have used.
var objcredit = jquery.parsejson(returntext); document.getelementbyid('txtcustnumber').value = objcredit.customerid; $('[id$=txtcustnumber]').text(objcredit.customerid); getcustomerdetails(); document.getelementbyid('cmbdoctype').value = '3'; ***documentgridcontainer.jqxgrid('setcellvalue', 0, 'amount', objcredit.amount);***
here grid definition.
var source1 = { totalrecords: 5, unboundmode: true, datatype: "json", datafields: [ { name: 'lineid' }, { name: 'distcode' }, { name: 'distfinder' }, { name: 'distcodedesc' }, { name: 'revaccount' }, { name: 'revaccountfinder' }, { name: 'revaccdesc' }, { name: 'amount', type: 'float' }, { name: 'printcomment' }, { name: 'comment' }, { name: 'discountable', type: 'string' }, { name: 'optionalfield' }, { name: 'optionalfieldfinder' } ], localdata: data }; var dataadapter1 = new $.jqx.dataadapter(source1); documentgridcontainer.jqxgrid( { width: 975, source: dataadapter1, theme: '', editable: true, enabletooltips: true, columnsresize: true, autoheight: true, selectionmode: 'singlecell', columns: [ { text: 'line number', columntype: 'textbox', datafield: 'lineid', width: 100, editable: false }, { text: 'dist.code', columntype: 'textbox', datafield: 'distcode', width: 80 }, { text: '', datafield: 'distfinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { }, buttonclick: function (row) { editrow = row; showdocumentdistfinder(editrow); } }, { text: 'description', datafield: 'distcodedesc', columntype: 'textbox', width: 150, editable: false }, { text: 'revenue account', datafield: 'revaccount', columntype: 'textbox', width: 150 }, { text: '', datafield: 'revaccountfinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { }, buttonclick: function (row) { editrow = row; showdocumentrevenuefinder(editrow); } }, { text: 'acc. description', datafield: 'revaccdesc', columntype: 'textbox', width: 150, editable: false }, { text: 'amount', datafield: 'amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: setamounteditable() }, //{ text: 'print comment', datafield: 'printcomment', width: 150 }, {text: 'prt comment', datafield: 'printcomment', width: 93, columntype: 'dropdownlist', createeditor: function (row, column, editor) { // assign new data source dropdownlist. var list = ['yes', 'no']; editor.jqxdropdownlist({ source: list }); }, // update editor's value before saving it. cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { // return old value, if new value empty. if (newvalue == "") return oldvalue; } }, { text: 'comment', datafield: 'comment', width: 250 }, //{ text: 'discountable', datafield: 'discountable', width: 100 } {text: 'discountable', datafield: 'discountable', width: 93, columntype: 'dropdownlist', createeditor: function (row, column, editor) { // assign new data source dropdownlist. var list = ['yes', 'no']; editor.jqxdropdownlist({ source: list }); }, // update editor's value before saving it. cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { // return old value, if new value empty. if (newvalue == "") return oldvalue; } }, { text: 'optional field', datafield: 'optionalfield', width: 100 }, { text: '', datafield: 'optionalfieldfinder', columntype: 'button', width: 30, cellsrenderer: function () { }, buttonclick: function (row) { editrow = row; createdocumentoptionalfields(editrow); $('#model-documentoptionfield').modal('show'); } } ] });
thanks in advance
your initialization incorrect. datatype: "json" in unbound mode not make sense. should remove that. below working sample:
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var source1 = { totalrecords: 5, unboundmode: true, datafields: [ { name: 'lineid' }, { name: 'distcode' }, { name: 'distfinder' }, { name: 'distcodedesc' }, { name: 'revaccount' }, { name: 'revaccountfinder' }, { name: 'revaccdesc' }, { name: 'amount', type: 'float' }, { name: 'printcomment' }, { name: 'comment' }, { name: 'discountable', type: 'string' }, { name: 'optionalfield' }, { name: 'optionalfieldfinder' } ] }; var dataadapter1 = new $.jqx.dataadapter(source1); var documentgridcontainer = $("#jqxgrid"); documentgridcontainer.jqxgrid( { width: 975, source: dataadapter1, theme: '', editable: true, enabletooltips: true, columnsresize: true, ready: function() { documentgridcontainer.jqxgrid('setcellvalue', 0, 'amount', 50); }, autoheight: true, selectionmode: 'singlecell', columns: [ { text: 'line number', columntype: 'textbox', datafield: 'lineid', width: 100, editable: false }, { text: 'dist.code', columntype: 'textbox', datafield: 'distcode', width: 80 }, { text: '', datafield: 'distfinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { }, buttonclick: function (row) { editrow = row; showdocumentdistfinder(editrow); } }, { text: 'description', datafield: 'distcodedesc', columntype: 'textbox', width: 150, editable: false }, { text: 'revenue account', datafield: 'revaccount', columntype: 'textbox', width: 150 }, { text: '', datafield: 'revaccountfinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { }, buttonclick: function (row) { editrow = row; //showdocumentrevenuefinder(editrow); } }, { text: 'acc. description', datafield: 'revaccdesc', columntype: 'textbox', width: 150, editable: false }, { text: 'amount', datafield: 'amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: true }, //{ text: 'print comment', datafield: 'printcomment', width: 150 }, { text: 'prt comment', datafield: 'printcomment', width: 93, columntype: 'dropdownlist', createeditor: function (row, column, editor) { // assign new data source dropdownlist. var list = ['yes', 'no']; editor.jqxdropdownlist({ source: list }); }, // update editor's value before saving it. cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { // return old value, if new value empty. if (newvalue == "") return oldvalue; } }, { text: 'comment', datafield: 'comment', width: 250 }, //{ text: 'discountable', datafield: 'discountable', width: 100 } { text: 'discountable', datafield: 'discountable', width: 93, columntype: 'dropdownlist', createeditor: function (row, column, editor) { // assign new data source dropdownlist. var list = ['yes', 'no']; editor.jqxdropdownlist({ source: list }); }, // update editor's value before saving it. cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { // return old value, if new value empty. if (newvalue == "") return oldvalue; } }, { text: 'optional field', datafield: 'optionalfield', width: 100 }, { text: '', datafield: 'optionalfieldfinder', columntype: 'button', width: 30, cellsrenderer: function () { }, buttonclick: function (row) { editrow = row; createdocumentoptionalfields(editrow); $('#model-documentoptionfield').modal('show'); } } ] }); }); </script> </head> <body class='default'> <div id='jqxwidget'> <div id="jqxgrid"> </div> </div> </body> </html>
Comments
Post a Comment