Redirection to Url upon 'Edit' Button click on the Grid Toolbar

[Santanu]

How can I redirect to another page by clicking on the 'Edit' Button on the EJ2 Grid Toolbar. I don't want to use the default inline or dialog option. Instead it will redirect to 'Edit.cshtml' page with the selected row id and there I can edit the data. And I believe it can be done with the script at the page bottom.

Get Controller is like below:

Post Controller is like below:

[Rajapandiyan Settu]

Hi Santanu, 

Thanks for contacting Syncfusion support.  

Query: How can I redirect to another page by clicking on the 'Edit' Button on the EJ2 Grid Toolbar. I don't want to use the default inline or dialog option. Instead it will redirect to 'Edit.cshtml' page with the selected row id and there I can edit the data 

We have validated your query at our end. you can achieve your requirement by using edit dialogTemplate feature of Grid. Refer to the below documentation for more information. 

dialogTemplate: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#dialoginline-template 

Demo: https://ej2.syncfusion.com/aspnetmvc/Grid/DialogTemplateEdit#/material 

The dialog template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, you can render your own editors by defining the Mode of EditSettings as Dialog/Inline and Template as SCRIPT element ID or HTML string which holds the template. 

In the below code example, demonstrate the usage of binding a partial view in the dialog template. In which, we having the edit templates(for add/edit) in partial views “addpartial”(when perform add) and “editpartial” (when perform edit). In the “actionComplete” event handler we will be calling these partial views using AJAX based on the requestType as “add” or “beginEdit”, and append the these templates to edit form. 

actionComplete: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actioncomplete 

[index.cshtml] 

@Html.EJS().Grid("ReportSubscriptions").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowTextWrap().AllowFiltering(true).Columns(col => 

{ 

    col.Field("OrderID").Width("120").IsPrimaryKey(true).Add(); 

    col.Field("CustomerID").HeaderText("CustomerID").Width("120").Add(); 

}).ActionBegin("ActionBegin").ActionComplete("ActionComplete").AllowPaging().EditSettings( 

                   edit => 

                   { 

                       edit.AllowAdding(true) 

                       .AllowEditing(true) 

                       .AllowDeleting(true) 

                       .Mode(Syncfusion.EJ2.Grids.EditMode.Dialog) 

                       .Template("#Grid_EditTemplate") 

                       .ShowDeleteConfirmDialog(true); 

                   }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).Toolbar(new List<string> 

    () { "Add", "Edit", "Update", "Delete", "Cancel" }).Render() 

 

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

        <div id="dialogTemp"> 

        </div> 

    </script> 

 

    <script> 

        function ActionComplete(args) { 

 

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

                var dialog = args.dialog; 

                dialog.width = 800; 

                dialog.header = "Report Subscription Details of " + args.rowData['ReportName']; 

// send the post to the controller to get the partial view 

                var ajax = new ej.base.Ajax({ 

                    url: "/Home/ReportSubscriptionsGrid_LoadEditTemplate", //render the partial view 

                    type: "POST", 

                    contentType: "application/json", 

                    data: JSON.stringify({ value: args.rowData }) 

                }); 

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

// load the partial view into the edit dialog 

                    $("#dialogTemp").html(data); //Render the edit form with selected record 

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

                }).catch(function (xhr) { 

                    console.log(xhr); 

                }); 

            } 

            if (args.requestType === 'add') { 

                var dialog = args.dialog; 

                dialog.width = 800; 

                dialog.header = "Add New Report Subscription"; 

// send the post to the controller to get the partial view 

                var ajax = new ej.base.Ajax({ 

                    url: "/Home/ReportSubscriptionsGrid_LoadAddTemplate", //render the partial view 

                    type: "POST", 

                    contentType: "application/json", 

                }); 

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

// load the partial view into the edit dialog 

                    $("#dialogTemp").html(data); //Render the edit form with selected record 

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

                }).catch(function (xhr) { 

                    console.log(xhr); 

                }); 

            } 

        } 

    </script> 

[HomeController.cs] 

        public ActionResult ReportSubscriptionsGrid_LoadEditTemplate([FromBody] BigData value) 

        { 

            var order = BigData.GetAllRecords(); 

            ViewBag.datasource = order; 

            ViewBag.Frequency = order; 

            return PartialView("_PartialPage1", value); 

        } 

 

        public ActionResult ReportSubscriptionsGrid_LoadAddTemplate() 

        { 

            var order = BigData.GetAllRecords(); 

            ViewBag.datasource = order; 

            ViewBag.Frequency = order; 

            return PartialView("_PartialPage2Add"); 

        } 

[EditPartial] 

@model dotnet_mvc_sample.Controllers.HomeController.BigData 

@*//define the model for store the model values*@ 

 

@using Syncfusion.EJ2 

 

<div> 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                @Html.TextBox("OrderID", Model.OrderID.ToString(), new { disabled = true }) 

                <span class="e-float-line"></span> 

                @Html.Label("OrderID", "Order ID", new { @class = "e-float-text e-label-top" }) 

            </div> 

        </div> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                @Html.EJS().TextBox("MailID1").Placeholder("MailID1").Value(Model.MailID1).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render() 

            </div> 

        </div> 

    </div> 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                @Html.EJS().TextBox("CustomerID").Placeholder("CustomerID").Value(Model.CustomerID).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render() 

            </div> 

        </div> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                @Html.EJS().TextBox("MailID2").Placeholder("MailID2").Value(Model.MailID2).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render() 

            </div> 

        </div> 

    </div> 

</div> 

 

 

@Html.EJS().ScriptManager() 

[ADD Partial] 

@model dotnet_mvc_sample.Controllers.HomeController.BigData 

@*//define the model for store the model values*@ 

 

@using Syncfusion.EJ2 

 

 

 

<div> 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                @Html.TextBox("OrderID") 

                <span class="e-float-line"></span> 

                @Html.Label("OrderID", "Order ID", new { @class = "e-float-text e-label-top" }) 

            </div> 

        </div> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                @Html.EJS().TextBox("MailID1").Placeholder("MailID1").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render() 

            </div> 

        </div> 

    </div> 

    <div class="form-row"> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                @Html.EJS().TextBox("CustomerID").Placeholder("CustomerID").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render() 

            </div> 

        </div> 

        <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                @Html.EJS().TextBox("MailID2").Placeholder("MailID2").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render() 

            </div> 

        </div> 

    </div> 

</div> 

 

 

@Html.EJS().ScriptManager() 

We have prepared a sample for your reference. you can get it from the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_grid_dialogTemplate1582728238.zip 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S