We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Make Dynamically loaded tab Active

Thread ID:

Created:

Updated:

Platform:

Replies:

131820 Jul 28,2017 06:51 AM Jul 31,2017 11:05 AM ASP.NET MVC 1
loading
Tags: Tab
john thomas
Asked On July 28, 2017 06:51 AM

I am successfully loading new tabs dynamically using jquery ajax and partial views. The jquery below is invoked when a menu option is taken, it then calls a controller action to get data which is loaded into a grid control before being returned via a partial view which is rendered in the div (dynamicTab). This all works OK.

// Tab Control
@{Html.EJ().Tab("Picks").Items(data =>
{
}).ShowCloseButton(true).Render();}


// Tabs
            // load Completed Picks partial view
            $('#pvLoadCompletedPicks').on('click', function (e) {
            e.preventDefault();
                $.ajax({
                    type: "GET",
                    url: '/Picklist/CompletedPicks',
                    success: function (data) {

                         var tabObj = $("#Picks").data("ejTab");
                         tabObj.addItem("#New", "New Item", 10, "", "dynamicTab");

                         $('#dynamicTab').html(data);
                         ej.widget.init($("#dynamicTab"));

                     }
                 });

             });


The problem is, the tab created is not active or displayed, it is appended to the end of the other tabs but not displayed/active. When clicked it is displayed as expected. So my question is, how do I resolve this or what property do I need to set to ensure dynamic tabs are displayed/actively rendered?


Many thanks                    






Keerthana Rajendran [Syncfusion]
Replied On July 31, 2017 11:05 AM

Hi John, 
 
Thank you for contacting Syncfusion support. 
 
We have prepared a sample based on your code and loaded Grid control into the newly added tab. We suggest you to pass url name parameter alone to addItem method and that will be considered as “id” for newly added tab item. We have provided an additional parameter called id in addItem method to add id to tab item in case  when url name parameter specifies some path as url to fetch content. 
 
Please refer the below given code 
 
  $.ajax({ 
                url: '/Home/Index', 
                type: 'POST', 
                success:function(data) 
                { 
                   var tabObj = $("#Picks").data("ejTab"); 
                    tabObj.addItem("#dynamicTab", "New Item", 1); 
                    $('#dynamicTab').html(data); 
                    ej.widget.init($("#dynamicTab")); 
                     } 
 
            }) 
 
We have attached sample for your reference. Please refer to the below given link  
 
 
If the issue persists please get back to us by modifying the above sample to reproduce the issue in our end along with product version used in your project. If possible share us some video or screenshot to showcase the issue so that we can proceed further. 
 
Regards, 
Keerthana. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;