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>

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



5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 16, 2019 11:12 AM UTC

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


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

Regards, 
Seeni Sakthi Kumar S. 



AG Aguzz July 16, 2019 12:37 PM UTC

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


AG Aguzz July 17, 2019 02:27 PM UTC


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




AG Aguzz July 17, 2019 10:31 PM UTC


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



 


TS Thavasianand Sankaranarayanan Syncfusion Team July 18, 2019 01:05 PM UTC

Hi Agostino, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Up arrow icon