We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Placing a combobox inside of a grid column


I'm trying to build a grid that has a combobox as the content of two of the columns. None of the examples, documentation, for forums posts seems to be able to point me in the direction. It seems fairly straightforward, all I want to do is take what I would have gotten with something like this:

@Html.DropDownListFor(modelItem => item.AssignedTo, Model.AssignmentList, new { onchange = @"UpdateThisItem(this);", @class = "form-control" })
and turn it into the template for a column. I don't want to use the dropdownedit type for the e-grid-column since that requires double-clicking on a row to enter edit mode. I just want a simple drop down with my own css style that I can bind to the row of the table.


1 Reply

PK Padmavathy Kamalanathan Syncfusion Team November 12, 2019 02:39 AM UTC

Hi George,

Thanks for contacting Syncfusion Forums.

QUERY: Need to edit the dropdown list in grid column by single click

From your query, we can understand that you need to edit the dropdown list in grid colum by single click. We usually render template in client end using js-render. We suggest you to follow the same. 

1) Render the dropdown list in the grid's column template's TemplateRefresh event.
2) Thus you can edit it in single click
3) To update the edited values to datasource of grid, you can use "updateRecord" method of grid

            .ClientSideEvents(eve => { eve.TemplateRefresh("refresh"); })
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
            .ToolbarSettings(toolbar =>
                 toolbar.ShowToolbar().ToolbarItems(items =>
                   .Columns(col =>
                     col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add(); 
<script type="text/x-jsrender" id="columnTemplate">
    <input type="text" id="{{:OrderID}}" name="OrderID" value={{:EmployeeID}} />

        var dropdata = [
        { text: 1,  value: 1 },

        { text: 2, value: 2 },

        { text: 3, value: 3 },

        { text: 4, value: 4 },

        { text: 5, value: 5 }];

        function refresh(args) {
                dataSource: dropdata,
                fields: { text: "text", value: "value" },   
                value: args.rowData.EmployeeID,
                change: function (args) {
                    var obj = $('.e-grid').data("ejGrid")
                   obj.updateRecord("OrderID", { OrderID: obj.model.selectedRecords[0].OrderID , EmployeeID: args.selectedValue })


Please check the below help documentations,

If you have further queries, please get back to us

Padamavathy Kamalanathan


Live Chat Icon For mobile
Up arrow icon