This is a migrated thread and some comments may be shown as answers.

[Solved] Last selected tab

10 Answers 290 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

10 Answers, 1 is accepted

answered on 12 May 2010, 06:38 AM

Hello Shane Milton,

This could be doable but I don't think it would be nice from UX point of view. The whole page has to be loaded and then the tabstrip will update its selected page. I presume a noticeable flicker would appear if this were the implementation. I think the supported way (SelectedIndex(index)) is way better to select particular tab. If I were to implement this I would use the grid binding configuration in order to pass the tab index in which the grid is. Then I would use this parameter to select the tab.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 12 May 2010, 06:48 AM

I'm not sure the grid binding scenario you mention is feasible. My grids are in partial views where I'm just rendering the partial inside of the tab. This allows me to reuse the grids all over, whether in a tab or not.

                    <!-- other fields of my Business object here for a Detail view of it -->         
                <div class="display-label">AllowedRiskPeriod</div>         
                <div class="display-field">         
                    <%: Model.DetailedBusiness.AllowedRiskPeriod%></div>         
                <div class="display-label">CreditValidPeriod</div>         
                <div class="display-field">         
                    <%: Model.DetailedBusiness.CreditValidPeriod%></div>         
            </fieldset>         
            <fieldset><legend>Additional Information</legend>         
                <%         
                    Html.Telerik().TabStrip()         
                        .Name("BusinessDetailsTabs")         
                        .Items(parent =>         
                                   {         
                                       parent.Add()         
                                           .Text("Facilities")         
                                           .Content(() => Html.RenderPartial("~/Views/Shared/DisplayTemplates/BusinessRelations/FacilityGrid.ascx",         
                                                                             new EndUserFacilitiesViewModel {Entities = Model.Facilities}));         
                     
                                       parent.Add()         
                                           .Text("Accounts")         
                                           .Content(() => Html.RenderPartial("~/Views/Shared/DisplayTemplates/BusinessRelations/AccountGrid.ascx",         
                                                                             new AccountsViewModel {Entities = Model.Accounts}));         
                                   })         
                        .Render();         
                %>         
            </fieldset>         
                     

Here's one of the partial views in the tab, which is used in other places as well (sometimes as essentially the only thing in a view):

                    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AccountsViewModel>" %>         
            <%         
                const int pageSize = 25; %>         
            <%         
                Html.Telerik().Grid(Model.Entities == null ? null : Model.Entities.Data)         
                    .Name("AccountGrid")         
                    .Columns(c =>         
                                 {         
                                     c.Template(x =>         
                                        {%><a href="Account/Details?id=<%=x.oid%>">View</a><%});         
                                     c.Bound(x => x.oid).Title("ID");         
                                     c.Bound(x => x.Name);         
                                     c.Bound(x => x.EndUserFacility.FacilityBusiness.Name).Title("Business");         
                                     c.Bound(x => x.EndUserFacility.FacilityBusiness.Address.City.Name).Title("City");         
                                     c.Bound(x => x.EndUserFacility.FacilityBusiness.Address.ZipCode.State.Abbreviation).Title("State");         
                                     c.Bound(x => x.EndUserFacility.FacilityBusiness.Address.ZipCode.ZipCodeValue).Title("Zip");         
                                     c.Bound(x => x.EnergyUnit.AbbreviatedName).Title("Energy Type");         
                                     c.Bound(x => x.LDCAccountNumber);         
                                     c.Bound(x => x.oid).Title("Status - UNKNOWN???");         
                                     c.Bound(x => x.Commodity.CommodityName);         
                                     c.Bound(x => x.oid).Title("LDC - UNKNOWN???");         
                                     c.Bound(x => x.LDCDeliveryArea.Name).Title("Delivery Area");         
                                 })         
                        .Groupable(x => x.Enabled(false))         
                        .Scrollable(scrolling => scrolling.Enabled(false))         
                        .Sortable(sorting => sorting         
                                                 .Enabled(true)         
                                                 .SortMode(GridSortMode.MultipleColumn)         
                                                 .OrderBy(orderings => orderings.Add(x => x.Name))         
                        )         
                        .Pageable(paging => paging         
                                                .PageSize(pageSize)         
                                                .Style(GridPagerStyles.NextPreviousAndNumeric)         
                                                .Position(GridPagerPosition.Bottom)         
                                                .Total((int)(Model.Entities == null ? 0 : Model.Entities.UnpartialTotalCount))         
                        )         
                        .Filterable(filtering => filtering.Enabled(true))         
                        .Footer(true)         
                        .EnableCustomBinding(true)         
                        .Render();         
                                        %>         

I'm not sure how I would go about this with such a setup.

answered on 12 May 2010, 09:17 AM

Hello Shane Milton,

I implemented a hacky JavaScript solution. It is by no means pretty or complete :) Here is the code:

<%= Html.Telerik().TabStrip()
                  .Name("TabStrip")
                  .Items(items =>
                   {
                      // omitted for brevity
                   });
                  .ClientEvents(events => events.OnSelect("onSelect"))
    %>
    <script type="text/javascript">
    function onSelect(e) {
        // get the hash for the current tab
        var hash = $(e.item).find('.t-link').attr('href');
        // update the browser hash
        location.hash = hash;

        $(hash) // find the corresponding content element for the tab. Conveniently it has the same id as the hash :)
                .find('a[href]')
                .each(function() {
                    // Remove any previously set hashes
                    this.href = this.href.replace(/#.*/, '');
                    // Append the current hash to all anchors within the tab content
                    this.href += hash;
                })
                .end()
                .find('.t-grid').each(function() {
                    var grid = $(this).data('tGrid');
                    // Update the 'urlFormat' property of all grids. It is used for "anchorless" server binding such as filtering and grouping
                    grid.urlFormat = grid.urlFormat.replace(/#.*/, '');
                    grid.urlFormat += hash;
                });
    }

    function selectTab() {
        var hash = location.hash;
        if (hash) {
            var tabStrip = $('#TabStrip').data('tTabStrip');
            // find the corresponding tab
            var item = $('#TabStrip .t-item:has(.t-link[href="' + hash +'"])')[0];
            // select it if found and update its children
            if (item ) {
                tabStrip.select(item);
                onSelect({item:item});
            }
        }
    }
    </script>

    <% Html.Telerik().ScriptRegistrar().OnDocumentReady("selectTab();"); %>

The idea is to use hashes and update all links and grids which reside within the selected tab. I may have missed some cases but it seems to work. It also scrolls the page to the clicked link but that's best we can get now.

Regards,
Atanas Korchev
the Telerik team

answered on 07 Dec 2010, 10:58 PM

Here is our final fix that we've been using for a while that works well (obviously based on the previously-suggested code by Atanas):
ASCX File:

<%

Html.Telerik().TabStrip()

.Name("AccountDetailsTabs")

.Items(CODE REMOVED FOR SIMPLICITY)

.ClientEvents(events => events.OnSelect("onSelect"))

.Render();

%>

<script type="text/javascript">

function onSelect(e) {

EG.Mvc.Controls.TabStrip.onSelect(e);

}

function selectTab(tabStripID) {

EG.Mvc.Controls.TabStrip.selectTab(tabStripID);

}

</script>

<% Html.Telerik().ScriptRegistrar().OnDocumentReady("selectTab('AccountDetailsTabs');");%>

JS File:

if (!EG || EG == undefined) { var EG = new Object(); }

if (!EG.Mvc || EG.Mvc == undefined) { EG.Mvc = new Object(); }

if (!EG.Mvc.Controls || EG.Mvc.Controls == undefined) { EG.Mvc.Controls = new Object(); }

EG.Mvc.Controls.TabStrip = {

onSelect: function (e) {

// get the hash for the current tab

var hash = $(e.item).find('.t-link').attr('href');

// update the browser hash

location.hash = hash;

var currentTabValue = document.getElementById("CurrentTab");

if (currentTabValue != null) {

currentTabValue.value = hash.replace(/#/, "");

}

$(hash) // find the corresponding content element for the tab. Conveniently it has the same id as the hash :)

.find('a[href]')

.each(function () {

// Remove any previously set hashes

this.href = this.href.replace(/#.*/, '');

if (this.href.indexOf(location.pathname) >= 0) {

}

else {

// Append the current hash to all anchors within the tab content

this.href += hash;

}

})

.end()

.find('.t-grid').each(function () {

var grid = $(this).data('tGrid');

// Update the 'urlFormat' property of all grids. It is used for "anchorless" server binding such as filtering and grouping

if (grid != null && grid.urlFormat != undefined) {

grid.urlFormat = grid.urlFormat.replace(/#.*/, '');

grid.urlFormat += hash;

}

var $header = $(this).find('.t-grid-header');

$header.find('a[href]').each(function () {

// Remove any previously set hashes

this.href = this.href.replace(/#.*/, '');

// Append the current hash to all anchors within the tab content

this.href += hash;

});

var $footer = $(this).find('.t-grid-footer');

$footer.find('a[href]').each(function () {

// Remove any previously set hashes

this.href = this.href.replace(/#.*/, '');

// Append the current hash to all anchors within the tab content

this.href += hash;

});

}

,

selectTab: function (tabStripID) {

var currentTabQSItem = EG.Mvc.QueryString.getValue("CurrentTab");

if (currentTabQSItem && currentTabQSItem.length > 0) {

location.hash = currentTabQSItem;

}

var hash = location.hash;

if (hash) {

var tabStrip = $('#' + tabStripID).data('tTabStrip');

// find the corresponding tab

var item = $('#' + tabStripID + ' .t-item:has(.t-link[href="' + hash + '"])')[0];

// select it if found and update its children

if (item) {

tabStrip.select(item);

EG.Mvc.Controls.TabStrip.onSelect({ item: item });

}