Tabstrip, child grid and other controls in Pop-up template.

5 posts, 0 answers
  1. Sergei
    Sergei avatar
    6 posts
    Member since:
    Nov 2015

    Posted 17 Feb 2016 Link to this post

    Hi! I need to figure out, how to put tab strip, couple of grids in this tab strip, some buttons and file upload control inside custom pop-up template, and how to bind those controls to options, data sources, etc.

    If I put pop-up template on my page, I can't(?) use code like:

    var tabstrip = $(".popUpTabstrip");
                tabstrip.kendoTabStrip({
                animation: {open: {effects: "fadeIn"}}});</script>

    I'm creating my grid in JS entirely, referencing .js file.

    I've also tried to set my own function to render pop-up template content and then called .html(), but .kendoTabStrip line doesn't do anything, because all this is converted to HTML.

    Please, tell me, which way is the best to achieve my goal?

    Ideally, I want to use function to render template, where I can create new kendo controls and bind them to data sources, defined in my js file.

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 22 Feb 2016 Link to this post

    Hello Sergei,

     

    The Kendo UI Grid editable.template option allows user to define its own popup editor that is bound to the view model. Please refer to the example below the article that shows how to define a custom popup editor containing simple input and a numeric text box widget. Once you edit the value from the popup editor it reflects to the view model due to MVVM two way binding. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Sergei
    Sergei avatar
    6 posts
    Member since:
    Nov 2015

    Posted 23 Feb 2016 in reply to Boyan Dimitrov Link to this post

    Boyan Dimitrov said:

    Hello Sergei,

     

    The Kendo UI Grid editable.template option allows user to define its own popup editor that is bound to the view model. Please refer to the example below the article that shows how to define a custom popup editor containing simple input and a numeric text box widget. Once you edit the value from the popup editor it reflects to the view model due to MVVM two way binding. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     

    It's not enough. I need complex pop-up with controls like ComboBox, child Grids, TabStrip, etc.

    I found solution for now - I'm using edit handler of grid to init controls in pop-up template, which, like you suggested, I'm loading using editable property.

    But this solution looks ugly to me, because it divides template in 2 parts - HTML template and controls initialization code, which are stored in 2 different places.

  4. Sergei
    Sergei avatar
    6 posts
    Member since:
    Nov 2015

    Posted 23 Feb 2016 Link to this post

    And also with my solution, validation rules from model won't work.
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 25 Feb 2016 Link to this post

    Hello Sergei,

     

    As started in the editable.template article you can use the role data attribute to initialize Kendo UI widgets in the template. This means that there is no need of initialization code in the edit event handler. Check data attribute initialization for more info.

     

     

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top