Add DropDownList to TreeGrid

[Ali_bParticipant]

Hi.
I need to create a treegrid with dropdownlist in it. This dropdownlist in each row has its own datasourse. I mean datasource for each dropdownlist is different from other dropdownlists in other rows. How can I do that?
Thanks.

[MartinParticipant]

Hello Ali_b,

You can pass a separate source for each of your dropdown lists like this:
$("#jqxDropDownList1").jqxDropDownList({source: source1})

If you have a difficulty doing this, please send your code, so I can look at it.
Thank you!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Ali_bParticipant]

Hello Martin,
Thank you for your Response.
My TreeGrid is a JQTreeGrid. I have some columns in it. For Example:
columns.push({
text: ‘Product’, dataField: ‘gud_Descrp’, align: ‘center’, cellsAlign: ‘center’, width: “130”, editable: false, cellClassName: cellClass
, cellsrenderer: function (row, column, value) {
return changeToMoney(value);
}
});
Another column is Unit.

columns.push({
text: ‘Unit’, dataField: ‘unt_Descrp’, align: ‘center’, cellsAlign: ‘center’, min_width: “80”, editable: true, columnType: “custom”, cellClassName: cellClass
, createEditor: function (rowKey, cellvalue, editor, cellText, width, height) {
var row = $(“#treeGrid”).jqxTreeGrid(‘getRow’, rowKey);
//var checkbox = $(“<div style=’margin-top: 6px; margin-left: -8px; left: 50%; position: relative;’ class=’wareHouseCheckbox’/>”).appendTo(editor);
//checkbox.jqxCheckBox({ checked: cellvalue });
var dropDownList = $(“<div class=’dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ width: ‘100%’, height: ‘100%’, autoDropDownHeight: true, theme: “energyblue”, rtl: true, source: [“Gram”, “Kilo Gram”, “Ton”] });
}
});
In This Example source: [“Gram”, “Kilo Gram”, “Ton”] is my datasource. I want to bind this dropdown list dynamically for each row.
As you know units depend on products. Each product has its own units. How can I do that dynamically?
Thanks.

[MartinParticipant]

Hello Ali_b,

Here is an Example of how you can do this.

And you can then use ‘#row1grid .dropdown-cell’ selector to select a specific row dropdown cell for binding to its own datasource.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Ali_bParticipant]

Thank you Martin,
this example is good but my problem was not solved.
In your example all of the dropdown lists (10 dropdown lists in 10 rows) have the same data source : [“Gram”, “Kilo Gram”, “Ton”]
but may problem is these dropdown list have different data sources. for example first row has the product apple and its dropdown list has data source [“Gram”, “Kilo Gram”, “Ton”].
The second row has the product rope and its dropdownlist has data source [“Meter”, “Kilo Meter”, “Centimeter”] At the same other rows has different data sources. So each dropdown List data source depends on the product that exist on that row.
Thanks

[MartinParticipant]

Hello Ali_b,

Here is an updated Example.
You check for the content of the product’s cell in each row and create a dropdown with a source according to it.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Ali_bParticipant]

Thank you Martin,
It’s so helpful.
Is it away to fetch data from database for each row?
I use Handler to fetch data for treegrid.
This is my handler to fetch data for treegrid:
$.getJSON(‘../../../Handler/PurchaseFactorDetailsTree.ashx?rps_Id=’ + rps_Id + ‘&fct_Id=’ + fct_Id, function (data) {});
Now I want to use another handler to fethch data for each dropdown list from database.
Thank you.

[MartinParticipant]

Hello Ali_b,

You can try fetching your dropdown list data and setting in to the source inside the ‘rendered’ function.
For example, inside the switch cases for each row, but you should also check if this data isn’t already fetched for some of the previous rows.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Ali_bParticipant]

Thank you Martin.
It’s helpful.

[Author]

Posts