How to navigate to another page form for Grid CRUD?

1 min read

This Knowledge base explains how to navigate to another page form for performing grid CRUD operations.

Solution:

By default, the Grid has in-built support for performing editing operations in external form and dialog. But in some cases, if you want to perform editing operations in a separate form on another page then this behavior can be achieved by preventing the default behavior of editing operations of Grid in the actionBegin event.

The following code example demonstrates how to navigate to another page form for performing grid editing operations.

1.Render the Grid control.

HTML

<div id="Grid"></div>

JavaScript

<script type="text/javascript">
          $(function () {
            $("#Grid").ejGrid({
                // the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
                dataSource: window.gridData,
                editSettings: { allowEditing: true,allowAdding: true,allowDeleting: true, showDeleteConfirmDialog: true },
                toolbarSettings : { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"] },
                actionBegin:"actionBegin", 
                columns: [
                         { field: "OrderID", headerText: 'Order ID', isPrimaryKey:true, width: 75},
                         { field: "EmployeeID", headerText: 'Employee ID',  width: 75 },
                         { field: "CustomerID", headerText: 'Customer ID',  width: 75},
                         { field: "ShipCountry", headerText: 'ShipCountry', width: 75}
                ]
            });  
        });
</script>

MVC

@(Html.EJ().Grid<object>("FlatGrid")
                .Datasource((IEnumerable<object>)ViewBag.datasource)
                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().ShowDeleteConfirmDialog(true); })
                .ToolbarSettings(toolbar =>
                   {
                       toolbar.ShowToolbar().ToolbarItems(items =>
                       {
                           items.AddTool(ToolBarItems.Add);
                           items.AddTool(ToolBarItems.Edit);
                           items.AddTool(ToolBarItems.Delete);
                           items.AddTool(ToolBarItems.Update);
                           items.AddTool(ToolBarItems.Cancel);
                       });
                   })
                .ClientSideEvents(eve => { eve.ActionBegin("actionBegin"); })
                .Columns(col =>
                   {
                       col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(75).Add();
                       col.Field("EmployeeID").HeaderText("Employee ID").Width(75).Add();
                       col.Field("CustomerID").HeaderText("Customer ID").Width(75).Add();
                       col.Field("ShipCountry").HeaderText("ShipCountry").Width(75).Add();
                   }))

[Controller]
namespace remotesaveadaptor.Controllers
{
    public class GridController : Controller
    {
        readonly List<string> _list = new List<string>();
        public ActionResult GridFeatures()
        {
            var data = OrderRepository.GetAllRecords();
            ViewBag.dataSource = data;
            return View();
        }
 
        public ActionResult Save()
        {
            return this.RedirectToAction("GridFeatures", "Grid");
        }
        [HttpGet]
        public ActionResult EditPage()
        {
            var dataSource = OrderRepository.GetAllRecords();
            var id = 0;
            if (Request.QueryString["OrderID"] != null)
                id = int.Parse(Request.QueryString["OrderID"]);
 
            var data = dataSource.Where(order => order.OrderID == id).SingleOrDefault();
            var ddl = new DropDownListProperties();
            var fields = new DropDownListFields();
 
            _list.Add("France");
            _list.Add("Germany");
            _list.Add("Beligum");
            _list.Add("Brazil");
            _list.Add("Greece");
            _list.Add("Austria");
 
            var drop = _list.ToList();
 
            var dropData = new List<object>();
 
            foreach (var li in drop)
            {
                dropData.Add(new { value = li, text = li });
            }
            ddl.DataSource = dropData;
            fields.Text = "text";
            fields.Value = "value";
            ddl.DropDownListFields = fields;
            ViewData["properties"] = ddl;            
            return View("EditPage", data);
        }
    }
}

ASP.NET CORE

 
<ej-grid id="FlatGrid" datasource="ViewBag.datasource" allow-paging="true" action-begin="actionBegin">
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" "></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","delete","update","cancel"}' />
    <e-columns>
        <e-column field="OrderID" header-text="Order ID" width="75" is-primary-key="true"></e-column>
        <e-column field="EmployeeID" header-text="Employee ID" width="75"></e-column>
        <e-column field="CustomerID" header-text="Customer ID" width="75"></e-column>
        <e-column field="ShipCountry" header-text="ShipCountry" width="75"></e-column>
    </e-columns>
</ej-grid>

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            BindDataSource();
            ViewBag.datasource = order;
            ViewBag.designation = customer;
            ViewBag.country = city;
            return View();
        }
        public IActionResult Save()
        {
            return this.RedirectToAction("Index", "Home");
        }
        public IActionResult EditPage()
        {
                   var dataSource = order;
            var id = 0;
           
 
            var data = dataSource.Where(order => order.OrderID == id).SingleOrDefault();
            var ddl = new DropDownListProperties();
            var fields = new DropDownListFields();
 
            _list.Add("France");
            _list.Add("Germany");
            _list.Add("Beligum");
            _list.Add("Brazil");
            _list.Add("Greece");
            _list.Add("Austria");
 
            var drop = _list.ToList();
 
            var dropData = new List<object>();
 
            foreach (var li in drop)
            {
                dropData.Add(new { value = li, text = li });
            }
            ddl.DataSource = dropData;
            fields.Text = "text";
            fields.Value = "value";
            ddl.DropDownListFields = fields;
            ViewData["properties"] = ddl;
            return View("EditPage",data);
        }
    }
}

EditForm

@model MVCSampleBrowser.Models.EditableOrder
 
@using (Html.BeginForm()) {
    <div style="position:center;margin-left:450px">
        <b>Order Details</b>
        <table cellspacing="10">
            <tr>
                <td style="text-align: right;">
                Order ID
                <td style="text-align: left">
                    @Html.EJ().AutocompleteFor(o => o.OrderID).CssClass("e-field valid")
                </td>
                <td style="text-align: right;">
                    Customer ID
                </td>
                <td style="text-align: left">
                    @Html.EJ().DropDownListFor(o => o.CustomerID, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["properties"])
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    EmployeeID
                </td>
                <td style="text-align: left">
                    @Html.EditorFor(o => o.EmployeeID, new { htmlAttributes = new { @class = "form-control" } })
                </td>
                <td style="text-align: right;">
                    Ship Country
                </td>
                <td style="text-align: left">
                    @Html.EJ().DropDownListFor(o => o.ShipCountry, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["properties"])
                </td>
            </tr>
        </table>
    </div>
<div class="form-group">
        <div class="col-md-offset-8 col-md-4">
            <input type="button" id="btnSave" name="action" value="Save" onclick="location.href='@Url.Action("Save","Home")';" class="btn btn-default" />
 
            <input type="button" id="btnCancel" name="action" value="Cancel" onclick="location.href='@Url.Action("Index","Home")';" class="btn btn-default" />
        </div>
    </div>
}

2. In the actionBegin event of Grid we have prevented the default action by setting args.cancel as true and redirected to the required Edit form by using the window.location.

<script>
    function actionBegin(args) {
        var type = args.requestType;
        if (type == "beginedit" || type == "add") {
            args.cancel = true;
             var url = '@(Url.Action("EditPage", "Grid"))' +
             (type === "add" ? "" : "/" + args.rowData["OrderID"]);
             window.location = url;
        }
    }
</script>

ASPX

<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True">
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
        <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" />
        <ClientSideEvents ActionBegin="actionBegin" />
        <Columns>
            <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="75" />
            <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="75" />
            <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="75" />
            <ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="75" />
        </Columns>
    </ej:Grid>

<script type="text/javascript">
        function actionBegin(args) {
            if (args.requestType == "beginedit" || args.requestType == "add") {
                //To prevent default action of the Grid Edit/Add
                args.cancel = true;
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/Edit",
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {  
                        window.location = result.d;
                    }
                });
            }
        } 
    </script>

namespace WebApplication21
{
    public partial class _Default : Page
    {
        public static List<Orders> order = new List<Orders>();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (order.Count() == 0)
                BindDataSource();
            this.FlatGrid.DataSource = order;
            this.FlatGrid.DataBind();
        }
        private void BindDataSource()
        {
            int code = 10000;
            for (int i = 1; i < 10; i++)
            {
                order.Add(new Orders(code + 1, "ALFKI", i + 0, 2.3 * i, new DateTime(1991, 05, 15), "Berlin"));
                order.Add(new Orders(code + 2, "ANATR", i + 2, 3.3 * i, new DateTime(1990, 04, 04), "Madrid"));
                order.Add(new Orders(code + 3, "ANTON", i + 1, 4.3 * i, new DateTime(1957, 11, 30), "Cholchester"));
                order.Add(new Orders(code + 4, "BLONP", i + 3, 5.3 * i, new DateTime(1930, 10, 22), "Marseille"));
                order.Add(new Orders(code + 5, "BOLID", i + 4, 6.3 * i, new DateTime(1953, 02, 18), "Tsawassen"));
                code += 5;
            }
        }
        [WebMethod]
        public static object Edit()
        {
            return "EditForm.aspx";
        }
    }
}

Angular

HTML

<ej-grid id="Grid" #grid [dataSource]="gridData" [allowPaging]="true"  [toolbarSettings]="toolbarItems" [editSettings]="editSettings" (actionBegin)="actionBegin($event)" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID" isPrimaryKey="true" width="75" ></e-column>
     <e-column field="EmployeeID" headerText="Employee ID" width="75" ></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="75"></e-column>              
        <e-column field="ShipCountry" headerText="ShipCountry" width="75"></e-column>             
    </e-columns>
</ej-grid>

 
import {Component, ViewEncapsulation,ViewChild} from '@angular/core';
 
import {CommonModule} from "@angular/common";
 
import { EJComponents } from "ej-angular2/src/ej/core";
 
@Component({
    selector: 'ej-app',
    templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
  public gridData;
  public editSettings;
  public toolbarItems;
 
  @ViewChild('grid') grid: EJComponents<any, any>;
  constructor() {
    //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
          this.gridData = window.gridData;
          this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};
          this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]};
  }
 
    actionBegin(args : any) {
        var type = args.requestType;
        if (type == "beginedit" || type == "add") {
            args.cancel = true;
             var url = "/Grid/EditPage" +
             (type === "add" ? "" : "/" + args.rowData["OrderID"]);
             window.location.assign(url);
        }
    } 
}

[Controller]
namespace remotesaveadaptor.Controllers
{
    public class GridController : Controller
    {
        readonly List<string> _list = new List<string>();
        public ActionResult GridFeatures()
        {
            var data = OrderRepository.GetAllRecords();
            ViewBag.dataSource = data;
            return View();
        }
 
        public ActionResult Save()
        {
            return this.RedirectToAction("GridFeatures", "Grid");
        }
        [HttpGet]
        public ActionResult EditPage()
        {
var dataSource = OrderRepository.GetAllRecords();
            var id = 0;
            if (Request.QueryString["OrderID"] != null)
                id = int.Parse(Request.QueryString["OrderID"]);
 
            var data = dataSource.Where(order => order.OrderID == id).SingleOrDefault();
            var ddl = new DropDownListProperties();
            var fields = new DropDownListFields();
 
            _list.Add("France");
            _list.Add("Germany");
            _list.Add("Beligum");
            _list.Add("Brazil");
            _list.Add("Greece");
            _list.Add("Austria");
 
            var drop = _list.ToList();
 
            var dropData = new List<object>();
 
            foreach (var li in drop)
            {
                dropData.Add(new { value = li, text = li });
            }
            ddl.DataSource = dropData;
            fields.Text = "text";
            fields.Value = "value";
            ddl.DropDownListFields = fields;
            ViewData["properties"] = ddl;
            return View("EditPage", data);
        }
    }
}

Result:

Figure 1:Initial rendering of grid

Figure 2Edit form on another page

Did you find this information helpful?

Yes

Comments

How to navigate to another page form for Grid CRUD?

Access denied