Dynamic Template in MVC

6 posts, 0 answers
  1. Sahasra
    Sahasra avatar
    3 posts
    Member since:
    Dec 2013

    Posted 05 Dec 2013 Link to this post

    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


     
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 09 Dec 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Sahasra
    Sahasra avatar
    3 posts
    Member since:
    Dec 2013

    Posted 11 Dec 2013 Link to this post

    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

  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 12 Dec 2013 Link to this post

    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!
  6. Sahasra
    Sahasra avatar
    3 posts
    Member since:
    Dec 2013

    Posted 17 Dec 2013 Link to this post

    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?
  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 18 Dec 2013 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready