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

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

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!

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team August 2, 2017 11:21 AM UTC

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. 


Refer the help documentation. 




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

Regards, 
Thavasianand S. 



SO Samuel Otero August 3, 2017 09:29 PM UTC

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.


TS Thavasianand Sankaranarayanan Syncfusion Team August 4, 2017 11:37 AM UTC

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. 


Refer the help documentation. 


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. 


Loader.
Up arrow icon