JS: http://jsfiddle.net/tzHXR/
var data = generatedata(500); var source = { localdata: data, datafields: [{ name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'date', type: 'date' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }], datatype: "array" }; var adapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid({ width: 500, theme: 'energyblue', editable: true, source: adapter, sortable: true, columns: [{ text: 'First Name', datafield: 'firstname', width: 90, }, { text: 'Last Name', datafield: 'lastname', width: 90 }, { text: 'Product', datafield: 'productname', width: 170 }, { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }] }); I am trying to learn JQXgrid and this is my JS file. in this whole grid is set to editable: true flag but i want a particular field to be non-editable.
In reference to the forum-post by jqwidget team member http://www.jqwidgets.com/community/topic/making-a-column-non-editable/#post-11055
i tried this: JS: http://jsfiddle.net/tzHXR/89/
var data = generatedata(500); var source = { localdata: data, datafields: [{ name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'date', type: 'date' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }], datatype: "array" }; var adapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid({ width: 500, theme: 'energyblue', editable: true, source: adapter, sortable: true, columns: [{ text: 'First Name', datafield: 'firstname', width: 90, editable:false; // Editable Property Set to false }, { text: 'Last Name', datafield: 'lastname', width: 90 }, { text: 'Product', datafield: 'productname', width: 170 }, { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }] }); but after this , it doesn't work at all. all it shows is blank. i tried on my machine too. why does editable:false for a column makes it worse. how can i apply non-editable property to one exact column.
