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

[Sergei]

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.

[Boyan Dimitrov]

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

 

 

[Sergei]

[quote]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

 

 

[/quote]

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.

[Sergei]

And also with my solution, validation rules from model won't work.

[Boyan Dimitrov]

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