This is a migrated thread and some comments may be shown as answers.

Cascading dropdown values with editor templates

9 Answers 406 Views
Grid
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 28 Feb 2013, 06:32 PM
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.

9 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 04 Mar 2013, 01:42 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
James
Top achievements
Rank 1
answered on 04 Mar 2013, 03:06 PM
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.
0
Accepted
Petur Subev
Telerik team
answered on 06 Mar 2013, 03:21 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
James
Top achievements
Rank 1
answered on 06 Mar 2013, 08:11 PM
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.
0
Prem
Top achievements
Rank 1
answered on 08 Aug 2014, 09:34 PM
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!
0
Petur Subev
Telerik team
answered on 12 Aug 2014, 12:57 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Matthew
Top achievements
Rank 1
answered on 16 Oct 2015, 10:46 PM

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?

0
Daniel
Telerik team
answered on 21 Oct 2015, 07:45 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Matthew
Top achievements
Rank 1
answered on 21 Oct 2015, 10:10 PM

Daniel,

 Enabling server filtering did the trick.  Thank you.

 

-Matthew

Tags
Grid
Asked by
James
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
James
Top achievements
Rank 1
Prem
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or