jQuery UI Widgets › Forums › Grid › How can I get All Columns of Grid.
This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 10 years, 8 months ago.
-
Author
-
Hello,
I tried to get all column’s text of Grid.var textData = new Array(); var cols = $("#jqxGrid").columns for (var i = 0; i < cols.length; i++) { textData[i] = cols[i].text; }
It’s wrong ?? I can’t do it.
Please help me.Thank you.
Hello enrique,
Do you mean getting the text of all column headers? If so, here is how to achieve it:
var textData = new Array(); var cols = $("#jqxGrid").jqxGrid("columns"); for (var i = 0; i < cols.records.length; i++) { textData[i] = cols.records[i].text; }
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar,
Thank you for your support.And I hava one more question.
I’m trying to add the new empty row and in that row, I want to render the Drop-Down list.
(The new row is editable and when I input the value by selection in Drop-Down List. Can I do? How can I do?)Please Help me.
Hi enrique,
You just have to add the new row with the addrow method. Here is an example, based on the demo Customized Editors:
<!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.10.2.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); $("#jqxgrid").jqxGrid( { width: 850, source: ordersAdapter, selectionmode: 'singlecell', editable: true, pageable: true, autoheight: true, columns: [ { text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox', 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:" }); }, // 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 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' } ] }); $("#addNewRow").click(function () { $("#jqxgrid").jqxGrid("addrow", null, {}); }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div> <button id="addNewRow"> Add new row</button> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi, Dimitar
Thanks to your kindly support.
And I modified your example for making the customized editor from Drop Down List to Check Boxes Drop Down List.
So I changed the code like this (below), but the Check Boxes are not rendered.
What is my mistake or problem?{ text: 'Type', datafield: 'type', width: 130, align: 'center', cellsalign: 'center', columntype: 'dropdownlist', createeditor: function (row, column, editor) { var list = ['Type1', 'Type2', 'Type3]; editor.jqxDropDownList({ autoDropDownHeight: true, source: list, checkboxes: true }); }, cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { if (newvalue == "") return oldvalue; } }
Hi enrique,
Enabling checkboxes in a dropdownlist requires a reference to the script jqxcheckbox.js, which is not present in our example. Please add it and try again.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi, Dimitar
Sure, sure I know I need & have to add the jqxcheckbox.js in my code. And I already insert it to the code.
But It’s not working.
The Checkbox position is allocated but checkbox is not shown.
I don’t know why ??Hi enrique,
The demo Custom Column Editor shows such dropdownlist with checkboxes. Please check it out and compare it to your solution (note: columntype can be either “dropdownlist” or “template”).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.