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

Dynamic Template in MVC

5 Answers 71 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Sahasra
Top achievements
Rank 1
Sahasra asked on 05 Dec 2013, 05:54 PM
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


 

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 09 Dec 2013, 02:56 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sahasra
Top achievements
Rank 1
answered on 11 Dec 2013, 07:02 AM

ggg

Hi Team,
  
I want to create dynamic template same as the below knockout URL(knockout cart editor example).
  
  
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. 
  
  
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

0
Daniel
Telerik team
answered on 12 Dec 2013, 02:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sahasra
Top achievements
Rank 1
answered on 17 Dec 2013, 06:32 AM
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?
0
Daniel
Telerik team
answered on 18 Dec 2013, 02:29 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Sahasra
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Sahasra
Top achievements
Rank 1
Share this question
or