Placing a combobox inside of a grid column

[George Taray]

Hi,

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.

Thanks

[Padmavathy Kamalanathan]

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

@(Html.EJ().Grid<object>("Grid")

            .Datasource((IEnumerable<object>)ViewBag.datasource)

            .AllowPaging()

            .ClientSideEvents(eve => { eve.TemplateRefresh("refresh"); })

            .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);

                 });

            })

                   .Columns(col =>

                    {

                     col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add(); 

                     col.HeaderText("Employee").Template("#columnTemplate").TextAlign(TextAlign.Center).Width(210).Add();

                     })

)

<script type="text/x-jsrender" id="columnTemplate">

    <input type="text" id="{{:OrderID}}" name="OrderID" value={{:EmployeeID}} />

</script>

    <script>

        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) {

            $(args.cell).find("input").ejDropDownList({

                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 })

                }

                });

        }

    </script>

Please check the below help documentations,

https://help.syncfusion.com/aspnetmvc/grid/columns#column-template

https://help.syncfusion.com/js/dropdownlist/functionalities#using-value-or-text

https://help.syncfusion.com/api/js/ejgrid#methods:updaterecord

https://help.syncfusion.com/api/js/ejgrid#events:templaterefresh

If you have further queries, please get back to us

Regards,

Padamavathy Kamalanathan