jQuery UI Widgets › Forums › Grid › Grid setcolumnproperty method
Tagged: callback, Cell, column, createeditor, dynamically, edit, function, grid, jqxgrid, property, set, setcolumnproperty
This topic contains 2 replies, has 2 voices, and was last updated by Dimitar 10 years, 1 month ago.
-
Author
-
Hi!
Exist possibility to add for grid column with “setcolumnproperty” cell editing functions ? Now from doc : $(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘width’, 100);
But I want to add something like that :
$(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘createeditor’, mineFunct1 );
$(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘initeditor’, mineFunct2 );
$(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘cellvaluechanging’, mineFunct3 );Thanks in advance !
I want to supplement mine question …
Mine javascript source is doing grid from database table in which I’m storing info : datafield of query, type, text, format and etc … It works fine. The problem begins then I must to direct for editing some complex structures – dropdownlist or combobox editing or validations. So I’m searching a way how to describe this process . As I can understand, I have 2 choice : in grid columns describe function :
columns: [
{
text: ‘Ship City’, datafield: ‘ShipCity’, width: 150, columntype: ‘combobox’,
createeditor: function (row, column, editor) { mineFunct1 },
// mineFuct1 – function for specified field – it will directed in mine table for grid construction … But I don’t konw how with params 🙁
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { if (newvalue == “”) return oldvalue; }
},
{ another column … }or set it after grid init with setcolumnproperty
$(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘ShipCity’, ‘columntype’, ‘combobox’);
$(‘#jqxGrid’).jqxGrid(‘setcolumnproperty’, ‘ShipCity’, ‘createeditor’, mineFunct1 );
…How this can be done ? Thanks !
Hello usrimas,
This can be achieved. Here is an example:
<!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.11.1.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/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.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var ordersSource = { datatype: "xml", datafields: [ { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' }, { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' }, { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' }, { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' }, { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' }, { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' } ], root: "entry", record: "content", id: 'm\\:properties>d\\:OrderID', url: "../sampledata/orders.xml", pager: function (pagenum, pagesize, oldpagenum) { // callback called when a page or page size is changed. }, updaterow: function (rowid, rowdata, result) { // synchronize with the server - send update command // call result with parameter true if the synchronization with the server is successful // and with parameter false if the synchronization failder. result(true); } }; var ordersAdapter = new $.jqx.dataAdapter(ordersSource); var createeditor = function (row, column, editor) { // assign a new data source to the combobox. var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg']; editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Please Choose:" }); }; var cellvaluechanging = function (row, column, columntype, oldvalue, newvalue) { // return the old value, if the new value is empty. if (newvalue == "") return oldvalue; }; $("#jqxgrid").jqxGrid( { width: 850, source: ordersAdapter, selectionmode: 'singlecell', editable: true, pageable: true, autoheight: true, ready: function () { $("#jqxgrid").jqxGrid("setcolumnproperty", "ShipCity", "createeditor", createeditor); $("#jqxgrid").jqxGrid("setcolumnproperty", "ShipCity", "cellvaluechanging", cellvaluechanging); }, columns: [ { text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox' }, { text: 'Ship Country', datafield: 'ShipCountry', width: 150, columntype: 'dropdownlist', createeditor: function (row, column, editor) { // assign a new data source to the dropdownlist. var list = ['Germany', 'Brazil', 'France']; editor.jqxDropDownList({ autoDropDownHeight: true, source: list }); }, // update the editor's value before saving it. cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { // return the old value, if the new value is empty. if (newvalue == "") return oldvalue; } }, { text: 'Ship Name', datafield: 'ShipName', columntype: 'combobox' } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.