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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147864 Sep 25,2019 12:57 PM UTC Sep 30,2019 04:27 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Cristina Pelivan
Asked On September 25, 2019 12:57 PM UTC

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


Cristina Pelivan
Replied On 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, 

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


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon