Questions about use of custom dialog templates

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>

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

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. 

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.  

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. 

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

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

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

Thanks

Hi,

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

1) ajax call

                    $.ajax({

       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

 

Hi Agostino, 

 

Thanks for your update. 

 

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

 

Regards, 

Thavasianand S.