1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Dialog Template with dropdown in Grid (Razor Pages)

Dialog Template with dropdown in Grid (Razor Pages)

Looking to use a dialog template for some of my grids for adding/editing for some models.

The dialog template is working fine except for populating the dropdowns in the dialog. They show up but blank. 
Not sure what is missing as most examples are for MVC.

Index.cshtml
<ejs-grid id="Grid" height="100%" allowTextWrap="true" allowGrouping="false" allowPaging="true" allowFiltering="true" allowSorting="true" allowSelection="true" load="onLoad" actionFailure="onActionFailure" actionComplete="actionComplete" toolbar="@( new List<object>() { "Add" })">
    <e-grid-editsettings allowDeleting="true" allowEditing="true" allowAdding="true" showDeleteConfirmDialog="true" mode="Dialog" template='#dialogtemplate'></e-grid-editsettings>
    <e-data-manager url="/Members/Index?handler=LoadData" insertUrl="/Members/Index?handler=Insert" removeUrl="/Members/Index?handler=Delete" updateUrl="/Members/Index?handler=Update" adaptor="UrlAdaptor"></e-data-manager>
    <e-grid-filtersettings type="Excel"></e-grid-filtersettings>
    <e-grid-pagesettings pageCount="5" pageSizes="true" pageSize="20"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" isIdentity="true" textAlign="Right" visible="false"></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') {
                ...
                });
            }

            if (args.requestType === 'add') {
                var ajax = new ej.base.Ajax({
                    type: "POST",
                    url: "/Members/Index?handler=AddPartial",
                    beforeSend: function (xhr) {
                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    contentType: "application/json",
                    dataType: 'json',
                    data: JSON.stringify({ value: args.rowData })
                });
                ajax.send().then(function (data) {
                    $("#dialogTemp").html(data);
                    args.form.elements.namedItem('FirstName').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>

Index.cshtml.cs
public List<Classification> ClassificationDD { get; set; }

        public void OnGet()
        {
            ClassificationDD = _context.Classifications.ToList();
        }

        public IEnumerable GetGridData()
        {
            var gridData = _context.Members.ToList();
            return gridData;
        }
...
        public IActionResult OnPostAddPartial([FromBody] CRUDModel<Member> value)
        {
            return new PartialViewResult
            {
                ViewName = "_AddPartial",
                ViewData = new ViewDataDictionary<Member>(ViewData, value.Value)
            };
        }

_AddPartial.cshtml
<div style="width:900px">
    <div class="form-row">
        ...
        <div class="form-group col-md-6">
            <label asp-for="ClassificationRate.Classification" class="control-label"></label>
            <ejs-dropdownlist id="ClassificationRate.Classification.Id" dataSource="@Model.ClassificationDD" floatLabelType="Always" popupHeight="300px">
                <e-dropdownlist-fields text="Name" value="Id"></e-dropdownlist-fields>
            </ejs-dropdownlist>
        </div>
    </div>
     ...
<ejs-scripts></ejs-scripts>

1 Reply 1 reply marked as answer
PG Praveenkumar Gajendiran Syncfusion Team May 21, 2021 01:08 PM UTC

Hi Sheldon,  
  
Thanks for contacting Syncfusion support.  
  
Based on query, we have prepared a razor page with dialog template sample. Find the edit partial view code in the below code example. 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" load="onLoad" allowPaging="true" actionComplete="actionComplete" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editsettings> 
    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" removeUrl="/Index?handler=Delete" updateUrl="/Index?handler=Update" adaptor="UrlAdaptor"></e-data-manager> 
    <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" width="150"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="Name" width="120" foreignKeyField="EmployeeID" foreignKeyValue="FirstName" dataSource="@Model.DropDatasource"></e-grid-column> 
        <e-grid-column field="OrderDate" headerText="Order Date" editType="datePickerEdit" format="yMd" type="date" width="170"></e-grid-column> 
        <e-grid-column field="City" headerText="City" textAlign="Right" width="120"></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") { 
            foreignkeyData = args.foreignKeyData; 
        } 
        if (args.requestType === "save") { 
            btnChanged = undefined; 
        } 
        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({ 
                    type: "POST", 
                    url: "/Index?handler=EditPartial", 
                    beforeSend: function (xhr) { 
                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN", 
                            $('input:hidden[name="__RequestVerificationToken"]').val()); 
                    }, 
                    contentType: "application/json", 
                    dataType: 'json', 
                    data: JSON.stringify({ value: args.rowData }) 
                }); 
                ajax.send().then(function (data) { 
                    console.log(data); 
                    appendElement(data, args.form); 
                    args.form.elements.namedItem('CustomerName').focus(); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }).catch(function (xhr) { 
                    console.log(xhr); 
                    ej.popups.hideSpinner(args.dialog.element); 
                }); 
            } 
 
            if (args.requestType === 'add') { 
                var ajax = new ej.base.Ajax({ 
                    type: "POST", 
                    url: "/Index?handler=AddPartial", 
                    beforeSend: function (xhr) { 
                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN", 
                            $('input:hidden[name="__RequestVerificationToken"]').val()); 
                    }, 
                    contentType: "application/json", 
                    dataType: 'json' 
                }); 
                ajax.send().then(function (data) { 
                    $("#dialogTemp").html(data); 
                    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> 
  
  
_EditPartial.cshtml  
  
@model grid_3._1.Pages.DialogTemplateModel 
 
 
@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" value=@Model.OrderID.ToString() disabled 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" value=@Model.CustomerID /> 
                <span class="e-float-line"></span> 
                <label asp-for="CustomerID" class="e-float-text e-label-top">CustomerID</label> 
            </div> 
        </div> 
        <div class="form-group col-md-6"> 
            <div class="e-float-input e-control-wrapper"> 
                <ejs-dropdownlist id="EmployeeID" value[email protected] dataSource="IndexModel.employee" placeholder="Employee Name" floatLabelType="Always" popupHeight="300px"> 
                    <e-dropdownlist-fields text="FirstName" value="EmployeeID"></e-dropdownlist-fields> 
                </ejs-dropdownlist> 
            </div> 
            </div> 
        </div> 
 
        <div class="form-row"> 
            <div class="form-group col-md-6"> 
                <ejs-datepicker id="OrderDate" width="150px" value=@Model.OrderDate placeholder="Order Date" floatLabelType="Always"></ejs-datepicker> 
            </div> 
            <div class="form-group col-md-6"> 
                <ejs-dropdownlist id="ShipCity" value="@Model.City" dataSource="@IndexModel.OrdersDetails.GetAllRecords().ToArray()" placeholder="City" floatLabelType="Always" popupHeight="300px"> 
                    <e-dropdownlist-fields text="City" value="City"></e-dropdownlist-fields> 
                </ejs-dropdownlist> 
            </div> 
            <div class="form-group col-md-6"> 
                <div class="e-float-input e-control-wrapper"> 
                    <input asp-for="CustomerName" value=@Model.CustomerName /> 
                    <span class="e-float-line"></span> 
                    <label asp-for="CustomerName" class="e-float-text e-label-top">Customer Name</label> 
                </div> 
            </div> 
        </div> 
    </div> 
 
 
<ejs-scripts></ejs-scripts> 
  
  
Please get back to us if you need further assistance.  
  
Regards,  
Praveenkumar G 


Marked as answer
Loader.
Up arrow icon