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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131894 Aug 2,2017 03:14 AM UTC Aug 4,2017 11:37 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Samuel Otero
Asked On August 2, 2017 03:14 AM UTC

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


Samuel Otero
Replied On 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.

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


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.

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

;