Articles in this section
Category / Section

How to render Grid with editing in inline mode and add in dialog mode approach?

8 mins read

This knowledge base explains how to render Grid with record editing in inline approach and record add in dialog approach

Solution

Toolbar click actions can be intercepted using in toolbarClick event. By default grid will be rendered with editType as inline mode. When Add button is clicked, default action is prevented by defining the args.cancel as true and custom dialog is opened in toolbarClick event. When save button is clicked in the dialog then the record is saved using addRecord() method of ejGrid and when cancel button is clicked the dialog is closed.  

JS

  1. Render the Grid with inline editMode
<div id="Grid"></div>
    <script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                // the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                allowPaging: true,
                toolbarClick: "toolClick",
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
                columns: [
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },
                        { field: "CustomerID", headerText: 'Customer ID', width: 90 },
                        { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 80 },
                        { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, width: 80 }
                ]
            });
        });
    </script>

 

MVC

@(Html.EJ().Grid<OrdersView>("Grid")
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource)
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
        .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);
            });
        })
        .AllowPaging()        .
        .Columns(col =>
        {
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right). Width(80).Add();
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Add();
           })
         .ClientSideEvents(eve => { eve.ToolbarClick("toolClick"); })
)

 

public class GridController : Controller
    {       
        public ActionResult GridFeatures()
        {
            var DataSource = new NorthwindDataContext().OrdersViews.ToList();
            ViewBag.datasource = DataSource;
            return View();
        }
    }

 

ASP

<div>
    <ej:Grid ID="Grid" runat="server" AllowPaging="True">
        <ClientSideEvents ToolbarClick="toolClick" />
        <Columns>
            <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90">
            </ej:Column>
            <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">
            </ej:Column>
            <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Left" EditType="Dropdown" Width="80" />
            <ej:Column Field="Freight" HeaderText="Freight" Width="80">
            </ej:Column>
        </Columns>
        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
    </ej:Grid>
</div>
 

 

  public partial class GridFeatures : System.Web.UI.Page
    {
 
        List<Orders> order = new List<Orders>();
        protected void Page_Load(object sender, EventArgs e)
        {
            BindDataSource();
        }
        private void BindDataSource()
        {
            int orderId = 10643;
                int empId = 0;
                for (int i = 1; i < 9; i++)
                {
                    order.Add(new Orders(orderId + 1, "VINET", empId + 1, 32.38));
                    order.Add(new Orders(orderId + 2, "TOMSP", empId + 2, 11.61));
                    order.Add(new Orders(orderId + 3, "HANAR", empId + 3, 45.34));
                    order.Add(new Orders(orderId + 4, "VICTE", empId + 4, 37.28));
                    order.Add(new Orders(orderId + 5, "SUPRD", empId + 5, 67.00));                  
                    orderId += 6;
                    empId += 6;                
            }
           
            this.Grid.DataSource = order;
            this.Grid.DataBind();
        }
    [Serializable]
    public class Orders
    {
        public Orders()
        {
 
        }
        public Orders(int orderId, string customerId, int empId, double freight)
        {
            this.OrderID = orderId;
            this.CustomerID = customerId;
            this.EmployeeID = empId;
            this.Freight = freight;
            
        }
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public int EmployeeID { get; set; }
        public double Freight { get; set; }
      
    }
}

 

ASP CORE

<ej-grid id="Grid" allow-paging="true" allow-filtering="true" dataSource="ViewBag.datasource”  databound=" bound" toolbar-click="toolClick" enable-persistence="true">
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Normal)"></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings>
    <e-columns>
        <e-column field="OrderID" header-text="Order ID" is-primary-key="true" text-align="Right" width="90"></e-column>
        <e-column field="CustomerID" header-text="Customer ID" width="90"></e-column>
        <e-column field="EmployeeID" header-text="Employee ID" text-align="Left" width="80"></e-column>
        <e-column field="Freight" header-text="Freight" width="80"></e-column>
    </e-columns>
</ej-grid>

 

public class HomeController : Controller
    {
        private readonly NORTHWNDContext _context;
        public HomeController(NORTHWNDContext context)
        {
            _context = context;
        }
        public static List<OrderDetails> order = new List<OrderDetails>();
        public ActionResult Index()
        {
            ViewBag.datasource = _context.Orders.ToList();
            return View();
        }
    }

 

ANGULAR

