How to render ejComboBox control in ejGrid while editing

2 mins read

This knowledge base explains how to render ejComboBox control inside the Grid edit form while editing a record.

Solution

By default we have given support to render some common controls like dropdownlist, numerictextbox, datepicker, etc. Other editor controls can rendered into Grid edit form using editTemplate feature of ejGrid.

The following code example demonstrates how to render the ejComboBox in the Grid edit form.

1. Render the Grid

    <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,
                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', textAlign: ej.TextAlign.Right,editTemplate: { create: "create", read: "read", write: "write" }, width: 90
                        },
                        { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, width: 90 },
                        { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, width: 80, format: "{0:C0}" },
                        { field: "ShipName", headerText: 'Ship Name', editType: ej.Grid.EditingType.Dropdown, width: 90 },
                        { field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 90, }
                ]
            });
        });    </script>

MVC

@(Html.EJ().Grid<OrdersView>("Grid")
        .Datasource((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").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(90).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").Width(90).EditType(EditingType.DropdownEdit).Add();
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).EditType(EditingType.NumericEdit).Format("{0:C}").Add();
            col.Field("ShipName").HeaderText("ShipName").EditType(EditingType.DropdownEdit).Width(90).Add();
            col.Field("ShipCountry").HeaderText("ShipCountry").Width(90).EditType(EditingType.DropdownEdit).Add();
        })
)

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">
            <Columns>
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90" />
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">
                    <EditTemplate Create="create" Read="read" Write="write" />
                </ej:Column>
                <ej:Column Field="EmployeeID" HeaderText="Employee ID" EditType="DropdownEdit" TextAlign="Right" Width="90" />
                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="NumericEdit" />
                <ej:Column Field="ShipName" HeaderText="ShipName" EditType="DropdownEdit" Width="90" />
                <ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="90" EditType="DropdownEdit" />
            </Columns>
            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
        </ej:Grid></div>

CODE BEHIND

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, "ALFKI", empId + 1, 32.38, "Alfreds Futterkiste ",” true”));

order.Add(new Orders(orderId + 2, "ANATR", empId + 2, 11.61, "Ana Trujillo Emparedados y helados", “false”));

order.Add(new Orders(orderId + 3, "ANTON", empId + 3, 45.34, "Antonio Moreno Taquería", “true”));

order.Add(new Orders(orderId + 4, "AROUT", empId + 4, 37.28, "Around the Horn", “false”));

order.Add(new Orders(orderId + 5, "BERGS", empId + 5, 67.00, "Berglunds snabbköp", “false”));

order.Add(new Orders(orderId + 6, "BLONP", empId + 6, 23.32, "Blondel père et fils", “true”));

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, string shipName, string ShipCountry)

{

this.OrderID = orderId;

this.CustomerID = customerId;

this.EmployeeID = empId;

this.Freight = freight;

this.ShipName = shipName;

this.ShipCountry = ShipCountry;

}

public int OrderID { get; set; }

public string CustomerID { get; set; }

public int EmployeeID { get; set; }

public double Freight { get; set; }

public string ShipName { get; set; }

public bool ShipCountry { get; set; }

}

ASP CORE

<ej-grid id="Grid" allow-paging="true” dataSource="ViewBag.dataSource” action-complete="onComplete">
<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" text-align ="Right" width ="90" is-primary-key ="true"></e-columns>
<e-column field="CustomerID" header-text="Customer ID" text-align="Right" width="90" >
       <e-edit-template create="create" read="read" write="write">
            </e-edit-template>
         </e-column>
        <e-column field="EmployeeID" header-text="Employee ID" width="90" edit-type="DropdownEdit" ></e-column>
        <e-column field="Freight" header-text="Freight" edit-type="NumericEdit"  text-align="Right” format="{0:C}" width="80">       </e-column>
        <e-column field="ShipName" header-text="Ship Name" width="90" edit-type="DropdownEdit">          </e-column>
     </e-columns>
        <e-column field="ShipCountry" header-text="Ship Country" width="90" edit-type="DropdownEdit"> </e-column>
     </e-columns>
</ej-grid>

public partial class GridController : Controller

{

private NORTHWNDContext _context;

public GridController(NORTHWNDContext context)

{

_context = context;

}

// GET: /<controller>/

public ActionResult Exporting()

{

ViewBag.datasource = _context.Orders.Take(100).ToList();

return View();

}

ANGULAR

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" >
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true" headerText="OrderID" textAlign="right" width="90"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" textAlign="right" [editTemplate]="editTemp" width="90"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" editType="dropdownedit" width="90"></e-column>
                  <e-column field="Freight" headerText="Freight" textAlign="right" editType="numericedit" width="80"></e-column>
        <e-column field="ShipCity" headerText="ShipCity" editType="dropdownedit" width="90"></e-column>
        <e-column field="ShipPostalCode" headerText="ShipPostalCode" width="90"></e-column>
              </e-columns>
 </ej-grid>

In AngularTS, we can render the ejComboBox using the JavaScript code inside the write function of editTemplate method.

export class GridComponent {
    public gridData;   
    public cols;
    
    constructor()
    {        
       this.gridData = window.gridData;
       this.editTemp = {
              create : function () {
                       return "<input>";
              },
              read : function (args) {
                       return args.val();
              },
              write : function (args) {
                       var data = ej.DataManager(window.gridData).executeLocal(new ej.Query().select("CustomerID"));
                       args.element.ejComboBox({ width: "100%", dataSource: data, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" });
              }
        }     
       this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};
       this.toolbarItems={ showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]}; 
     }
}

In the editTemplate’s write function we have rendered the ejComboBox control and assigned the value to it based on the rowdata. While returning, value current element value is returned

<script type="text/javascript">
        function create(args) {
            return "<input>";
        }
        function read(args) {
            return args.val();
        }
        function write(args) {
            var obj = $('#Grid').ejGrid('instance');
            var data = ej.DataManager(obj.model.dataSource).executeLocal(new ej.Query().select("CustomerID"));
            args.element.ejComboBox({ width: "100%", dataSource: data, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" });
        }
    </script>

Figure: While editing, comboBox control in rendered in the CustomerID column.

Did you find this information helpful?

Yes

Comments (0)

How to render ejComboBox control in ejGrid while editing

Access denied