dynamically appended tab contentUrl querystring

[Michael]

I am trying to configure a tabstrip as follows in an AngularJS app:

1st tab has some search controls and grid and is always visible - when user searches and get results there is a command column which is calling a function to dynamically append a new tab that is setting the contentUrl to a partial view (which of course has an associated controller) (i.e. contentUrl: 'views/myview.html'). I need to be able to pass a parameter (querystring or some other way) to the view/controller so it can load the actual expanded details of the record in a form layout but I can find no examples of how to do so (pass a parameter if it is even possible).  I've even tried setting up the actual view within an angular directive and having an attribute on the element with the necessary parameter but the tabstrip does not seem to recognize/render directives.  Also, the example I've seen for adding a close button to tabs does not seem to work in the Angular realm so I respectfully request that an example (if it is possible) of how to do that in a pure angular view/controller since you claim to support angular.

[Alex Hajigeorgieva]

Hello Michael,

From the provided explanation, it seems to me that the requirement is to pass the contentUrl property value from one AngularJS controller to another, following a new Kendo UI TabStrip tab creation. I understand that close buttons may also be required so I created a sample demo for your convenience:

http://dojo.telerik.com/iZEqA

Documentation reference for the approach in my sample:

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#methods-insertAfter

The information in your ticket reminded me of a demo that we have with AnglularJS, Kendo UI Grid and TabStrip that you may find useful:

http://demos.telerik.com/kendo-ui/grid/angular

I am not sure that I have made the right assumption, so please provide more details if this is not the case or edit the Dojo sample to reflect the scenario.

Kind Regards,
Alex
Telerik

 

 

[Michael]

Alex,

Thank you!!!!  The dojo example solved my general issue - the dynamic tab insertion using a reference angular view is working - still need to figure out how to initialize a $scope level variable for the associated view controller.  So, using your dojo example, assuming the ajaxContent.html file has an associated ajaxContentCtrl controller which has a local $scope.id variable how can I initialize that variable from a value from the "parent" controller.  For my scenario the first tab on the tabstrip (which is "static") has a grid which lists some records - the first column is template column which has button which calls the function to add the dynamic tab (the record details form view) but I need the record id to be available in the form view controller so I load the correct data record (via kendo datasource).  Is this doable?

Regards,

Michael Jensen

[Alex Hajigeorgieva]

Hello Michael,

I have added a Kendo UI Grid to the TabStrip and applied the following corrections to pass the dynamic content loading as required:

1.) Add a column with a command button and configure the function to be executed on click.

Demo: http://demos.telerik.com/kendo-ui/grid/custom-command 
Documentation: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.click

2.) Code the function to be executed on the click event of the command button. Since I used the Kendo UI Grid columns command configuration, an anchor element <a href="#"> is automatically generated. So the first thing that the function (in our case insertContent) needs to do, is to prevent the default behaviour. 

3.) Get the target cell:

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

4.) Populate the Kendo UI TabStrip tabs with the respective:
 
- content - http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#configuration-dataContentField
- text - http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#configuration-dataTextField
- contentUrl - http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#configuration-dataContentUrlField


The updated demo is available here:

http://dojo.telerik.com/OGiMe

Kind Regards,
Alex
Telerik

 

 

[Michael]

Alex,

This was very helpful so thank you.  I also found another way to accomplish getting the necessary id value into the "child" controller using ng-init attribute when dynamically adding the new tab. Seems to be working as designed.  I truly appreciate your help on getting me farther along in this exercise.

 

Regards,

Michael Jensen