We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
[index.cshtml]
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})">
<e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editsettings>
<e-data-manager url="/Index?handler=DataSource" batchUrl="/Index?handler=BatchUpdate" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="120" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
var multiSelectEle;
var element
function onCreate(args) {
element = document.createElement('input');
return element;
}
function onRead(e) {
return multiSelectEle.value;
}
function onDestroy() {
multiSelectEle.destroy();
}
function onWrite(args) {
multiSelectEle = new ej.dropdowns.MultiSelect({ //rendering multiSelectEle component
dataSource: new ej.data.DataManager({
url: '/Index?handler=AutoCompleteDataSource',
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true,
headers: [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]
}),
query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(), fields: { text: "FirstName", value: 'FirstName' },
// set the placeholder to multiSelectEle input element
placeholder: 'e.g. Andrew Fuller',
// sort the resulted items
sortOrder: 'Ascending',
// set the filterType to searching operation
filterType: 'StartsWith',
});
multiSelectEle.appendTo(element);
}
function onLoad() {
this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];
}
</script> |
Hi, thanks! this work correctly.
I highly recommend everyone to use syncfusion :)
Hi Nelson,
Thanks for contacting Syncfusion support,
Query #1: Can i get some example of multiselect dropdown in a grid cell in EJ2 (razor page)You can able to edit the grid cell with Multiselect dropdown on the EJ2 Grid. we have bind that editing in the “CustomerID” column. Please refer the below code example for more information.Query #2: Is there a way to get the multiselect filled(with objects) direct from a db?Yes, you can bind and save the changes on DB in MultiSelect dropdown editing using “URL Adaptor”. Please refer the below code example and Documnentation to know about the DataManager and multiselect with urladaptor.
Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RazorpagesSample15042019-2085244706.zip
Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#batch
Please get back to us, if you need further assistance.
Regards,Hariharan
Hi Nelson,
Thanks for contacting Syncfusion support,
Query #1: Can i get some example of multiselect dropdown in a grid cell in EJ2 (razor page)You can able to edit the grid cell with Multiselect dropdown on the EJ2 Grid. we have bind that editing in the “CustomerID” column. Please refer the below code example for more information.Query #2: Is there a way to get the multiselect filled(with objects) direct from a db?Yes, you can bind and save the changes on DB in MultiSelect dropdown editing using “URL Adaptor”. Please refer the below code example and Documnentation to know about the DataManager and multiselect with urladaptor.
Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RazorpagesSample15042019-2085244706.zip
Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#batch
Please get back to us, if you need further assistance.
Regards,Hariharan
Im trying to do the same in Grid Dialog mode, and cannot find the way of get the selected items in the multiselect. How can i take these selected values in the handler of the grid (e g. .. /Index?handler=Insert") ???
|
[index.cshtml]
<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})">
<e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editsettings>
<e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="120" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
. . . .
function onWrite(args) {
multiSelectEle = new ej.dropdowns.MultiSelect({ //rendering multiSelectEle component
dataSource: new ej.data.DataManager({
url: '/Index?handler=AutoCompleteDataSource',
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true,
headers: [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }]
}),
query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(), fields: { text: "FirstName", value: 'FirstName' },
// Grid edited cell value bound on MultiSelect edit type
value: args.rowData.CustomerID,
// sort the resulted items
sortOrder: 'Ascending',
// set the filterType to searching operation
filterType: 'StartsWith',
});
multiSelectEle.appendTo(element);
// Made the label for CustomerID edit mode
var parentEle = new ej.grids.parentsUntil(args.element, "e-rowcell");
var labelEle = document.createElement("label");
labelEle.innerHTML = args.column.headerText;
labelEle.id = "label_" + args.element.id;
labelEle.style.fontWeight = "normal";
labelEle.style.color = "rgba(0, 0, 0, 0.42)";
parentEle.prepend(labelEle);
}
[index.cshtml.cs]
public JsonResult OnPostInsert([FromBody]CRUDModel<Orders> value)
{
Orders.GetAllRecords().Insert(0, value.Value);
return new JsonResult(value.Value);
}
public JsonResult OnPostUpdate([FromBody]CRUDModel<Orders> value)
{
var ord = value.Value;
Orders val = Orders.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault();
val.OrderID = ord.OrderID;
val.EmployeeID = ord.EmployeeID;
val.CustomerID = ord.CustomerID;
val.ShipCity = ord.ShipCity;
return new JsonResult(value.Value);
}
public JsonResult OnPostDelete([FromBody]CRUDModel<Orders> value)
{
Orders.GetAllRecords().Remove(Orders.GetAllRecords().Where(or => or.OrderID == int.Parse(value.Key.ToString())).FirstOrDefault());
return new JsonResult(value);
} |