<ej-grid id="Grid" [allowPaging]="true" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarItems" (toolbarClick)="onClick($event)">
    <e-columns>
        <e-column field="OrderID" headerText="OrderID" [isPrimaryKey]="true" textAlign="Right" width="90"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="90" textAlign="left"></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
        <e-column field="Freight" headerText="Freight" width="80"></e-column>
    </e-columns>
 
</ej-grid>
<ej-dialog id="basicDialog" [showOnInit]="false" title="Add New Record">
    <table>
        <tr>
            <td>
                OrderID
            </td>
            <td>
                <input id="OrderID">
            </td>
        </tr>
        <br>
        <tr>
            <td>
                EmployeeID
            </td>
            <td>
                <input id="EmployeeID">
            </td>
        </tr>
        <br>
        <tr>
            <td>
                CustomerID
            </td>
            <td>
                <input id="CustomerID">
            </td>
        </tr>
        <br>
        <tr>
            <td>
                Freight
            </td>
            <td>
                <input id="Freight">
            </td>
        </tr>
    </table>
    <br>
    <button onclick="save()">Save</button> <button onclick="cancel()">Cancel</button>
</ej-dialog>
 

 

TS

export class GridComponent {
    public gridData;
    public editSettings;
    public toolbarItems;
constructor(){ 
           this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode:"dialog" };
            this.toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };
                // the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'   
    this.gridData = (window as any).gridData;
 
} 
    onClick(e:any){
        if (e.itemName == "Add") {
            e.cancel = true;
            $("#basicDialog").ejDialog("open");
            $("#dialog").ejDialog("open");
            $("#OrderID").val("");
            $("#EmployeeID").ejDropDownList({
                dataSource: ej.dataUtil.distinct(this.gridData, "EmployeeID")
            });
            $("#CustomerID").val("");
            $("#Freight").ejNumericTextbox();
        }    
}
   save(e:any){
              var Obj = $("#Grid").ejGrid("instance");
              Obj.addRecord({"OrderID":$("#OrderID").val(),"EmployeeID":$("#EmployeeID").val(),"CustomerID": $("#CustomerID").val(),Freight:$("#Freight").val()})
              $("#basicDialog").ejDialog("close");
  }
   cancel(e:any){
              $("#basicDialog").ejDialog("close");
   }

 

JS

  1. Render a dialog with input elements along with save and cancel buttons.
<div id="dialog">
    <table>
        <tr>
            <td>
                OrderID
            </td>
            <td>
                <input id="OrderID">
            </td>
        </tr>
        <br>
        <tr>
            <td>
                EmployeeID
            </td>
            <td>
                <input id="EmployeeID">
            </td>
        </tr>
        <br>
        <tr>
            <td>
                CustomerID
            </td>
            <td>
                <input id="CustomerID">
            </td>
        </tr>
        <br>
        <tr>
            <td>
                Freight
            </td>
            <td>
                <input id="Freight">
            </td>
        </tr>
    </table>
 
    <br>
    <button onclick="save()">Save</button> <button onclick="cancel()">Cancel</button>
</div>

 

 

  1.  In the toolbarClick event when Add button in clicked open the ejDialog and disable default                              action by defining args.cancel as true.
<script type="text/javascript">
        $("#dialog").ejDialog({
            showOnInit: false
        });
          function toolClick(args){
              if(args.itemName == "Add"){
                      args.cancel = true;
                      $("#dialog").ejDialog("open");
                      $("#OrderID").val("");
                       $("#EmployeeID").ejDropDownList({
                              dataSource: ej.dataUtil.distinct(this.model.dataSource,"EmployeeID")
                      });
                       $("#CusotmerID").val("");
                       $("#Freight").ejNumericTextbox();
              }
}
</script>

 

  1. On clicking the Save button call addRecord() along with the values of input elements in dialog.
function save() {
        var Obj = $("#Grid").ejGrid("instance");
        Obj.addRecord({
            "OrderID": $("#OrderID").val(),
            "EmployeeID": $("#EmployeeID").val(),
            "CustomerID": $("#CustomerID").val(),
            "Freight": $("#Freight").val()
        })
        $("#dialog").ejDialog("close");
 }

 

  1. Similarly clicking the Cancel button will close the dialog.

 

  function cancel(){
              $("#dialog").ejDialog("close");
     }
              

 

Refer the below screenshot for output of the above example

 

         Figure 1:While editing the record

 

Figure 2: While click on the Add icon in toolbar

                                                                                                                                              

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied