Populating cutom template dropdown issues
3 Replies
Hi Peter,
Thanks for contacting Syncfusion support.
Based on your query, we understand that you want to use “dialogTemplate” feature to customize the default behavior of dialog editing and you want to render the dropdown controls to edit the column field. So we have prepared a sample for your reference, In that we have rendered the custom dropdown components with dataSource.
More details on this can be checked in the below UG link.
Code Example:
|
Index.cshtml
ejs-grid id="Grid" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>
<e-data-manager url="/Home/UrlDataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="140"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="140"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType='dropdownedit'></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship city" width="150" editType='dropdownedit'></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script id='dialogtemplate' type="text/x-template">
<div id="dialogTemp">
</div>
</script>
<script>
function actionComplete(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
let spinner = ej.popups.createSpinner({ target: args.dialog.element });
ej.popups.showSpinner(args.dialog.element);
if (args.requestType === 'beginEdit') {
var ajax = new ej.base.Ajax({
url: "@Url.Action("EditPartial")", //render the partial view
type: "POST",
contentType: "application/json",
data: JSON.stringify({ value: args.rowData })
});
ajax.send().then(function (data) {
appendElement(data, args.form); //Render the edit form with selected record
args.form.elements.namedItem('CustomerID').focus();
ej.popups.hideSpinner(args.dialog.element);
}).catch(function (xhr) {
console.log(xhr);s
ej.popups.hideSpinner(args.dialog.element);
});
}
if (args.requestType === 'add') {
var ajax = new ej.base.Ajax({
url: "@Url.Action("AddPartial")", //render the partial view
type: "POST",
contentType: "application/json",
data: JSON.stringify({ value: args.rowData })
});
ajax.send().then(function (data) {
appendElement(data, args.form); //Render the edit form with selected record
args.form.elements.namedItem('OrderID').focus();
ej.popups.hideSpinner(args.dialog.element);
}).catch(function (xhr) {
console.log(xhr);
ej.popups.hideSpinner(args.dialog.element);
});
}
}
}
function appendElement(elementString, form) {
form.querySelector("#dialogTemp").innerHTML = elementString;
var script = document.createElement('script');
script.type = "text/javascript";
var serverScript = form.querySelector("#dialogTemp").querySelector('script');
script.textContent = serverScript.innerHTML;
document.head.appendChild(script);
serverScript.remove();
}
</script>
|
|
HomeController.cs
public IActionResult EditPartial([FromBody] CRUDModel<OrdersDetails> value) {
// datasourse for custom dropdown component. ViewBag.county= CountryData.GetDropData().ToList();
ViewBag.city = DDCityData.GetDropData().ToList();
return PartialView("_DialogEditPartial", value.Value);
}
public IActionResult AddPartial([FromBody] CRUDModel<OrdersDetails> value)
{
ViewBag.county = CountryData.GetDropData().ToList();
ViewBag.city = DDCityData.GetDropData().ToList();
return PartialView("_DialogAddPartial");
} |
|
DialogAddPartial.cshtml
@model EJ2Grid.Models.OrdersDetails
@*//define the model for store the model values*@
@using Syncfusion.EJ2
<div>
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input asp-for="OrderID" type='text' />
<span class="e-float-line"></span>
<label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label>
</div>
</div>
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper">
<input asp-for="CustomerID" />
<span class="e-float-line"></span>
<label asp-for="CustomerID" class="e-float-text e-label-top">Customer Name</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<ejs-numerictextbox id="Freight" format="C2" placeholder="Freight" floatLabelType="Always"></ejs-numerictextbox>
</div>
<div class="form-group col-md-6">
<ejs-dropdownlist id="ShipCountry" dataSource="@ViewBag.county" placeholder="Ship Country" floatLabelType="Always" popupHeight="300px">
<e-dropdownlist-fields text="CountryName" value="CountryName"></e-dropdownlist-fields>
</ejs-dropdownlist>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<ejs-dropdownlist id="ShipCity" dataSource="@ViewBag.city" placeholder="Ship City" floatLabelType="Always" popupHeight="300px">
<e-dropdownlist-fields text="CityName" value="CityName"></e-dropdownlist-fields>
</ejs-dropdownlist>
</div>
</div>
</div>
<ejs-scripts></ejs-scripts> |
 |
Still, if you are facing any issue, kindly share the following details that will be helpful for us to provide better solution.
- Please explain/elaborate on your exact issue.
- Let us know the replication procedure for reproducing the problem.
- Share your complete Grid rendering code.
- Syncfusion package version used.
- If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. It would be helpful to identify your problem case better so that we can check and provide the solution based on that
Regards,
Praveenkumar G
SIGN IN To post a reply.
