How to add a dropdown in a specific cell with hardcoded values when adding a row to the grid

[Samuel Otero]

Hi 

My grid has the feature of adding rows. I did it following your example. 

How do I make that in a specific cell, it renders a dropdown with hardcoded values??

Thank you!

[Thavasianand Sankaranarayanan]

Hi Samuel, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to bind a ejDropDownList in a specific cell while adding a record in Grid. We can achieve your requirement using the actionCompelete event of ejGrid control and we have bound hardcoded values to that dropdown list. 

For an example, we have render a ejDropDownList for ShipCountry column in Grid. 

Refer the below code example. 

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

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

         

        --------- 

 

       .ClientSideEvents(clienevent => clienevent.ActionComplete("complete"))       

        .Columns(col => 

        { 

 

           ----- 

 

            col.Field("ShipCountry").HeaderText("Ship Country").TextAlign(TextAlign.Right).Width(75).Add(); 

             

 

        })) 

 

 

<script type="text/javascript"> 

 

    var data = [ 

        { id: "1", text: "FRANCE" },  

        { id: "2", text: "GERMANY" },  

        { id: "3", text: "BRAZIL" }, 

        { id: "4", text: "BELGIUM" },  

        { id: "5", text: "MEXICO" } 

         

    ]; 

 

    function complete(args) { 

 

        if (args.requestType == "add") { 

 

            $("#" + this._id + "ShipCountry").ejDropDownList( {  

 

               dataSource: data,  

 

                field: { text: "text", value: "text" },  

                width: "100%"  

            }); 

        } 

    } 

     

</script> 

Note: To bind the dataSource in ejDropDownList we need to pass  as the text and value pair. 

 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/131894/ze/SyncfusionMvcApplication14-2117895693.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/js/dropdownlist/getting-started#populating-data 

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

If we misunderstood your query then please get back to us. 

Regards, 

Thavasianand S. 

[Samuel Otero]

Thanks. This does half of the work. The problem is that if I press the edit button in the toolbar, the dropdown doesn't appear again in the cell and it must. Before you tell me how to achieve this, please notice that in this thread I reported what seems to be an ugly bug that doesn't let me to save properly using the actions of the toolbar and therefore, your answer to this message should take into consideration the thread that I mention because whatever you do, it wont work. Again, please, see this thread.

[Thavasianand Sankaranarayanan]

Hi Samuel, 

Query 1: While editing also we need a dropdown list. 

We can achieve your requirement using the actionComplete event of ejGrid control.  

Refer the below code example. 

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

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

        .EditSettings(edit => edit.AllowAdding().AllowDeleting().AllowEditing()) 

         

        ---- 

 

       .ClientSideEvents(clienevent => clienevent.ActionComplete("complete"))       

        .Columns(col => 

        { 

             

            ----- 

 

           col.Field("ShipCountry").HeaderText("Ship Country").TextAlign(TextAlign.Right).Width(75).Add(); 

             

            

        })) 

</div> 

<script type="text/javascript"> 

    var data = [ 

        { id: "1", text: "FRANCE" },  

        { id: "2", text: "GERMANY" },  

        { id: "3", text: "BRAZIL" }, 

        { id: "4", text: "BELGIUM" },  

        { id: "5", text: "MEXICO" } 

         

    ]; 

    function complete(args) { 

 

        if (args.requestType == "add" || args.requestType == "beginedit") { // set dropdown list for the requestType beginedit also 

 

            $("#" + this._id + "ShipCountry").ejDropDownList({ dataSource: data, field: { id: "id", text: "text", value: "text" }, width: "100%" }) 

 

        } 

    } 

     

</script> 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/131894/ze/SyncfusionMvcApplication14850046949.zip 

Refer the help documentation. 

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

Query 2: While saving the added record, it is not get saved.  

We have analyzed your query and we unable to reproduce the reported issue “While saving the added record through save toolbar icon” from our end. 

Please provide the following details for better assistance. 

1. Share screen shot or video demonstration of the issue.
2. Share the Grid code example.
3. If possible share the sample or reproduce the issue in the attached sample.
4. Essential Studio version.

Regards, 

Thavasianand S.