How to set data for dropdownedit column?
16 Replies
Hi Tomasz,
Thanks for your update.
QUERY: Add parameter to query dropdow list's data based on row value
We have achieved your query by adding the additional parameter to the dropdown in Tree Grid's "actionBegin" event with request type "beginEdit" .
Please check the below code snippet,
|
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data"
idMapping="TaskId" parentIdMapping='ParentId'
actionBegin="begin" actionComplete="complete">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="Priority" headerText="Priority" width="90" editType="dropdownedit"
edit="new {@params = DropDownList }"></e-treegrid-column></ejs-treegrid>
<script>
var flag = true;
function begin(args) {
if (args.requestType == "beginEdit") {
var params = this.grid.columns[2].edit.params.query.params;
// checking whether id is already present or not then adding it as params
if (params.length == 0) {
this.columns[2].edit.params.query.addParams("id", args.rowData.TaskId);
// adding row's primary key value as params to dropdown
}
else if (params.length) {
for (var i = 0; i < params.length; i++) {
if (params[i]["key"] == "id") {
flag = false;
}
}
if (flag) {
this.columns[2].edit.params.query.addParams("id", args.rowData.TaskId);
// adding row's primary key value as params to dropdown
}
}
}
}
function complete(args) {
if (args.requestType == "save" || args.requestType == "cancel") {
var params = this.columns[2].edit.params.query.params;
flag = true;
for (var i = 0; i < params.length; i++) {
if (params[i]["key"] == "id") {
params.splice(i,1);
}
}
}
}
</script>
public object Get()
{
var queryString = Request.Query;
// here we can get the parameter
int num = Convert.ToInt32(queryString["id"]);
// based on id value you can return data
---------
return new { Items = data2, Count = data2.Count() };
} |
In actionComplete event with "requestType" "save" and "cancel" we need to remove the added params in order to prevent the conflict while adding the parameter again.
Please check the below screenshot,
Using this primary key in server end, you can return data as per your requirement.
Please check the below help documentation,
Kindly get back to us for further assistance.
Regards,
Padmavathy Kamalanathan
Hi Phil,
Thanks for contacting Syncfusion Forums.
QUERY: would it be possible to see how to incorporate a multi select column in a Tree Grid for ASP.NET Core
As mentioned in the forum 146207, we can render the multi select column in Tree Grid using edit Template. Please check the below code snippet for using the Multi Select Drop Down column in Tree Grid for ASP.NET Core
|
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data"
idMapping="TaskId" parentIdMapping='ParentId' treeColumnIndex="1" >
----------
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true"
textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="Priority" headerText="Task Name" width="60"
edit="@(new { create = "create", read = "read", write = "write", destroy ="destroy" })">
</e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
//data for multi select using data manager
var data = new ej.data.DataManager({
url: '/api/Employee',
adaptor: new ej.data.WebApiAdaptor()
});
var multiSelectObj, elem;
function create(args) {
elem = document.createElement('input');
return elem;
}
function read(args) {
return multiSelectObj.value;
}
function destroy(args) {
return multiSelectObj.destroy();
}
function write(args) {
multiSelectObj = new ej.dropdowns.MultiSelect({
dataSource: data,
fields: { value: 'Priority' },
value: Array.isArray(args.rowData["Priority"])? args.rowData["Priority"] :
[args.rowData["Priority"]],
});
multiSelectObj.appendTo(elem);
}
</script>
|
Please check the below screenshot,
Please check the below help documentations,
Kindly get back to us for further assistance.
Regards,
Padmavathy Kamalanathan
SIGN IN To post a reply.
