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

MVC Grid - Load different HTML in grid column based on dropdown selection of another column

Hello,

I have a grid with allow editing, adding, deleting and 3 columns: Name (text), DataTypeId (dropdown) and DefaultValue (custom html)
When changing dropdown value, I want to render some custom html in column DefaultValue. 
Let's say: If DataTypeId = 1, then in Default Value field i want to render a textfield. If DataTypeId = 2, then in DefaultValue field I want to render an email field .. and so on. 

Can you help me on this one? I didn't find a way to modify template column based on dropdown column. 

Here is the grid:
@(Html.EJ().Grid<ResourceTypeProperty>("ResourceTypePropertiesGrid")
                  .Datasource(Model.Properties)
                  .AllowSorting()
                  .AllowPaging()
                  .PageSettings(page => page.PageSize(20))
                  .AllowFiltering()
                  .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);
                      });
                  })
                  .IsResponsive()
                  .Columns(col =>
                  {
                      col.Field(p => p.Id).HeaderText("Id").IsPrimaryKey(true).Visible(false).Add();
                      col.Field(p => p.Name).HeaderText("Name").Add();
                      col.Field(p => p.DataTypeId).HeaderText("DataType").DataSource(ViewBag.DataTypes).EditType(EditingType.DropdownEdit).Add();
                     col.Field(p => p.DefaultValue).HeaderText("DefaultValue").Template("defaultValue").Add();
                  }))

<script type="text/x-jsrender" id="defaultValue">
    {{if DataTypeId == 1}}
       <input type="text" />
      {{/if}}

     {{if DataTypeId == 2}}
       <input type="enail" />
    {{else}}
      <input type="number" />
    {{/if}}
</script>


3 Replies

PK Padmavathy Kamalanathan Syncfusion Team September 26, 2019 03:03 PM UTC

Hi Cristina, 

Thanks for contacting Syncfusion Forums. 

QUERY: Load different HTML in grid column based on dropdown selection 
 
From your query we understand that you need to change the column template based on the dropdown value while editing. 

Please refer the below sample, 

Please let us know if we have mis interpreted your query. Also explain us whether you need to write on the column template(edit). 

Provide more clarity on your requirement.  

If you have further queries, please get back to us. 

Regards, 
Padmavathy Kamalanathan 



CP Cristina Pelivan September 27, 2019 07:21 AM UTC

Hello,

Thank you, this is indeed what I've tried. 
What I noticed though, is that the html inside of the template column does not change until I click on save row. 

Is there any way though which the template column will change in "real-time" based on dropdown selection? 


Thank you, 


PK Padmavathy Kamalanathan Syncfusion Team September 30, 2019 04:27 PM UTC

Hi Cristina, 
 
Thanks for your update. 
 
QUERY: Need to change the template when changing the dropdown, even before saving it. 
 
From your query, we understand that you need to change the template value, by changing dropdown value (even before saving the changes). This can be achieved by changing the input type and value in the dropdown change event inside actionComplete event. 
 
Please refer the below code snippet, 
 
 
@(Html.EJ().Grid<Object>("Grid") 
         ---- 
         .ClientSideEvents(eve => eve.ActionComplete("complete")); }) 
        .Columns(col => 
           { 
              col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(80).Add(); 
              col.Field("EmployeeID").HeaderText("Employee ID").EditType(EditingType.DropdownEdit).Width(90).Add(); 
               col.HeaderText("Template").Template("#columnTemplate").Width(100).Add(); 
           }) 
 
) 
 
<script> 
 
    function complete(args) { // actioncomplete event 
        if (args.requestType == "beginedit" || args.requestType == "add") { 
            $("#GridEmployeeID").ejDropDownList({  // dropdown  
                change: function (args) { // change event of dropdown 
                    var inst = $(".e-grid").data("ejGrid"); 
                    var index = inst.selectedRowsIndexes; 
                    if (args.value == 1) { 
                       // changing type and value of template 
                        $(".e-rowcell.e-templatecell").eq(0).find("input")[index[0]].type = "text";  
                        $(".e-rowcell.e-templatecell").eq(0).find("input")[index[0]].value = "jkj"; 
                    } 
                    if (args.value == 2) { 
 
                   ------- 
                    } 
                    if (args.value == 3) { 
                       ----- 
                      } 
                } 
            }) 
        } 
    } 
 
 
 
Thus you can achieve your requirement. 
 
Please refer the below help documentations, 
 
If you have further queries, please get back to us. 
 
Regards, 
Padmavathy Kamalanathan 
 


Loader.
Live Chat Icon For mobile
Up arrow icon