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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Placing a combobox inside of a grid column

Thread ID:

Created:

Updated:

Platform:

Replies:

148957 Nov 8,2019 07:50 PM UTC Nov 12,2019 02:39 AM UTC ASP.NET Core 1
loading
Tags: Grid
George Taray
Asked On November 8, 2019 07:50 PM UTC

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 [Syncfusion]
Replied On 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




@(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,


If you have further queries, please get back to us

Regards,
Padamavathy Kamalanathan

  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon