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.

Load only selected tab content (not all tabs content on single page nor dynamic tab loading)

Thread ID:

Created:

Updated:

Platform:

Replies:

126191 Sep 29,2016 10:02 AM Nov 1,2017 12:41 AM ASP.NET MVC 11
loading
Tags: Tab
Tom Frajer
Asked On September 29, 2016 10:02 AM

Hi,
Im experimenting with Syncfusion Tabs and found that I can create tabbed content, that is loaded all at once (separated into tabs divs), or second option, I can load content on demand - when I click tab, partial view is loaded into that tabs div. Both works, but problem is, that in comlex application with multiple tabs, I would rather not mix multiple partial views loaded in single HTML page into DIVs. This sometimes causes problems (javascript conflicts etc.). I would like to have tabs, but when I click some of the tabs, I want complete page reload - I need to isolate each tab content to not interfere with other tabs. More like static HTMKL navigation using links, but with same look like Syncfusion tabs and with ability to link to each tab with its URL (so it is selected).

<nav>
  <ul>
    <li><strong>Home</strong></li>
    <li><a rel='nofollow' href="about.html">About Us</a></li>
    <li><a rel='nofollow' href="clients.html">Our Clients</a></li>
    <li><a rel='nofollow' href="products.html">Our Products</a></li>
    <li><a rel='nofollow' href="services.html">Our Services</a></li>
    <li><a rel='nofollow' href="contact.html">Contact Us</a></li>
  </ul>
</nav>

Keerthana Rajendran [Syncfusion]
Replied On October 1, 2016 08:16 AM

Hi Tom,  
 
We have prepared a sample with 5 Tabs in a single page  with 5 different types of Content Binding 
1)Static Content 
2)Dynamic Content 
3)load on demand  
4)Partial view 
5)Url 
 
Please refer the below given link: 
 
 
 
Query : I want complete page reload - I need to isolate each tab content to not interfere with other tabs. 
 
If you require page reload we have to manually bind this to a tab item . Also when page reload occurs only static content of Tab will be maintained and dynamic contents will not be loaded, so this will be interfered with other tab. So can you please provide us some more additional details on your requirement of page reload 
 
Query: I would rather not mix multiple partial views loaded in single HTML page into DIVs. This sometimes causes problems (javascript conflicts etc) 
 
Also if we are binding the same partial view page to two or more tabs the id present in the partial view page will be same in all content . Whether this is the conflict you mentioned in your query 
 
Kindly get back to us with these additional details so that we will provide you a better solution at the earliest 
 
Regards, 
Keerthana. 

 


Tom Frajer
Replied On October 1, 2016 02:54 PM

Cannot download...

The file "Tab-1755187203.zip" has been blocked. The file is larger than the configured file size limit.

Keerthana Rajendran [Syncfusion]
Replied On October 3, 2016 02:22 AM

Hi Tom,    
Sorry for the inconvenience caused,   
  
We had reduced  sample size as much as possible. Please download a sample from the below link:   
   
   
   
Also please provide us the requested details which we have mentioned in our previous update.   
   
Regards,   
Keerthana.   
 


Tom Frajer
Replied On October 3, 2016 03:58 AM

Still same problem - file is too large. Can you please post only the View here on forum? I think it will be enough for me. Thank you.

Keerthana Rajendran [Syncfusion]
Replied On October 4, 2016 04:41 AM

Hi Tom,    
   
Sorry for the inconvenience caused,   
   
We have attached the view and controller page in the below link.             
   
   
If you are unable to download this please refer the view code below for 5 different types of Content binding to Tab.   
   
<code>   
@{Html.EJ().Tab("Tab1").Items(data =>   
    {   
        data.Add().ID("rome").Text("Static Content").ContentTemplate(@<div> Rome is one of the world's most fascinating cities. The old adage that Rome was not built in a day — and that you won't see it in one or even in three — is true. For the intrepid traveler who can keep pace, here is a list of must-sees. But remember what the Romans say: "Even a lifetime isn't enough to see Rome."  </div>);   
        data.Add().ID("Dynamic1").Text("Dynamic Content");   
        data.Add().ID("ASP").Text("Url Content ").Url("../Content/sample content/gridcontent.html");   
        data.Add().ID("tabitem1").Text("Load on demand").ContentTemplate(@<div></div>);   
        data.Add().ID("Grid").Text("Content from Partial View").ContentTemplate(@<div>   
        </div>);   
   
   
    }).ClientSideEvents(e => e.Create("oncreate")).ClientSideEvents(e => e.ItemActive("onClientActive")).Render();}   
<br />   
<script>   
    var flag;   
      
    function onClientActive(e) {   
   
   
        if (e.model.selectedItemIndex == 3 && ej.isNullOrUndefined(flag)) {   
            $.ajax({   
                url: '/Tab/_Chart',   
                type: 'POST'   
   
            }).done(function (result) {   
                $("#tabitem1").html(result);   
   
            })   
            flag = true;   
   
        }   
    }   
       
function oncreate(e) {   
   
   
   
        $.ajax({   
            url: '/Tab/_Grid',   
            type: 'POST'   
   
        }).done(function (result) {   
            $("#Grid").html(result);   
   
        })   
   
           
            var url = "/Tab/tabcontent";   
               
   
            $.get(url, nullfunction (data) {   
                $("#Dynamic1").html(data);   
                   
            });   
   
           
   
    }   
</script>   
</code>   
  
   
Regards,   
Keerthana.  


Tom Frajer
Replied On October 4, 2016 08:19 AM

None of the exemple tabs solves my problem. This one is closest:


data.Add().ID("ASP").Text("Url Content ").Url("../Content/sample content/gridcontent.html");   


Problem is, that instead of simple link to specified page (../Content/sample content/gridcontent.html), it loads content of that page into DIV element of that tab. 

If I use this solution, then after clicking on few tabs, their referenced pages (in .Url(xxx)) are loaded in document body all together and it causes javascript conflicts. Did you tried to create complex user interface this way? Try to put 10 tabs with inline editable grids on each tab and various other UI elements (I have diagram on one of the tabs). It is not working well.


Keerthana Rajendran [Syncfusion]
Replied On October 6, 2016 07:17 AM

Hi Tom,    
   
Query 1: Problem is, that instead of simple link to specified page (../Content/sample content/gridcontent.html), it loads content of that page into DIV element of that tab.    
   
 When we bind content from URL, the corresponding URL will be set to rel='nofollow' href of the li element and the content will be loaded through AJAX in the div element. This is the default behavior of the tab.    
   
Query 2: If I use this solution, then after clicking on few tabs, their referenced pages (in .Url(xxx)) are loaded in document body all together and it causes javascript conflicts. Did you tried to create complex user interface this way? Try to put 10 tabs with inline editable grids on each tab and various other UI elements (I have diagram on one of the tabs). It is not working well.   
   
We suspect that, when you try to load any control with same ID from view pages into many tabs, the control will be rendered correctly only for the first tab because control will be rendered with an ID only once. So, trying to render the same control with the same ID in another tab results in scripting conflicts.   
   
Please load same controls from different view pages with different IDs so that scripting conflict can be avoided.   
   
In our sample, we have rendered the Grid control in two tabs from two different view pages and Diagram control in two different tabs in the same way.   
   
View Page:   
   
<code>   
<div style="width500px">   
         @{Html.EJ().Tab("Tab1").Width("600px").Items(data =>   
    {   
   
        data.Add().ID("tab1").Text("Url").Url("../Grid/GridFeatures");   
           
       }).Render();}</div>   
<br />   
<div>   
   
    @{Html.EJ().Tab("Tab2").Width("600px").Items(data =>   
    {   
   
        data.Add().ID("tab2").Text("Url2").Url("../Home/Index");   
   
        }).Render();}       
         </div>   
<div>   
    @{Html.EJ().Tab("Tab3").Width("600px").Items(data =>   
    {   
   
        data.Add().ID("tab3").Text("Grid2").Url("../Home/Contact");   
   
    }).Render();}   
</div>   
<br />   
<div>   
    @{Html.EJ().Tab("Tab4").Width("600px").Items(data =>   
    {   
   
       data.Add().ID("tab4").Text("Diagram2").Url("../Home/About");   
   
    }).Render();}   
</div>   
   
          
       
</code>   
  
   
View page where we render in line editing Grid control:   
   
@(Html.EJ().Grid<object>("FlatGrid1")   
        .AllowScrolling()   
         .AllowPaging()    /*Paging Enabled*/   
              .SelectionType(SelectionType.Single)   
              .EditSettings(edit=>{edit.AllowAdding().AllowDeleting().AllowEditing(); })   
              .ToolbarSettings(toolbar =>   
                {   
                 toolbar.ShowToolbar().ToolbarItems(items =>   
                 {   
                  items.AddTool(ToolBarItems.Add);   
                  items.AddTool(ToolBarItems.Edit);   
                  items.AddTool(ToolBarItems.Delete);   
                  items.AddTool(ToolBarItems.Update);   
                  items.AddTool(ToolBarItems.Cancel);   
                });   
              })   
        .Columns(col =>   
        {   
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();   
            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();   
            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();   
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();   
            col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(80).Format("{0:MM/dd/yyyy}").Add();   
               
        }))   
   
  
   
In another view page, we have rendered Diagram control:   
   
<code>   
   
@(Html.EJ().Diagram("DiagramContent",ViewData["diagramModel"]asSyncfusion.JavaScript.DataVisualization.Models.DiagramProperties))   
</code>   
  
   
 We have attached view and controller pages for your reference. Please refer to the below given link:          
   
   
   
Regards,   
Keerthana.   
 
 


Clement Deturck
Replied On October 23, 2017 07:58 AM

Hi, 
I'm trying to do the "load on demand' solution. But withs some grid in my tab.
here's my code : 

Html.EJ().Tab("tabs").Items(data =>
    {
        DateTime dateJour = ViewBag.premierJour;
        data.Add().ID(dateJour.ToString().Substring(0, 10).Replace("/", "")).Text("Lundi " + dateJour.ToString().Substring(0, 10)).ContentTemplate(
            @<div></div>
        );
    }
).ClientSideEvents(e => e.ItemActive("onSubClientActive")).Render();

My Ajax/javascript : 

<script type="text/javascript">
    var d0;
   Date.prototype.addDays = function (days) {
       var dat = new Date(this.valueOf());
       dat.setDate(dat.getDate() + days);
       return dat;
  }
  function onSubClientActive(e) {
       var firstDateVB = '@(ViewBag.premierJour)';
       var firstDate = new Date();
       firstDate.setDate(firstDateVB.substr(0, 2));
       firstDate.setMonth(firstDateVB.substr(3, 2)-1);
       firstDate.setFullYear(firstDateVB.substr(6, 4));
       var date = new Date();
       if (e.model.selectedItemIndex == 0 && ej.isNullOrUndefined(d0)) {
           var sendDate = '' + firstDate.getDate() + (firstDate.getMonth() + 1) + firstDate.getFullYear();
           $.ajax({
               url: '/AnalyseChargeQuotidien/_jours/' + sendDate,
               type: 'POST'
           }).done(function (result) {
               $("#" + sendDate).html(result);
           })
           d0 = true;
       }
    }

and _jours' view : 

@{
    for (int i = 0; i < ViewBag.nombreMP; i++)
    {
        string name = "DataGrid" + i.ToString();
        string datasource = "datasource" + i.ToString();
        <div>
            @datasource
            @(Html.EJ().Grid<object>(name).Datasource((IEnumerable<Object>)ViewData[datasource.ToString()])
                .AllowSorting()
                .IsResponsive()
                .Locale("fr-FR")
                .EnableHeaderHover()
                .Columns(col =>
                {
                    col.Field("PK_Code_Charge").HeaderText("PK_Code_Charge").IsPrimaryKey(true).TextAlign(TextAlign.Left).Width(40).Visible(false).Add();
                })
            .ClientSideEvents(eve => { eve.QueryCellInfo("CellJourFormat").RecordDoubleClick("FocusAtelierJour"); });
            )
       
</div>
   
    <br />
   
}
}

And, i got a problem... I can view my "@datasource" bellow the <div> and it work great in my 'for'... but i can't see my grid... 
If you can help =) 




Prince Oliver [Syncfusion]
Replied On October 24, 2017 06:19 AM

Hi Clement, 

Thank you for contacting Syncfusion forums. 

To render our Grid control from the partial view, you need to call ej.widget.init() in the success handler, if you are using unobtrusive mode. Kindly refer to the following KB article for more information: https://www.syncfusion.com/kb/7788/how-to-render-the-partial-view-content-while-unobtrusive-mode-is-enabled 

In case, if the unobtrusive mode is set as false, then you need to add ScriptManager in the partial view page to render the control when it is loaded into tab. Refer to the Getting Started section for more information on ScriptManager : https://help.syncfusion.com/aspnetmvc/getting-started 

Regards, 
Prince 


Clement Deturck
Replied On October 31, 2017 04:21 AM

Hi Prince,

Thank you for your reply, it work great ! 

Have a good day. Regards
Clément.


Prince Oliver [Syncfusion]
Replied On November 1, 2017 12:41 AM

Hi Clement, 

Most Welcome. We are glad to know that your issue is resolved. 

Regards, 
Prince 


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.

;