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

[Cristina Pelivan]

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>

[Padmavathy Kamalanathan]

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, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCSample1555407128.zip 

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 

[Cristina Pelivan]

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, 

[Padmavathy Kamalanathan]

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, 

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

https://help.syncfusion.com/api/js/ejdropdownlist#events:change 

 

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

 

Regards, 

Padmavathy Kamalanathan