Update Id and Name of DropDownList

[Abderrahmane]

Hello,

I'm using Kendo UI MVC to generate a dynamic form. 

User fill the form with Name and Las name. And I have a button that adds a template with two DropDownList with cascading behavior.

Each time user clicks on the add button, a couple of DropDownLists is added using template. Everything works fine.

The name and id of those ddl is Articles[0].Name and Articles[0].Quantity each time I add I increment the number between bracket.

The problem is when the user wants to delete one couple of ddl, I find my self with not continuous ids :

Initial :

Articles[0].Name, Articles[0].Quantity

Articles[1].Name, Articles[1].Quantity

Articles[2].Name, Articles[2].Quantity

When user deletes the second one I have :

Articles[0].Name, Articles[0].Quantity
Articles[2].Name, Articles[2].Quantity

This don't work because the mode binder in my action controller will stop at 0 if he doesn't find the index 1.

I tried updating the inputs with jquery, but this breaks the cascading behavior of the kendo DDL.

So is there a way to update the ID and name of a kendo DDL without breaking the cascading behavior ?

 

Thank you.

 

 

[Peter Milchev]

Hello Abderrahmane,

I am afraid that I was unable to completely understand your scenario and the provided information is insufficient to provide exact solution to your problem. Nevertheless, would you check if this Dojo example implements your scenario? It when clicking the button the id of the first input element changes and the second DropDownList's cascadeFrom property is set to the new id of the first DropDownList. 

If this approach does not fit your scenario, I would suggest another two options:

1. Re-initializing the DropDownList with the new id and name;
2. Removing the last DropDownList pair instead of the selected one and passing the selected values of the following DropDownLists to the previous ones. For example:

We have the following DropDownLists: DDL1, DDL2 and DDL3. If you want to remove the second DropDownList(DDL2), you just set the selected value of DDL3 to DDL2 and remove DDL3 isntead of DDL2. This way the DropDownLists should have continuous IDs. 

I would like also to clarify that these are custom solutions and it is not guaranteed that they will work in all cases.

Regards,
Peter Milchev
Telerik by Progress

[Abderrahmane]

Hello Peter,

Thanks for your reply.

Your understanding is good, but the Dojo example didn't work (inspecting the categories input after clicking on the button, ID hasn't changed).

For your two other solutions :

1 - Is it possible to reinitialize DropDownList and keeping all the options that were before ? and inputs also ?

2 - This looks like a good solution, do you have a sample code that implemented it ?

Thank you.

[Peter Milchev]

Hello Abderrahmane,

Here is a screen recording showing how the Category's input changes its id.

As for the other questions:

1. You could get the options of an existing DropDownList instance as follows:
   
   

   var options = $("#WidgetName").data("kendoDropDownList").options;
   
   Then you could create an identical instance of the DropDownList from another <input> or <select> using the following snippet:
   
   
   $("#New-Widget-Name").kendoDropDownList(options);
   

2. I am afraid that we do not have such example and as it is a custom solution it is the developer's task to implement it. 

I would also recommend reviewing the following resources:

• DropDownList Api demo. 
• DropDownList documentation.

Regards, Peter Milchev
Telerik by Progress

[Abderrahmane]

Hello Peter,

It looks like it's good, the demo is working.

Can you help me understand this line :

categories.id = "caregoryChangedId";

When was the variable "categories" instantiated ? I can't find it anywhere in the code provided.

Thank you.

[Peter Milchev]

Hello Abderrahmane,

In this case "categories" is not a variable but a reference to the HTML element with id="categories". You could read more on the topic in the following forum threads:

• Do DOM tree elements with ids become global variables?;
• Directly reference HTML elements [duplicate];

Regards,
Peter Milchev
Telerik by Progress