[Solved] Dependent Drop Down in Grid

[Shrinath]

Hi,

Is there anyway to change the values in one dropdown list based on the value selected in another within the grid? I was hoping to bind to the dropdown change event and to just use jquery but I don't know if that is possible. I'm using a MVC Grid with a popup edit.

Thanks!

[Petur Subev]

Hi Shrinath,

If I understand you correctly you have a Grid in popup editing mode. In the popup edit modal dialog you have two DropDownLists and you want to change the selected value of the second DropDownList depending on the chosen value of the first one.
If this is the case, you can hook a JavaScript function to the OnChange event of the first and use the value method to set the selected value of the second. Also if you want to completely repopulate the collection used as dataSource you can use the dataBind method.
If this is not your scenario, please provide a sample project that shows your exact setup and current logic, so we can check it.

Regards,
Petur Subev
the Telerik team

[Shrinath]

Thank you for the reply. The scenario is that I want to change all of the values in the second drop down based on the first drop down on a popup edit using ajax editing. How would I add the hook within the grid? Here is my current code setup:

Here is the grid I am using on the view:

@(Html.Telerik().Grid(Model)
        .Name("User")
        .DataKeys(keys => keys.Add(c => c.Login))
        .DataBinding(dataBinding => {
            dataBinding.Ajax()
            .Select("SelectAjaxEditing", "User")
            .Update("SaveAjaxEditing", "User");
        }
        )
        .Columns(columns => {
            columns.Bound(p => p.Login).Width(210).ReadOnly();
            columns.Bound(p => p.Role).Width(200);
            columns.Bound(p => p.Manager).Visible(false); //How do I add hook here?
            columns.Command(commands => {
                commands.Edit().ButtonType(type);
            }).Width(150).Title("Actions");
        })
        .Editable(editing => editing.Mode(mode))
        .ClientEvents(events => {
                events.OnEdit("Grid_onEdit");
            })
    )

Here is the datamodel:

public class UserEditViewModel {
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Login { get; set; }

    [UIHint("UserRoleDropDown"), Required]
    public string Role { get; set; }

    [UIHint("UserManagerDropDown"), Required]
    public string Manager { get; set; }
}

UserRoleDropDown.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%= Html.Telerik().DropDownList()
        .Name("Role")
        .BindTo((SelectList)ViewData["roles"])
%>

UserManagerDropDown.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%= Html.Telerik().DropDownList()
        .Name("Manager")
        .BindTo((SelectList)ViewData["managers"])
%>

Thanks so much for your time

[Petur Subev]

Hello Shrinath,

Generally speaking first you need to add an event handler to the OnLoad and OnChange event of the first DropDownList.
e.g.

@( Html.Telerik().DropDownList()
        .Name("Manager")
        .BindTo(new SelectList((System.Collections.IEnumerable)ViewData["managers"]))
        .ClientEvents(events=> events
                    .OnChange("onChange")
                    .OnLoad("onLoad"))
)

The handler itself will requests the database passing along the selected value.

e.g.

function onLoad() {
        var manager = $("#Manager").data("tDropDownList").value();
        $.getJSON("Home/GetRoles?manager=" + manager, function (data) {
            $("#Role").data("tDropDownList").dataBind(data);
        });
 }

The Action method will return a JsonResult accordingly to the passed parameter (manager in the code snippet). The callback JavaScript function of the Ajax request will populate (highlighted in yellow in the above snippet) the second DropDownList.

  I attached a sample project which implements similar to your scenario. I hope this helps.


Best wishes,
Petur Subev
the Telerik team

[Shrinath]

Of course! Thanks so much this solved my problem.

[Bill]

Petur,

Can you provide the same example for GridEditMode.InLine ?

I'm attempting to do the same functionality using InLine mode instead of Popup.  When I take your example, and only change the GridEditMode to InLine, the application never sends the GET request to the browser for the ajax call.  I inspected with Fiddler to confirm. 

UPDATE - ok, not needed.  I was able to get my application (too large too post) to work with inline editing with one dropdown oberving another.  I don't really know what the difference is, but in my version, I use OnDataBound instead of OnLoad in the observed dropdown's EditorTemplate.  I also had to add a "/" to my URL property of the getJSON method, otherwise the URL was all wrong.  The other problem I had was my contoller method was using the entity and I had to convert to an autonymous type using "Text" and "Value" as the properties so that the bind in the callback would work.

For asthetics, I set the binding of the other dropdown in its EditorTemplate, looks nicer when Editing.  I also added            "$("#MyDropDownId").data("tDropDownList").open();" to the OnChange event as well.