1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to set the cell edit type as ComboBox in a grid column

How to set the cell edit type as ComboBox in a grid column

Hi,
I want to setup one column's cell edit type as a combobox in the grid and also need to get it's selected value (not text) and set it to another cell in the same row. Please let me know how to do it in the grid.
Thank you.
Kalum

11 Replies
DR Dhivya Rajendran Syncfusion Team May 2, 2018 10:15 AM UTC

Hi Kalum, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement and created a sample for your reference. In the below sample we have created ComboBox for ShipCountry column using cell edit template feature and get the selected value from ShipCountry column and assign the same value to ShipName column of Grid. 

Kindly refer the below sample and code example for more information. 

   @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
  col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
 . . . . . 
  col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add(); 
  col.Field("ShipName").HeaderText("Custom Cell").Width("150").AllowEditing(false).Add(); 
}).AllowPaging().Load("load").PageSettings(page => page.PageSize(10)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
</div> 
 
<script> 
  function load() { 
    city = ["Denmark", "Brazil", "Germany"]  
    this.columns[4].edit = { 
      create: function () { 
        elem = document.createElement('input'); 
        return elem; 
      }, 
      read: function () { 
        cellValue = comboBoxObj.value; 
        return cellValue; 
      }, 
      destroy: function () { 
        comboBoxObj.destroy(); 
      }, 
      write: function (args) { 
          comboBoxObj = new ej.dropdowns.ComboBox({       // create comboBox  
          dataSource: city, 
        }); 
          comboBoxObj.appendTo(elem); 
      } 
    } 
    this.columns[5].edit = {     // assign ShipCountry value to ShipName field  
      read: function () { 
        return cellValue 
      } 
    } 
  } 
</script> 

 



Please get back to us if you need further assistance. 

Regards, 
R.Dhivya 


KA kalum May 3, 2018 05:54 AM UTC

Hi Dhivya,
Thank you very much for your kind help. Is it possible to to use the same code in general MVC Grid (Html.EJ().Grid). And i need to bind a ComboBox rather than dropdown into the ship country column due to its unique functionalities. Is that possible too?
Thank you
Kalum

MP Manivannan Padmanaban Syncfusion Team May 4, 2018 10:13 AM UTC

Hi Kalum, 

We have analyzed your query and we are able to understand that, you want to bind the combobox to the grid column. We have achieved your requirement by using the edit template property. please refer the below code example, 


@(Html.EJ().Grid<object>("FlatGrid") 
         
        .Columns(col => 
        { 
             
            col.Field("ShipCity").HeaderText("Ship City").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(110).Add(); 
            
        })) 
    
</div> 
<script> 
    function create() { 
        return "<input type='text'/>"; 
    } 
    function write(args) { 
        var obj = $('#FlatGrid').ejGrid('instance'); 
        var data = ej.DataManager(obj.model.dataSource).executeLocal(new ej.Query().select("ShipCity")) 
        args.element.ejComboBox({ 
            dataSource: data, 
            fields: { text: "ShipCity", value: "ShipCity" }, 
            value: args.rowdata["ShipCity"] 
        }); 
    } 
    function read(args) { 
        return args(".e-combobox").ejComboBox("model.value"); 
    } 
 
 
</script> 



For your convenience we have created the sample please refer the below link, 


Also refer the below help documentation link, 


Regards, 

Manivannan Padmanaban. 



KA kalum May 8, 2018 11:09 AM UTC

Hi,
Your answer helped me very much and thanks a lot.  Now i need to assign a datasource in viewbag to the combobox. I tired different ways. But no success. Please help.
View
@(Html.EJ().Grid<KalbizCat_OLE.Models.BUModel>("FlatGrid").Datasource((IEnumerable<object>)ViewBag.griddata)

        .AllowPaging()
        .PageSettings(Page => Page.PageSize(12))
        .AllowSorting()
        .AllowFiltering()
        .FilterSettings(d => d.FilterType(FilterType.FilterBar))
        .EditSettings(edit => edit.AllowEditing().AllowAdding().EditMode(EditMode.Batch))

        .Columns(col =>
        {
            col.Field(p => p.BUKey).IsIdentity(true).HeaderText("Key").Width(50).IsPrimaryKey(true).AllowEditing(false).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.BUAbbr).HeaderText("BU Abbr").Width(100).AllowEditing(false).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.BUName).HeaderText("BUName").Width(200).AllowEditing(false).TextAlign(TextAlign.Left).Add();

            col.Field(p => p.PrntBUKey).HeaderText("PrntBUKey").Width(50).Width(50).AllowEditing(true).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.PrntBUName).HeaderText("Prnt BU").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(110).Add();

            col.Field(p => p.TreeAddr).HeaderText("Tree Address").AllowEditing(false).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.IsAct).HeaderText("Is Active").Width(50).TextAlign(TextAlign.Center).EditType(EditingType.BooleanEdit).Add();


        }))



<script>

    function create() {
        return "<input type='text'/>";
    }
    function write(args) {
        var obj = $('#FlatGrid').ejGrid('instance');
        var data = ej.DataManager('@ViewBag.PrntBUDataSource').executeLocal(new ej.Query().select("BUKey", "BUAbbr"))
        args.element.ejComboBox({
            dataSource: data,
            fields: { text: "BUAbbr", value: "BUKey" },
            value: args.rowdata["BUKey"]
        });
    
    }

    function read(args) {

        endEdit(args.ejComboBox("model.value"));
        return args.ejComboBox("model.text");
 

    }


    function endEdit(bk) {

        var gridObj = $("#FlatGrid").data("ejGrid");

        var rowIndex = gridObj.selectedRowsIndexes;

        //var employeeID = args.data.EmployeeID;// getting the new value

        var cellIndex = 3; // Freight column's cellIndex

        gridObj.setCellText(rowIndex, cellIndex, bk);
    }

</script>

--------------------------------------------
Thank you
Kalum





MP Manivannan Padmanaban Syncfusion Team May 9, 2018 02:17 PM UTC

Hi Kalum, 

Thanks for the update. 

We have analyzed your query and we are able to understand that you need to bind the combobox dataSource value from viewbag. We have achieved your requirement please refer the below code example, 


@(Html.EJ().Grid<object>("FlatGrid") 
                .AllowPaging() 
                 .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); 
                        }); 
                   }) 
                .Columns(col => 
                { 
                     
                    col.Field("ShipCity").HeaderText("Ship City").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(110).Add(); 
 
                })) 
 
</div> 
<script> 
    function create() { 
        return "<input type='text'/>"; 
    } 
    function write(args) { 
     
        var datasource = @Html.Raw(Json.Encode(ViewBag.datasource)); 
     
        var data = ej.DataManager(datasource).executeLocal(new ej.Query().select("ShipCity")) 
         
        args.element.ejComboBox({ 
            dataSource: data, 
            fields: { text: "ShipCity", value: "ShipCity" }, 
            value: args.rowdata["ShipCity"] 
        }); 
    } 
    function read(args) { 
        return args.ejComboBox("model.value"); 
    } 
 
 
</script> 



Regards, 

Manivannan Padmanaban. 


KA kalum May 10, 2018 11:37 AM UTC

Hi,
Thank you very much for your quick response. Now i have another two problems.

1. "setCellValue" does not change the value in the cell but text. If i click in the cell it still displays the old value.
2. Combo box in the grid, looses the currently selected text and value every time I click on it.

Please be kind enough to help me to solve this.

View
  @(Html.EJ().Grid<KalbizCat_OLE.Models.BUModel>("FlatGrid").Datasource((IEnumerable<object>)ViewBag.griddata)

        .AllowPaging()
        .PageSettings(Page => Page.PageSize(12))
        .AllowSorting()
        .AllowFiltering()
        .FilterSettings(d => d.FilterType(FilterType.FilterBar))
        .EditSettings(edit => edit.AllowEditing().AllowAdding().EditMode(EditMode.Batch))
        .ClientSideEvents(eve => eve.EndEdit("endEdit"))

        .ToolbarSettings(toolbar =>
        {
            toolbar.ShowToolbar().ToolbarItems(items =>
            {
                items.AddTool(ToolBarItems.Add);

                items.AddTool(ToolBarItems.Cancel);
            });

        })

        .Columns(col =>
        {
            col.Field(p => p.BUKey).HeaderText("Key").Width(50).IsPrimaryKey(true).AllowEditing(false).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.BUAbbr).HeaderText("BU Abbr").Width(100).AllowEditing(true).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.BUName).HeaderText("BUName").Width(200).AllowEditing(true).TextAlign(TextAlign.Left).Add();

            col.Field(p => p.PrntBUKey).HeaderText("PrntBUKey").Width(50).Width(50).AllowEditing(true).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.PrntBUName).HeaderText("Prnt BU").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(110).Add();

            col.Field(p => p.TreeAddr).HeaderText("Tree Address").AllowEditing(false).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.IsAct).HeaderText("Is Active").Width(50).TextAlign(TextAlign.Center).EditType(EditingType.BooleanEdit).Add();

        }))



<script type="text/javascript">


    function create() {
       // alert('create');
        return "<input type='text'/>";
    }

    function write(args) {
       // alert('write');
        var datasource = @Html.Raw(Json.Encode(ViewBag.PrntBUDataSource));
    
        var data = ej.DataManager(datasource).executeLocal(new ej.Query().select("text", "value"))
        
        args.element.ejComboBox({
            dataSource: data,
            fields: { text: "text", value: "value" },
            value: args.rowdata["value"]
        });
    }
    function read(args) {
       // alert('read');
        setComboValue(args.ejComboBox("model.value"));
        return args.ejComboBox("model.text");
    }

</script>

<script type="text/javascript">

    function setComboValue(bk) {

        var gridObj = $("#FlatGrid").data("ejGrid");

        var rowIndex = gridObj.selectedRowsIndexes;

        var cellIndex = 3; // Freight column's cellIndex

        gridObj.setCellText(rowIndex, cellIndex, bk);
        gridObj.setCellValue(rowIndex, cellIndex, bk);
 
    }

