Dynamic Template in MVC

[Sahasra]

Hi Team,

I want to create Dynamic template same as the below knockout url(knockout cart editor example).

http://knockoutjs.com/examples/cartEditor.html

Actually in this example first we need to select the category then based on the category products dropdown list will be populated.
In this example when we click the "Add product" button it automatically create the new row.

I want the same functionality in kendo ui template.I got the one reference in jsfiddle.net  

http://jsfiddle.net/kashyapa/hWXuF/embedded/result/

but my requirment is same as knockout cart editor example so i want to implement the same in kendo UI MVC application.
Could you please suggest how to crate this type of templates in MVC and If you have any samples could you please share?

Thank you,
Sahasra


 

[Daniel]

Hello Sahasra,

We have a similar demo that demonstrates how to use source binding and templates to add delete items to a list. Please check it on this page. To populate the products based on the selected category, you can use the dropdownlists cascading functionality. Showing the other inputs and fields only after a value is selected in the dropdownlist can be implemented by using visible binding and a dependent method.

Regards,
Daniel
Telerik

[Sahasra]

ggg

Hi Team,

  

I want to create dynamic template same as the below knockout URL(knockout cart editor example).

  

http://knockoutjs.com/examples/cartEditor.html

  

Actually, in this example first we need to select the category then based on the category products dropdown list will be populated. In this example when we click the "Add product" button it automatically creates a new row. I want the same functionality in kendo UI template. I got the one reference in jsfiddle.net (link below) but could not get the exact functionality done. 

  

http://jsfiddle.net/kashyapa/hWXuF/embedded/result/

  

I have tried to integrated the concepts of Kendo UI template and cascading dropdowns with reference from the above js fiddle link but in vain.  

  

Cascading dropdown list demo link that I have referred is, http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html ; and the Kendo UI MVVM template that I have referred is, http://demos.kendoui.com/web/mvvm/source.html. ;

  

Could you please provide me the links or resources where I can get this done or send me a sample code that has both Kendo UI template and cascading dropdown implemented in it the way I mentioned above. Please let me know if you need more information regarding my requirement.

  

Regards,

Sahasra

[Daniel]

Hello,

Basically, you should use the data attribute initialization for the dropdownlists and set the cascadeFrom option. I created a small jsBin example that demonstrates this scenario.

Regards,
Daniel
Telerik

[Sahasra]

Hi,

Thanks for your quick reply.The below sample is working fine but how to get the all rows values like(Category:Beverages,daily products,...Product:chai,...).Could you please suggest how to get the template row values  in MVC and If you have any samples could you please share?

[Daniel]

Hello,

The values are available in the ViewModel. You could either post them via Ajax when a button is pressed e.g.

var data = viewModel.items.toJSON();
$.ajax({
    url: "URL",
    type: "POST",
    dataType: "json",
    contentType: "application/json",
    data: kendo.stringify(data),
    success: function(){
    }
});

or use a dataSource with remote operations instead of an ObservableArray and call its sync method.

Regards,
Daniel
Telerik