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. Image for the cookie policy date
close icon

Navigate between tab pages via buttons

I am trying to create a tab control where the tab pages will be enabled/disabled via buttons, and navigation between the tab pages will be by using Next and Previous buttons, as well as Close button, but unable to do so.  I also seem unable to render a Button in one of my. cshtml files (Views/Tab/QuickListTabContent.cshtml).
Please help (see my prototype attached),
Marina

Attachment: MinimalWizard_8cd2848d.zip

15 Replies

KV Karthikeyan Viswanathan Syncfusion Team January 9, 2017 06:50 AM UTC

Hi Marina Brukhovetsky,        
   
Thanks for contacting Syncfusion Support.   
   
Please find the details in the following table.  
   
   
Query   
Response   
I am trying to create a tab control where the tab pages will be enabled/disabled via buttons, and navigation between the tab pages will be by using Next and Previous buttons, as well as Close button, but unable to do so.    
Your shared sample is not working at our end. So, we have prepared a sample based on your shared sample code.    
You can write the same client side event for previous and next buttons within the Tab control.   
   
Please find the below code snippet:   
<code>   
function PartsNext(e)   
       {   
           
           var tabObj = $("#StaticTab").data("ejTab");   
           var selectedTab = 0;   
           if (e.model.prefixIcon == "e-icon e-rarrowright")   
               selectedTab = ((tabObj.model.selectedItemIndex + 1) < tabObj.items.length) ? tabObj.model.selectedItemIndex + 1 : 0;   
           else selectedTab = ((tabObj.model.selectedItemIndex - 1) < 0) ? tabObj.items.length - 1 : tabObj.model.selectedItemIndex - 1;   
           tabObj.showItem(selectedTab);   
       }   
</code>   
   
You can get current selected tab item using model.selectedItemIndex. If you want to select a tab item, use showItem public method. It requires Tab index.    
   
Please find the code snippet for close tab:   
function Submit(e)   
       {   
        debugger   
           var tabObj = $("#StaticTab").data("ejTab");   
        // you can hide individual tab item using hideItem method   
          tabObj.hideItem(tabObj.model.selectedItemIndex);   
           // you can remove individual tab item using removeItem method   
          tabObj.removeItem(tabObj.model.selectedItemIndex);   
           // you can hide whole tab using hide method   
           tabObj.hide();   
           // you can destroy the tab using destroy method   
           tabObj.destroy();   
           // you can disable the tab using disable method   
           tabObj.disable();   
   
       }   
   
   
I also seem unable to render a Button in one of my. cshtml files (Views/Tab/QuickListTabContent.cshtml).   
In partial view render, you need to include a ScriptManager for normal mode because the control cannot find a script initialization in partial view. So, please include ScriptManager after that control initialization in partial view page.   
   
Please refer to the help link for partial rendering in normal mode:   
  
   
   
    
Regards,         
Karthikeyan V.   



MA Mariszka January 9, 2017 10:34 PM UTC

Thank you for your reply. I am still unable to render buttons in Partial Views (see tabs in "5. Syncfusion Tab Loaded from Partial View") and when I follow the example you provide the click on Next button in the first tab of "3. Syncfusion Static Tab" takes me to the 2nd tab of the "3. Syncfusion Static Tab" but click on Next or Previous of any other tab there for some reason changes selected tab of "5. Syncfusion Tab Loaded from Partial View" instead. Clicking on any buttons in "5. Syncfusion Tab Loaded from Partial View" does nothing.
What I need is Next/Previous buttons of "5. Syncfusion Tab Loaded from Partial View" control back and forth navigation within this tab and Next/Previous buttons of "3. Syncfusion Static Tab" control back and forth navigation within this tab. Please help.


Attachment: MinimalWizard_(2)_cd1976f1.zip


MA Mariszka January 9, 2017 11:21 PM UTC

I believe I got navigation in "3. Syncfusion Static Tab" resolved, but I still fail to render buttons or navigate using them in Partial Views ( "5. Syncfusion Tab Loaded from Partial View")


