We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Questions about use of custom dialog templates

Thread ID:

Created:

Updated:

Platform:

Replies:

145956 Jul 15,2019 10:25 PM UTC Jul 18,2019 01:05 PM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
Aguzz
Asked On July 15, 2019 10:25 PM UTC


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 [Syncfusion]
Replied On 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. 


Aguzz
Replied On 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

Aguzz
Replied On 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



Aguzz
Replied On 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



 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon