Questions about use of custom dialog templates

5 Replies
3 Participants

Created by
AG Aguzz

Platform
ASP.NET Core - EJ 2

Platform
ASP.NET Core - EJ 2

Control
DataGrid

Created On
Jul 15, 2019 10:25 PM UTC

Last Activity On
Jul 18, 2019 01:05 PM UTC

Want to subscribe?
SIGN IN

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>

….

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

<input asp-for="OrderID" type='text' />

<label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label>

</div>

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

. . . .

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.

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.

Need More Help?

Get personalized assistance from our support team.

Contact Support

5 Replies
3 Participants
Want to subscribe?
SIGN IN
Created by
AG Aguzz
Platform
ASP.NET Core - EJ 2
Control
DataGrid
Created On
Jul 15, 2019 10:25 PM UTC
Last Activity On
Jul 18, 2019 01:05 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support