KV Karthikeyan Viswanathan Syncfusion Team January 10, 2017 10:43 AM UTC

Hi Marina Brukhovetsky,    
  
Thanks for your update.        
        
In partial view, Button control ID should be given in a unique one. But, we can see that you have used the same ID in 3 Tab buttons. Due to this issue, has been raised. Can you please change the ID for buttons in partial view page?      
We have change a sample as workable one.  Please ensure with the below sample.  
     
      
Regards,           
Karthikeyan V.     



MA Mariszka January 10, 2017 06:16 PM UTC

Thank you for your help! I am getting almost the result I want. I did try your suggestion for hiding the tab:
 function NavigateEvent(e)
 {
  var tab = $("#StaticTab").data("ejTab");
  var selectedTabIndex = 0;
  if (e.model.text == "Submit")
  {
     tab.hide();
  }
}
I expected the entire tab to be hidden, and it is, with exception of images associated with buttons of the currently selected tab:

@helper ApprovalsTabContent()

{

<h5>Work Order Approvals</h5>

<p>Approvals is a Work Order Wizard Fifth Tab.</p>

<p>

@Html.EJ().Button("PreviousA").Text("Previous").ShowRoundedCorner(true).CssClass("customLightBlue").ContentType(ContentType.TextAndImage).PrefixIcon("e-icon e-rarrowleft").ImagePosition(ImagePosition.ImageLeft).ClientSideEvents(e => e.Click("NavigateEvent"))

@Html.EJ().Button("CloseA").Text("Submit").ShowRoundedCorner(true).CssClass("customCss5").ContentType(ContentType.TextAndImage).PrefixIcon("e-icon e-righttick").ImagePosition(ImagePosition.ImageRight).Type(ButtonType.Submit).ClientSideEvents(e => e.Click("NavigateEvent"))

</p>

}

The icons e-righttick and e-rarrowleft are still visible; why would that be?


MA Mariszka January 10, 2017 09:54 PM UTC

How can I disable individual pages of Tab control and enable them programmatically? I  have a function that is called upon a click on a button in the tab control, and I would like to use button ID to enable/disable another page in the tab control.
What I have:
<div id="Static">
 <h2>1. Static Tab</h2>
 @{Html.EJ().Tab("StaticTab").Items(data =>
 {
    data.Add().ID("StaticTabQuickList").Text("Quick List").ContentTemplate(@<div id="StaticQuickListTab">@QuickListTabContent()</div>);
    data.Add().ID("StaticTabParts").Text("Parts").ContentTemplate(@<div id="StaticPartsTab">@PartsTabContent()</div>);
    data.Add().ID("StaticTabLabor").Text("Labor").ContentTemplate(@<div id="StaticLaborTab">@LaborTabContent()</div>);
 }).Render();}
</div>

