[4.2] Sub Tabs failing to load - Forum - Rollbase - Progress Community

[4.2] Sub Tabs failing to load

 Forum

[4.2] Sub Tabs failing to load

This question is not answered

Hi all,

I've created a sub tab under my current tab section using the KendoTabStrip method but the grids inside my sub tabs fail to load. Is there currently an issue with AJAX form loads within Rollbase apps? This is the code I'm using below:

Regards,

Simon Tregloan-Reed

<div id="example">
    <div class="wrapper">
        <div id="tabstrip">
            <ul>
                <li class="k-state-active">Object 1</li>
                <li>Object 2</li>
            </ul>
                <div>
                  <div id="obj1"></div>
                  </div>
                  <div>
                <div id="obj2"></div>
                </div>
        </div>
    </div>
</div>

<script>
  $(document).ready(function(){
  var obj1Grid = $("#" + $("section[name='Object1']").find(".rbs-grid").attr("id"));
  obj1Grid.bind("dataBound", function(e) {

    $("section[name='Object1']").appendTo($("#obj1"));
  });

  var obj2Grid = $("#" + $("section[name='Object2']").find(".rbs-grid").attr("id"));
  obj2Grid.bind("dataBound", function(e) {
    $("section[name='Object2']").appendTo($("#obj2"));
  });

  $("#tabstrip").kendoTabStrip({
    animation:  {
      open: {
        effects: "fadeIn"
      }
    }
  });
});
</script>
All Replies
  • Hi Simon,

    This is what I understand from your code. You have main object which has a relationship with Object1 & Object2 (M:M or 1:M) . On record view page of main object you added sub tabs and you are trying to place Object1 & Object2 related list view to tab1 & tab2 respectively on dataBound event of Object1 & Object2 kendo Grid. If that is the case here are the problem that I can see from your code

    1) You are trying to bind a dataBound event of jQuery object (obj1Grid & obj2Grid) which is wrong. You should get kendo Grid instance on which you should bind "dataBound" event. Refer following KendoGrid doc link for more details

    docs.telerik.com/.../grid

    2) You shouldn't use document.ready in NewUI as we suggested many times. You should try to use Rollbase custom events . Please refer this document link to know more details about our custom events and how to use

    documentation.progress.com/.../


    For your reference I built sample App and attached same with seed records for above mentioned use case. You can try it and let me know if you need anything more on this.

    Sample Subtab App_v4.xml

    Hope this helps,
    Vimal.

  • HI Vimal,

    I've tried your example test app and it doesn't seem to work. The original Ids didn't match but even after I changed them the sub tabs weren't clickable and the function in your code "getKendoGridByOrginalId(orgId)" is unclear as "ordId" isn't used or defined anywhere else in the app. I corrected all the original Ids and here is a screenshot of what I see below:

    Regards,

    Simon Tregloan-Reed

  • Hi Simon,

    What version of Rollbase are you using?..

    Update getKendoGridByOrginalId() method with below code. As i hard coded the originalId instead of using the parameter.

    function getKendoGridByOrginalId(orgId){

     var rbComp = rbf_getPageComponent(orgId);

     if(rbComp){

       return rbComp.getKendoConfig();

     }

     return null;

    }

    After updating this method also if you still see any issue could you check browser console and let us know if there are any error?.

    Thanks,

    Vimal.

  • HI Vimal,

    I finally got the code to work but I had to modify and change a few things in your code, see below:

    Firstly, I had to change your "rbs_tabActivated" to PageRender so that the code would be executed.

    Secondly, I had to use the grid's ID instead of the original ID that you posted in the code and suggested. But to do this I had to hard code it by getting the ID's from the console. Do you happen to know of a Rollbase way that I can get the grid ID's without hard coding it incase this code is used across other tenants or I upgrade to version 4.5 for example?

    Regards,

    Simon Tregloan-Reed

  • Hi Simon,

    I am glad you made it working.. I would like to make few comments on the changes that you made,

    1) I used "rbs_tabActivated" instead of "rbs_pageRender" event because pageRender will be fired once entire Page rendering is complete , but tabActivated event will be fired when your tab became active. As long as you have only one page tab your code works but if you have more than one tab say default will have "System Tab" and your active tab is not the one where you have sublevel tab, if you do Page Refresh your sub tabs won't be rendered. Say for an example you selected "System tab" now you refresh the page, now your default selected tab is "System tab" , switch to tab where you have sub tabs. You can see sub tabs will not be rendered. Because you wrote the logic on PageRender callback which will be fired only once when the page rendering is complete, so when you switch from different active tab to the one where you have sub tabs your code will not run, that's the reason I used "rbs_tabActivated" .

    2) Using CellId (gridId) will not work with different tenants or in different environments . To overcome this issue only we started supporting our client side API to work with OriginalId, but looks like you are running old Version of Rollbase in which we don't have this support. I request you to upgrade your Rollbase version to latest and change your logic to use Original ID, that resolve the problem working with different tenants and different environments.

    Just in case you want to cross verify you can install the latest Sample Application that I attached in our EAP environment. It works with out making any changes to the code.

    Hope this clarifies,

    Thanks,

    Vimal.

  • Hi Vimal,

    I can understand your second point since I'm using Rollbase version [4.2] which I prepended to the subject title of this thread. I'm looking to upgrade to version [4.5] very soon. In the meantime I think I might have a way to code the system to get the grid ID's.

    As for your first point, I've had to use rbs_pageRender because rbs_tabActivated doesn't seem to work in version [4.2]. When I was debugging the script using "debugger;" the script wouldn't even load. I checked to make sure that the function is listed in the Rollbase utility by typing the command "rb.newui.util.customEvents.rbs_tabActivated" into the console and it does exist.

    The finished version I'm looking for is to have a tab strip of say 15 tabs whittled down to say 5 tabs with each having their own sub tab which will show fields and or grids. Currently I know that using rbs_pageRender won't work so could you shed some light on why rbs_tabActivated doesn't work?

    Regards,

    Simon Tregloan-Reed

  • Hi Simon,

    There are couple of issues that we fixed around rbs_tabActivated event and how it got consumed internally in code. So I would recommend you try this sample App in EAP system and check if everything works for you. I can confirm that when you upgrade to 4.5 all your issues get resolved with respect "rbs_tabActivated" event and using OriginalId in client side SDK.

    In case you still see problem after trying out in EAP or updating to latest build please let us know.

    Thanks,

    Vimal.

  • Simon,

    Do you have an account on eap.rollbase.com?

    if not email me at tciot at progress dot com

  • Hi Thierry,

    Yes I do have an account on eap.rollbase.com that I'm using to test this problem out on at the moment. Is there any chance someone could extend my trial period as its due to run out soon.

    Regards,

    Simon Tregloan-Reed

  • Done.

    Please discuss EAP related items in this forum: community.progress.com/.../

  • Hi Thierry,

    Thanks for increasing my trial period and for adding me to the EAP forum group. I'll update this post as soon as I've finished testing the "rbs_tabActivated" function in version 4.4.

    Regards,

    Simon Tregloan-Reed