How to render the dropdown with datasource fetched by remote service while editing

1 min read

Solution:

You can use “EditTemplate” property of Grid Column to render Dropdown control with datasource fetched from remote service during editing. The following code example shows how to render Dropdown control with datasource fetched from remote service on editing.

Render the Grid control.

<div id="Grid"></div>
<script type="text/javascript">
    $(function () {// Document is ready.        
        $("#Grid").ejGrid({
            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", headerText: "OrderID", isPrimaryKey: true, width: 100, isIdentity:  true },
                     { field: "EmployeeID", headerText: "EmployeeID", width: 100},
                     { field: "CustomerID", headerText: "CustomerID", 
                     editTemplate: {
                            create: "create", read:"read", write:"write"                      
                      } ,width: 100
                  },
                 { field: "ShipCity", headerText: "ShipCity", width: 100 }                      
            ]
        });
    });
</script>

MVC

[In View]
@(Html.EJ().Grid<object>("Grid")            
            .Datasource((IEnumerable<object>)ViewBag.data))
            .AllowPaging()            
            .EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting().)
            .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);
                });
            })
            .Columns(col =>
            {           col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).IsIdentity(true).Width(100).Add();
               col.Field("EmployeeID").HeaderText("EmployeeID"). .EditType(EditingType.Dropdown).Width(100).Add();
               col.Field("CustomerID").HeaderText("CustomerID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(100).Add();  
               col.Field("ShipCity").HeaderText("ShipCity").Width(100).Add();                
       })
)

ASP.NET

[aspx]
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >  
                        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" ></EditSettings>
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>           
            <Columns>
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" IsIdentity="True"   Width="100"/> 
                 <ej:Column Field="EmployeeID" HeaderText="EmployeeID" EditType=" Dropdown" Width="100"/>
                 <ej:Column Field="CustomerID" HeaderText="CustomerID"  Width="100">
                 <EditTemplate Create="create" Read="read" Write="write"/></ej:Column>
                <ej:Column Field="ShipCity" HeaderText="ShipCity"  Width="100"/>                
            </Columns>
</ej:Grid>

2. You can define the Event Handlers for the create, read, write properties of Grid Column “EditTemplate” property.

function create() {
            return $("<input>");
        }
function read(args) {
            return args.ejDropDownList("getValue");
       }
function write(args) {
            var proxy = args;
            var record = args.data;
            if (!args.element.closest("#gridEditForm").hasClass("e-waitingpopup"))
               args.element.closest("#gridEditForm").ejWaitingPopup();
               args.element.closest("#gridEditForm").ejWaitingPopup("show")
            $.ajax({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders?$select=CustomerID",
                dataType: "json",
                type: "GET",
                success: function (data) {
                    var result = data.d.map(function (index) {
                        if (!ej.isNullOrUndefined(index["CustomerID"]))
                            return index["CustomerID"];
                    }
                   );
               var dropData = $.unique(result);
               args.element.ejDropDownList({ dataSource: dropData, value: proxy.rowdata.CustomerID });
               args.element.closest("#gridEditForm").ejWaitingPopup("hide")
                }
 
            });
 
        }

As In the above code you can fetch the dataSource for dropDown from the remote service by using “write” event of “EditTemplate” feature.

The following output is displayed as a result of the above code example.

Figure: Render the dropdown control with dataSource

Did you find this information helpful?

Yes

How to render the dropdown with datasource fetched by remote service while editing

Access denied