Questions about use of custom dialog templates

[Aguzz]

Hi,
I have a couple of questions about using the edit template.
I have seen that it is possible to use two types of edit templates: the first, directly in the page and the second, loading form, from a partial view with ajax call.
(Asp.net core datagrid with razor pages)

I have this datagrid
1° Question :  how can I insert the dropdown?
<ejs-grid id="Grid" allowPaging="true" allowFiltering="true" locale="it"
          allowSorting="true" load="onLoad" 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="/TestGrid/Index?handler=DataSource" insertUrl="/TestGrid/Index?handler=Insert" updateUrl="/TestGrid/Index?handler=Update" removeUrl="/TestGrid/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager>
    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings>
    <e-grid-filtersettings mode="OnEnter" type="Excel"></e-grid-filtersettings>
    <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="Text" foreignKeyField="CustomerID" foreignKeyValue="OptionText" dataSource="@Model.DropDatasource" width="150"></e-grid-column>
        <e-grid-column field="CustomerName" headerText="CustomerName" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" width="70" type="date" editType="datepickeredit" format="yMd"></e-grid-column>
        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>

    </e-grid-columns>
</ejs-grid>

<script id='dialogtemplate' type="text/x-template">

….

<div class="form-group col-md-12">
                <div class="e-float-input e-control-wrapper">
                    <input id="OrderID" name="OrderID" type="text" value="${if(isAdd)} '0' ${else} ${OrderID} ${/if}" disabled="${if(isAdd)} '' ${else} disabled ${/if}" />
                    <span class="e-float-line"></span>
                    <label class="e-float-text e-label-top" for="OrderID">ID</label>
                </div>
            </div>

     <div class="form-group col-md-12">
                <div class="e-float-input e-control-wrapper">
                    ….here i want place the dropdow
                    <span class="e-float-line"></span>
                    <label class="e-float-text e-label-top" for="CustomerID">Customer</label>
                </div>
            </div>

...etcc

</scrip>

2° Question : call partial view with Ajax call

What is the equivalent of this call using Razor pages
         ...
  if (args.requestType === 'beginEdit') {
                    var ajax = new ej.base.Ajax({
                        url: "@Url.Action("Editpartial", "Grid")", //render the partial view
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({ value: args.rowData })
                    });

     ...and this

     public IActionResult EditPartial([FromBody] CRUDModel<DialogTemplateModel> value)
        {
            var order = OrdersDetails.GetAllRecords();
            ViewBag.datasource = order;
            return PartialView("_DialogEditPartial", value.Value);
        }

Thank you so much
Regards

[Seeni Sakthi Kumar Seeni Raj]

Hi Aguzz, 

Greetings from the Syncfusion support, 

Query #1:  How can I insert dropdown on foreignkey column while enabled dialogtemplate? 

As per your query we have created a sample with dropdown editing binding on foreignKey column in the dialogTemplate. You can add/edit the foreignKey column using dialogtemplate in the EJ2 Grid. Please refer the below code example and sample for more information. 

[index.cshtml] 

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings> 

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required= true })" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Name" width="120" foreignKeyField="EmployeeID" foreignKeyValue="FirstName" dataSource="ViewBag.employee"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

[_DialogAddPartial.cshtml] 

 

<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"> 

                <ejs-dropdownlist id="EmployeeID"  dataSource="@ViewBag.employee" placeholder="Employee ID" floatLabelType="Always" popupHeight="300px"> 

                    <e-dropdownlist-fields text="FirstName" value="EmployeeID"></e-dropdownlist-fields> 

                </ejs-dropdownlist> 

            </div> 

        </div> 

.    .     .     .  

Query #2: How to call partialView with Ajax call? 

Based on your concern, we achieved the partialview calling by using Ajax while we do add/edit operations. Please refer the below code example for more information.  

[index.cshtml] 

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); 

 

             var urlPath = args.requestType == "beginEdit" ? "@Url.Action("Editpartial", "Home")" : "@Url.Action("Addpartial", "Home")"; 

             var stringifydata = args.requestType == "beginEdit" ? JSON.stringify({ value: args.rowData }) : ""; 

 

             var ajax = new ej.base.Ajax({ 

                        url: urlPath, //render the partial view 

                        type: "POST", 

                        contentType: "application/json", 

                        data: stringifydata 

                    }); 

             ajax.send().then(function (data) { 

                 appendElement(data, args.form); //Render the edit form with selected record 

                 if (args.requestType == "beginEdit") { 

                     args.form.elements.namedItem('CustomerID').focus(); 

                 } else if (args.requestType == "add") { 

                     args.form.elements.namedItem('OrderID').focus(); 

                 } 

                 ej.popups.hideSpinner(args.dialog.element); 

             }).catch(function (xhr) { 

                 console.log(xhr); 

                 ej.popups.hideSpinner(args.dialog.element); 

             }); 

        } 

    } 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid-16072019-304701953.zip 

Please get back to us, if you need further assistance. 

Regards, 

Seeni Sakthi Kumar S. 

[Aguzz]

Hi,
Thanks for the reply, but the example refers to a mvc project,
my problem (Query #2: How to call partialView with Ajax call?) is to call with ajax and partial view the add and edit pages with a "razor page" project

Regards

[Aguzz]

Hello,
I'm trying to solve this problem, but I have bad results,
I modified the ajax call but the server side function don't fire

example:
             ….

            var urlEdit = "/Index?handler=EditPartial";
            var urlAdd = "/Index?handler=AddPartial";

             var urlPath = args.requestType == "beginEdit" ? urlEdit : urlAdd;
             var stringifydata = args.requestType == "beginEdit" ? JSON.stringify({ value: args.rowData }) : "";

             var ajax = new ej.base.Ajax({
                        url: urlPath,
                        type: "POST",
                        contentType: "application/json",
                        data: stringifydata
                        //beforeSend: function (xhr) {xhr.setRequestHeader("XSRF-TOKEN",$('input:hidden[name="__RequestVerificationToken"]').val());}
             });
            ajax.send().then(function (data) {
    

Server Side, I tried:

 public PartialViewResult OnPostEditPartial([FromBody] CRUDModel<OrdersDetails> value)
        {
            return new PartialViewResult()
            {
                ViewName = "_EditPartial",
                ViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary())
                {
                    Model = value.value,
                }
            };
        }

or so...

public IActionResult OnPostEditPartial([FromBody] CRUDModel<OrdersDetails> value)
        {
            return new PartialViewResult()
            {
                ViewName = "_EditPartial",
                ViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary())
                {
                    Model = value.value,
                }
            };
        }

but nothing the ajax call does not call the server side function

Thanks

[Aguzz]

Hi,

After a few hours lost behind this problem, I found a solution and I hope it can help...

1) ajax call

                    $.ajax({

                type: "POST",
                    url: '/TestGrid/Index?handler=TestPartial',
                contentType: "application/json",
                data: stringifydata,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                    success: function (data) {
                         appendElement(data, args.form); //Render the edit form with selected record
                         ej.popups.hideSpinner(args.dialog.element);
                },
                    error: function (xhr) {
                        alert('error : ' + xhr.status + ' - ' + xhr.statusText + ' - ' + xhr.responseText);
                    console.log(xhr);
                   ej.popups.hideSpinner(args.dialog.element);
                    }

                })

2) Razor Pages "Page Model"

       public PartialViewResult OnPostTestPartial([FromBody] CRUDModel value)
        {
            return new PartialViewResult()
            {
                ViewName = "_EditPartialTest",  (partial in share folder)
                ViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary())
                {
                    Model = value.value,
                }
            };
        }

Regars

 

[Thavasianand Sankaranarayanan]

Hi Agostino, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.