@helper QuickListTabContent()
{
 <h5>Work Order Quick List</h5>
 <p>Work Order Quick List is a Work Order Wizard First Tab.</p>
 <p>@Html.EJ().Button("NextQ").Text("Next").ShowRoundedCorner(true).CssClass("customGreen").ContentType(ContentType.TextAndImage).PrefixIcon("e-icon e-rarrowright").ImagePosition(ImagePosition.ImageRight).ClientSideEvents(e => e.Click("StaticNavigate"))</p>
}
function StaticNavigate(e)
{
   var tab = $("#StaticTab").data("ejTab");
   var index = 0;
   switch (e.target.id)
   {
    case "NextP":
     // enable #StaticTabParts"

Attachment: WizardPrototype(3)_8d02e6ec.zip


KV Karthikeyan Viswanathan Syncfusion Team January 11, 2017 09:10 AM UTC

Hi Marina,       
     
Thanks for your update.           
           
Yes, you can disable individual items of Tab control and enable them programmatically by using enabledItemIndex and disabledItemIndex properties in Tab control.   
  
Please refer to the below code snippet to dynamically enable and disable tab items   
  
<code>   
   
@{Html.EJ().Tab("StaticTab").DisabledItemIndex(new List<int> {1,2,3,4}).Items(data =>   
            {   
            data.Add().ID("StaticTabQuickList").Text("Quick List").ContentTemplate(@<div id="StaticQuickListTab">@QuickListTabContent()</div>);   
                           data.Add().ID("StaticTabParts").Text("Parts").ContentTemplate(@<divid="StaticPartsTab">@PartsTabContent()</div>);   
                           data.Add().ID("StaticTabLabor").Text("Labor").ContentTemplate(@<divid="StaticLaborTab">@LaborTabContent()</div>);   
                           data.Add().ID("StaticTabDescription").Text("Description").ContentTemplate(@<divid="StaticDescriptionTab">@DescriptionTabContent()</div>);   
                           data.Add().ID("StaticTabApprovals").Text("Approvals").ContentTemplate(@<divid="StaticApprovalsTab">@ApprovalsTabContent()</div>);   
                     }).Render();   
              }   
   
function StaticNavigate(e)   
              {   
                     var tab = $("#StaticTab").data("ejTab");   
                     var arrindex = [0, 1, 2, 3, 4];   
                     var index = 0;   
                        
                     if (e.model.text == "Next")   
                     {   
                         tab.option({ "enabledItemIndex": [tab.model.selectedItemIndex + 1] });   
                           index = tab.model.selectedItemIndex + 1 < tab.items.length ? tab.model.selectedItemIndex + 1 : 0;   
                           tab.showItem(index);   
                           arrindex.splice(arrindex.indexOf(tab.model.selectedItemIndex), 1);   
                           tab.option({ "disabledItemIndex": arrindex });   
                     }   
                     else if (e.model.text == "Previous")   
                     {   
                         tab.option({ "enabledItemIndex": [tab.model.selectedItemIndex - 1] });   
                         index = tab.model.selectedItemIndex - 1 < 0 ? tab.items.length - 1 : tab.model.selectedItemIndex - 1;   
                         tab.showItem(index);   
                        arrindex.splice(arrindex.indexOf(tab.model.selectedItemIndex), 1);   
                         tab.option({ "disabledItemIndex": arrindex });   
                     }   
                     else if (e.model.text == "Submit")   
                     {   
                           tab.disable();   
                     }   
              }   
   
   
</code>   
  
   
   
We have modified a sample as per your scenario and you can refer to it in the below link:     
  
Refer to the client side properties and methods for Tab control: https://help.syncfusion.com/api/js/ejtab#members:disableditemindex     
        
        
Regards,              
Karthikeyan V.    



MA Mariszka January 11, 2017 09:53 PM UTC

How do add a new tab as a result of a button click? The help page says that I can "Add Tab dynamically: New Tab items can be added and removed at run time."
I have a button:

@Html.EJ().Button("Done").Text("Done").Size(ButtonSize.Medium).ShowRoundedCorner(true).Type(ButtonType.Reset).ClientSideEvents(e => e.Click("Done"))

 I would like Done function to open a new tab, BoodStrap.cshtml, see example attached.

Attachment: WizardPrototype_6473c8bc.zip


KV Karthikeyan Viswanathan Syncfusion Team January 12, 2017 10:00 AM UTC

Hi Marina Brukhovetsky,   
  
Thanks for your update.   
  
As per your request, We have prepared a custom sample by adding new tab and new tab items dynamically. Please find the below code snippet:    
     
<code>   
 function Done(e, ui) 
              { 
            // New tab added 
                  $(e.target).before($("<div id='BreadcrumbTab'><ul>" + 
            "<li><a rel='nofollow' href='#BreadcrumbTabExample'>Bootstrap Breadcrumb Tab</a></li></ul>" + 
        "<div id='BreadcrumbTabExample'>" + 
            "<div>" + 
                                         "<p>The .breadcrumb class indicates the current page's location within a navigational hierarchy:</p>" + 
                                         "<ol class='breadcrumb'>" + 
                                                "<li class='active'>Quick List</li>" + 
                                                "<li><a rel='nofollow' href='#'>Parts</a></li>" + 
                                                "<li><a rel='nofollow' href='#'>Labor</a></li>" + 
                                                "<li><a rel='nofollow' href='#'>Description</a></li>" + 
                                                "<li><a rel='nofollow' href='#'>Approvals</a></li>" + 
                                         "</ol>" + 
                                         "<p>" + 
                                                "<a class='btn btn-info disabled' rel='nofollow' href='https://www.asp.net/'>&laquo; Previous</a>" + 
                                                "<a class='btn btn-default' rel='nofollow' href='https://www.asp.net/'>Close</a>" + 
                                                "<a class='btn btn-success' rel='nofollow' href='https://www.asp.net/'>Next &raquo;</a>" + 
                  "</p>" + 
                                         "<p></p>" + 
                                         "<hr style='width: 100%; color: cornflowerblue; height: 2px; background-color:#a1a1a1 !important; border-color : transparent;' />" + 
                                         "<div class='btn-group-vertical alighcenter btn-group-lg'>" + 
                                                "<a class='btn btn-success disabled' rel='nofollow' href='https://www.asp.net/'>Approve Work Order</a>" + 
                      "<a class='btn btn-success disabled' rel='nofollow' href='https://www.asp.net/'>Close Work Order</a>" + 
                                         "</div>" + 
                                  "</div>" + 
        "</div></div><br/><br/>").ejTab()); 
 
                  //New Tab items added 
 
                  $("#BreadcrumbTab").append("<div id='new'> The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also includes a command-line VB.NET compiler. The most recent version is VB 2012, which was released on August 15, 2012.</div>"); 
                  $("#BreadcrumbTab").ejTab("addItem", "#new", "New Item", 1); 
              } 
  
</code>   
   
 
 
  
Regards,   
Karthikeyan V.  


MA Mariszka January 12, 2017 04:01 PM UTC

Thank you again, but your answer while helpful does not achieve a goal I have. Assuming I already have a view (BootStrap.cshtml) in my Views folder, I would like to open it in the second tab in addition to Main.cshtml, as a result of clicking Done button.


KV Karthikeyan Viswanathan Syncfusion Team January 13, 2017 04:36 AM UTC

Hi Marina Brukhovetsky,    
   
Thanks for your update.    
   
As per your request, We have prepared a custom sample by adding new tab within bootstrap view page dynamically. Please find the below code snippet:     
      
<code>    
 function Done(e, ui) 
              { 
                  var url = "/Tab/BootStrap"; 
                  $.get(url, null, function (data) { 
                      $(e.target).before(data); 
                  }); 
              }   
</code>    
    
  
   
Regards,    
Karthikeyan V.   



MA Mariszka January 13, 2017 03:46 PM UTC

I tried to run the example you provided, but I get an exception at this line:

function Done(e, ui)
{
 var url = "/Tab/BootStrap";
 $.get(url, null, function (data)
 {
     $(e.target).before(data);
 });
}



PO Prince Oliver Syncfusion Team January 16, 2017 12:37 PM UTC

Hi Marina,   
  
Thanks for your update.   
  
We are unable to reproduce the issue reported at our end, kindly refer to the below attached video. Please ensure the sample at your end and provide additional information on issue along with replication procedures.   
  
  
Regards,   
Prince   



MA Mariszka January 17, 2017 04:56 PM UTC

Hi! The code you suggested for the function Done(e, ui) throws error every time on the project that I received from you in zip.file.
I get



KV Karthikeyan Viswanathan Syncfusion Team January 19, 2017 06:34 AM UTC

Hi Marina Brukhovetsky,     
    
Sorry for this inconvenience caused. 
    
Reported issue reproduced in IE browsers while return whole view html and append into a dynamic script generator. We resolved this problem in your custom sample. Please try the below code snippet to resolve this reported issue:      
       
<code>     
//Tabcontroller.cs 
 public ActionResult BootStrap() 
              { 
                     return PartialView("BootStrap"); 
              } 
</code>     
     
   
    
Regards,     
Karthikeyan V.  


Loader.
Live Chat Icon For mobile
Up arrow icon