</script>


-------------------------------------------------
Thank you
Kalum



MP Manivannan Padmanaban Syncfusion Team May 11, 2018 10:27 AM UTC

Hi Kalum, 

Query 1: "setCellValue" does not change the value in the cell but text. If i click in the cell it still displays the old value. 

From your code example, we could see that you have passed the cellindex value(  gridObj.setCellValue(rowIndex, cellIndex, bk);) instead of field due to this setcellvalue method is not working. Please refer the below code example, 


@(Html.EJ().Grid<object>("FlatGrid") 
 
        ………………… 
       .Columns(col => 
        { 
           col.Field("ShipCity").HeaderText("Ship City").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(110).Add(); 
 
        })) 
    
</div> 
<script> 
    function create() {  
         ……………………. 
    } 
    function write(args) { 
         ………………..        
    } 
    function read(args) { 
        setComboValue(args); 
        return args.ejComboBox("model.value"); 
    } 
 
 
</script> 
 
<script type="text/javascript"> 
 
    function setComboValue(args) { 
 
        var value = args.ejComboBox("model.value"); 
 
        var rowIndex = args.closest("tr").index();  
 
        var Field = "CustomerID"; //desire field name 
 
        gridObj.setCellValue(rowIndex, Field, value);  
 
    } 
 
</script> 
 



Refer the help documentation link here, 


Note : setCellValue method is applicable only in batch edit mode and setCellText method is not applicable in batch edit mode. 
 
Query 2: Combo box in the grid, loses the currently selected text and value every time I click on it. 
 
We are unable to reproduce the reported issue at our end. Please share the following details that help us to resolve issue as early as possible. 

  1. Share the issue replication procedure.
  2. Share video demonstration of the issue.
  3. Explain the exact scenario of the issue in detail.
  4. Share the essential studio version.

Regards, 

Manivannan Padmanaban. 



KA kalum May 14, 2018 02:51 AM UTC

Hi,
Thank you very much for your help. I could solve the first problem and it works fine now. But my second problem is still there. 
It is like this. If I focus/click on a cell of that combobox column while an item is already selected, that selected item become blank. I have attached a video demo with this and my coding has mentioned bellow. Please help me to solve this problem too.
And my Syncfusion Version is 16.1.0.24

https://youtu.be/t6n9YeEWYA4



View

@(Html.EJ().Grid("FlatGrid").Datasource((IEnumerable)ViewBag.griddata)

        .AllowPaging()
        .PageSettings(Page => Page.PageSize(12))
        .AllowSorting()
        .AllowFiltering()
        .FilterSettings(d => d.FilterType(FilterType.FilterBar))
        .EditSettings(edit => edit.AllowEditing().AllowAdding().EditMode(EditMode.Batch))
        .ClientSideEvents(eve => eve.EndEdit("endEdit"))

        .ToolbarSettings(toolbar =>
        {
            toolbar.ShowToolbar().ToolbarItems(items =>
            {
                items.AddTool(ToolBarItems.Add);

                items.AddTool(ToolBarItems.Cancel);
            });

        })

        .Columns(col =>
        {
            col.Field(p => p.BUKey).HeaderText("Key").Width(50).IsPrimaryKey(true).AllowEditing(false).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.BUAbbr).HeaderText("BU Abbr").Width(100).AllowEditing(true).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.BUName).HeaderText("BUName").Width(200).AllowEditing(true).TextAlign(TextAlign.Left).Add();

            col.Field(p => p.PrntBUKey).HeaderText("PrntBUKey").Width(100).AllowEditing(true).TextAlign(TextAlign.Left).Add();
            col.Field(p => p.PrntBUName).HeaderText("Prnt BU").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(110).Add();

            col.Field(p => p.TreeAddr).HeaderText("Tree Address").AllowEditing(false).TextAlign(TextAlign.Left).Visible(false).Add();
            col.Field(p => p.IsAct).HeaderText("Is Active").Width(50).TextAlign(TextAlign.Center).EditType(EditingType.BooleanEdit).Add();

        }))







----------------------------------------------------------------------

Thank You,
Kalum


MP Manivannan Padmanaban Syncfusion Team May 14, 2018 01:20 PM UTC

Hi Kalum, 

We are unable to reproduce the reported issue at our end. For your convenience we have created the sample and video demo please refer the below link, 


After referring the details still facing the issue, please get back to us with the following details, 

  1. Share the issue replication sample (or) reproduce the issue in the provided sample.
  2. Share the complete grid code example both view and controller page.

Regards, 

Manivannan Padmanaban. 


KA kalum May 16, 2018 05:42 AM UTC

Hi Manivannan,

Thank you very much for your big support. Ultimately I could solve the second problem too. That was due to a wrong name of datasource field. Now it works completely fine.

Thanks very much again.
Kalum


MP Manivannan Padmanaban Syncfusion Team May 17, 2018 05:18 AM UTC

Hi Kalum, 

We are happy to hear that your problem has been solved.  Please let us know if you need further assistance. 
 
Regards,  
 
Manivannan Padmanaban. 
 



Loader.
Up arrow icon