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.
|
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:
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:
| ||
|
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:
|
@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?|
<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> |
@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.|
<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/'>« 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 »</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> |
|
<code>
function Done(e, ui)
{
var url = "/Tab/BootStrap";
$.get(url, null, function (data) {
$(e.target).before(data);
});
}
</code> |
function Done(e, ui)
{
var url = "/Tab/BootStrap";
$.get(url, null, function (data)
{
$(e.target).before(data);
});
}
|
<code>
//Tabcontroller.cs
public ActionResult BootStrap()
{
return PartialView("BootStrap");
}
</code> |
