Cascading dropdown values with editor templates

[James]

I have a cascading dropdown within a grid that has inline editing.  It's done using editor templates.  The problem is that the one that cascades uses a read action that doesn't have access to the value.

As an example, you have state and city.  The list of cities depends on the state selected.  When switching over to edit the value, the states are put into a dropdown correctly and selects the state.  The selected city is lost, because it gets the list of values for the state, but doesn't know what the record had selected.  How do I access the row values?  I tried using Model, but it's null.

Putting an edit event on the grid doesn't work, because the edit function is done after the dropdown is created.

I looked at the example and don't see anything different:
http://www.kendoui.com/code-library/mvc/grid/grid-inline-and-popup-editing-using-cascading-dropdownlists.aspx

State dropdown:

@(Html.Kendo().DropDownList()

.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
.BindTo(new SelectList((System.Collections.IDictionary)(ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]),"Key","Value",Model)) )

City dropdown:

@(Html.Kendo().DropDownList()
.Name("City")
.DataSource(x => {x.Read(read => read.Action("GetCities", "Home").Data("getState"))
.ServerFiltering( true); })
.DataTextField( "Text")
.DataValueField("Value")
.Enable(false)
.AutoBind(false)
.CascadeFrom("States")
)

function

 getState(e) {
return { 
    State: $("#States").val()
};
}

Edit: Wow, it added a few dozen extra line breaks that I just removed.

[Petur Subev]

Hello James,

I am not sure I understand the problem. In the code library project (the inline editing one) when I created new item and save it, then edit that item the DropDownLists are fetching their collection from the server and the values are set properly like shown in the image.

Could you please elaborate on your case?


Kind Regards,
Petur Subev
the Telerik team

[James]

Yes, the basic example works just fine.  But, I am not going to show customers the ID field.  The ID means nothing to them and should never be shown, so it shows the display name.  At that point the basic example no longer gets the cascading values when going into edit mode.

To use the city and state example, it would be like showing Washington in the dropdown, but then displaying 32 once it's saved.  Not going to show an integer to users.  If you are able to modify the example to show "Customer2" after saving, that would be extremely helpful.

[Petur Subev]

Hello James,

Basically the code library shows how to use editor templates which are cascading dropdownlists. Editor templates could not help you to display the text representation when you are not editing a row.

You will need to use ClientTemplate which converts the id to text or you can take advantage of the ForeignKey feature.

To demonstrate the ForeignKey feature I shared a sample project.

I hope this helps.

Kind Regards,
Petur Subev
the Telerik team

[James]

So then using ForeignKey is the way to go, in combination with cascading dropdowns.  Didn't think of it, because it's not a foreign key in my case, but I can see it's a similar structure.

Doesn't work for my data structure and somehow the second dropdown doesn't wait for the value of the first, but I see how it should work at least.  I will use another method instead of Kendo.

Thank you for the example.

[Prem]

can you post an example of such cascading when the foreign key is a string. That key was int in the last one and I ran into problem here:

var model = e.items[0];
model.set("CustomerId"), 0);

what if the customerid is a string? How do we do that..or I am not underestanding!

[Petur Subev]

Hello Prem,

I am not sure I understand where the logic fails - I believe that it should be possible to edit a foreign key column when it is of type string. Basically the code that you shared might only need to change to change the new value to be of type string.

e.g.

var model = e.items[0];
model.set("CustomerId"), '0');

If still struggling please demonstrate by modifying the same project according to your case so we can see what exactly goes wrong.

Kind Regards,
Petur Subev
Telerik

 

 

[Matthew]

Hi Peter,

 I set my project up following the sample project you provided.  The cascading functionality is ​filtering my second dropdownlist when I initially select a value from my first dropdownlist.  However, as soon as I select a different value from the first dropdownlist the second dropdownlist doesn't change accordingly.  I set a breakpoint on the method in my controller that filters the second dropdownlist.  This method is only called once.  Any thoughts on why the filtering isn't applied every time I change my dropdownlist selection?

[Daniel]

Hello Matthew,

Have you enabled serverFiltering for the second dropdownlist dataSource? If not, then the method will be called only initially and after that the data will be filtered on the client. If serverFiltering is enabled then could you provide the code that you are using so I can check the setup?

Regards,
Daniel
Telerik

 

 

[Matthew]

Daniel,

 Enabling server filtering did the trick.  Thank you.

 

-Matthew