Don't show all tabs in subgrid

6 posts, 0 answers
  1. sjarl
    sjarl avatar
    10 posts
    Member since:
    Dec 2010

    Posted 05 Apr 2018 Link to this post

    Hi Guys,

    In my application I have a grid within a grid using ClientDetailTemplateId

    in my subgrid I want to have 5 tabs, but in one specific instance I would like to have 6.
    I created a script to remove the 6th tab with JavaScript, but this doesn't work in IE. and also it's not nice.

     

    What I actually want is something like this.

    if (#=MyId# == "9212")
                         {
                                     items.Add().Text("Title").Content(

    where only if MyId = 9212 the item should be added,

    but whatever I try I can't get it to work.

    is there someone who can help me?

    Thank you in advance.


  2. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 09 Apr 2018 Link to this post

    Hello, Sjarl,

    Thank you for the details.

    Currently, the possible approach is in indeed using an if statement and based on condition to show 5 or 6 taps.

    Another option can be after the TapStip is rendered to check some condition and based on that to remove the unnecessary tap using the remove method:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/methods/remove

    Still, the first approach is better as using the second one can just flash the 6tg tab making a confusing experience for the user.

    Please share with us an example where we can reproduce the issue in IE and we will gladly assist further.



    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. sjarl
    sjarl avatar
    10 posts
    Member since:
    Dec 2010

    Posted 09 Apr 2018 in reply to Stefan Link to this post

    Hello Stefan,

    Thank you for your answer, the mentioned remove function works also in IE, so as a quick fix this is ok.
    but I'd rather would like to use the if statement.

    But If I use it like this

    if ("#=MyId#" == "9212")

    "#=MyId#" won't be replaced by mvc so the result always is false.
    and If I remove the double quote I end up with an error.
    is there a way to make this work?

  4. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 10 Apr 2018 Link to this post

    Hello, Sjarl,

    When placed inside an if statement the id has to be set a regular value (MyId):

    #if (MyID === 9212){#
            <p>Test</p>

    More details for the template syntax and the if statements in the templates can be found in the following article:

    https://docs.telerik.com/kendo-ui/framework/templates/overview#create-external-templates

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. sjarl
    sjarl avatar
    10 posts
    Member since:
    Dec 2010

    Posted 10 Apr 2018 in reply to Stefan Link to this post

    Hello Stefan,

    this syntax indeed works for the Content part or the title of the tab without any issue,

    however my statement is outside the tabitem itself
    and I cannot do this

    #if (MyID === 9212){ #
           items.Add().Text("Nacontrole").Content(

    because items.add is not plain content I think,
    I think what I'm looking for it how to use the parent values in ClientDetailTemplates.

  6. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 11 Apr 2018 Link to this post

    Hello, Sjarl,

    This if statement has to be added at begging of the DetailTemplate and based on that to return a tab strip with 5 or 6 items.

    Placing it only for one of the taps will break to syntax and the rendering.

    I do understand that this will create having identical code for both TabStrips, but currently, this is the supported syntax.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top