jQuery UI Widgets › Forums › Grid › Grid cell Edit columntype dropdownlist
Tagged: columntype dropdownlist
This topic contains 7 replies, has 4 voices, and was last updated by joel 9 years, 5 months ago.
-
Author
-
Hi, how url is called with different data to dropdownlist.
Code Ex:
$(“#jqxgrid”).jqxGrid(
{
width: 700,
height: 350,
selectionmode: ‘singlecell’,
source: source,
theme: theme,
editable: true,
columns: [
{ text: ‘EmployeeID’, editable: false, datafield: ‘EmployeeID’, width: 100 },
{ text: ‘First Name’, columntype: ‘text’, datafield: ‘FirstName’, width: 100 },
{ text: ‘Last Name’, columntype: ‘dropdownlist’, datafield: ‘LastName’, width: 100 },
{ text: ‘Title’, datafield: ‘Title’, width: 180 },
{ text: ‘Address’, datafield: ‘Address’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 100 },
{ text: ‘Country’, datafield: ‘Country’,columntype: ‘dropdownlist’*, width: 140 }
]
});For example,
* url:’www.domain.com/countrylist.php’ or data:’dropdownlist.php?fieldname=Country’
Thank you for your help.
Hi goksel,
You can use the ‘initeditor’ callback function to provide a new data source to the jqxDropDownList editor. The ‘initeditor’ function is called before the editor is shown. You can create another jqxDataAdapter instance associated to a different data source and use it as the jqxDropDownList’s data source.
Take a look at the initialization of the jqxDropDownList editor and the dropDownListDataAdapter in the code below:
<!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.7.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.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); var url = "../sampledata/beverages.txt"; // prepare the data var dropDownListSource = { datatype: "json", datafields: [ { name: 'name' }, { name: 'protein' } ], id: 'id', url: url }; var dropdownListAdapter = new $.jqx.dataAdapter(dropDownListSource, { autoBind: true, async: false }); var dropdownListSource = []; for (var i = 0; i < dropdownListAdapter.records.length; i++) { dropdownListSource[i] = dropdownListAdapter.records[i]['protein']; } // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, editable: true, theme: theme, selectionmode: 'singlecell', columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 }, { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177, initeditor: function (row, cellvalue, editor) { editor.jqxDropDownList({ source: dropdownListSource}); } }, { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 }, { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd', validation: function (cell, value) { var year = value.getFullYear(); if (year >= 2013) { return { result: false, message: "Ship Date should be before 1/1/2013" }; } return true; } }, { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 150) { return { result: false, message: "Quantity should be in the 0-150 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ decimalDigits: 0, digits: 3 }); } }, { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 15) { return { result: false, message: "Price should be in the 0-15 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 3 }); } } ] }); }); </script></head><body class='default'> <div id="jqxgrid"></div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThank you very much Peter. It’s worked. 🙂
Hi,
Maybe it’s just me, but I think this has stopped working with V2.0. If I use the same file (basically the same as in your example above) it works with 1.9, but with 2.0 I get a blank dropdown list.Cheers
ChrisHi Chris,
It is not necessary to loop through the records to build a new data source and pass is to the DropDownList, It’s only necessary to pass the Data Adapter instance to the DropDownList.
For example:
var url = "../sampledata/beverages.txt";// prepare the datavar dropDownListSource ={ datatype: "json", datafields: [ { name: 'name' }, { name: 'protein' } ], id: 'id', url: url};var dropdownListAdapter = new $.jqx.dataAdapter(dropDownListSource, { autoBind: true, async: false });// initialize jqxGrid$("#jqxgrid").jqxGrid({ width: 670, source: dataAdapter, editable: true, theme: theme, selectionmode: 'singlecell', columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 }, { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177, initeditor: function (row, cellvalue, editor) { editor.jqxDropDownList({ displayMember: 'protein', source: dropdownListAdapter }); } }, { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 }, { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd', validation: function (cell, value) { var year = value.getFullYear(); if (year >= 2013) { return { result: false, message: "Ship Date should be before 1/1/2013" }; } return true; } }, { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 150) { return { result: false, message: "Quantity should be in the 0-150 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ decimalDigits: 0, digits: 3 }); } }, { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 15) { return { result: false, message: "Price should be in the 0-15 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 3 }); } } ]});
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for the reply. I’m running the same script as above, but instead of using a data adaptor, I’m initialising the dropdownListSource array statically. The rest is exactly the same. This works ok with jqWidgets 1.9, but when I changed to jqWidgets 2.0 it stopped working and I had a blank dropdown.Cheers
ChrisHi Chris,
I was able to reproduce the reported issue with version 2.0. As a temporary workaround, you can use the solution with the jqxDataAdapter.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHello,
I have a very stupid question, because I am beginner with dropdownlist:
How can I retrieve the “id” of the dropdqownlist, for example for the first rowthank you for your help
Joel -
AuthorPosts
You must be logged in to reply to this topic.