dynamically appended tab contentUrl querystring

5 posts, 2 answers
  1. Michael
    Michael avatar
    27 posts
    Member since:
    May 2011

    Posted 07 Jun Link to this post

    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.

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    119 posts

    Posted 09 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Michael
    Michael avatar
    27 posts
    Member since:
    May 2011

    Posted 09 Jun in reply to Alex Hajigeorgieva Link to this post

    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

  5. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    119 posts

    Posted 13 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Michael
    Michael avatar
    27 posts
    Member since:
    May 2011

    Posted 13 Jun in reply to Alex Hajigeorgieva Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready