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

Cancel tab selection

9 Answers 315 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Andrés
Top achievements
Rank 1
Andrés asked on 05 Mar 2012, 05:05 AM
Hi everybody, congrats on the new beta!
I'm trying to figure out if it's possible to cancel a tab selection, so when a user clicks a tab, if say the data is invalid, i force the user to remain in the same tab. Is this achievable in the current version? If not, is it planned for a future release?

Thanks
Andrés

9 Answers, 1 is accepted

Sort by
0
Accepted
Petyo
Telerik team
answered on 05 Mar 2012, 09:10 AM
Hi,

Thanks for the kind words. Unfortunately, this functionality  is not possible with the current version. However, it seems to be quite easy to implement. I am going to log this feature for the official release. 

Kind regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrés
Top achievements
Rank 1
answered on 07 Mar 2012, 03:39 PM
Thanks for your reply Petyo!
FWIW, here's how I'm doing it right now, but it would be great to have a way to do it through the api:

$(document).ready(function () {
$(".k-tabstrip-items .k-item .k-link").click(function (s, e) {
return canSwitchTab();
});
});


Cheers,
Andrés
0
Kamen Bundev
Telerik team
answered on 08 Mar 2012, 09:53 AM
Hi Andrés,

Disregard the previous answer - it was intended for the Kendo Mobile TabStrip, and sorry for the mishap. Actually Kendo UI Web TabStrip does support canceling tab selection. You only need to attach an event handler to the select event and then prevent it with e.preventDefault(), like this:
function onSelect(e) {
    e.preventDefault();
}

$("#tabstrip").kendoTabStrip({
    select: onSelect
});


All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mauro
Top achievements
Rank 1
answered on 21 Jun 2012, 10:02 AM
How can I start with no tab selected?

Thanks
0
Raul
Top achievements
Rank 1
answered on 28 Feb 2017, 10:43 AM

Hi Kamen,

We have a dynamic tab strip and in every tab we have a grid inline cell. See attached file.

Product owner of the application wants the next behaviour :

        When the user leaves one tab and grid is pending to save the changes ... the application should show a warning saying something like this : "You have pending changes to save".

It does not matter if the application after this warning shows the tab chosen.

For this solution, we have enabled the select event in the definition of tabstrip:

<div class="grid-container-fluid" style="overflow: scroll; padding-top: 10px;">
@(Html.Kendo().TabStrip().Name("AuditSections").Items(tabstrip =>
{
tabstrip.Add().Text("Summary GC_FORM0606").Selected(true).Content(@Html.Partial("_SummaryTab", Model).ToHtmlString());
tabstrip.Add().Text("Finding Report").Content(@Html.Partial("_ReportTab", Model).ToHtmlString());
tabstrip.Add().Text("1. Supplier Info.").Content(@Html.Partial("_SupplierInfo", Model).ToHtmlString());
if (Model.Sections != null)
{
foreach (var section in Model.Sections)
{
Model.CurrentSection = section;
tabstrip.Add().Text(section.SectionName + " " + section.LocalName).Content(@Html.Partial("_DynamicTab3ToN", Model).ToHtmlString());
}
}
tabstrip.Add().Text("Supplier Pics.").Content(@Html.Partial("_SupplierPicsTab", Model).ToHtmlString());
}).Events(e => e.Select("tab_Select")))
</div>

And this is the script code that we are using in order to know if the grid has pending changes to save:

<script type="text/javascript">
    function tab_Select(e) {

        // Here the code to obtain the datasource of the grid

        var newDatasource = $("#Section455Grid").data("kendoGrid").datasource;
        if (doesDataSourceHaveChanges(newDatasource))
        {
              alert("Pending Changes");
        }
     }
            
     function doesDataSourceHaveChanges(ds)
     {
          var dirty = false;
          $.each(ds._data, function ()
          {
               if (this.dirty == true)
               {
                   dirty = true;
                }
          });
         if (ds._destroyed.length > 0) dirty = true;
                return dirty;
     }
</script>

 

Could you please to help us and tell us how we get the name of the grid that belong to the previous tab?

We have found in the properties of the event the name of the previosu tab:

e.sender._current() ---> innerHtml property contains the name of the previous tab.

Best Regards.

Raúl.

 

0
Veselin Tsvetanov
Telerik team
answered on 03 Mar 2017, 08:10 AM
Hi Raul,

In the TabStrip select event, you could get the Id (the name) of the Grid that is placed on the still active (previous) tab in the following way:
var tabContent = $('.k-tabstrip .k-content.k-state-active');
var gridElement = tabContent.find('.k-grid');
var gridName = gridElement.attr('id');

Regards,
Veselin Tsvetanov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Raul
Top achievements
Rank 1
answered on 03 Mar 2017, 12:32 PM

Hi Veselin,

Thank you so much for your help. Your proposed solution solved the issue.

This is the code :

            var tabContent = $('.k-tabstrip .k-content.k-state-active');
            var gridElement = tabContent.find('.k-grid');
            var gridName = gridElement.attr('id');
            var ds = $("#" + gridName).data("kendoGrid").dataSource;
            if (doesDataSourceHaveChanges(ds))
            {
                infoWindow.title("Warning");
                $("#infoWindow > div.info-container > div.info-message").html("You have pending changes to save in the previous tab.");
                infoWindow.center().open();
                $("#infoWindow > div.info-container > div.k-edit-buttons > a.info-ok").on("click", function () {
                    infoWindow.close();
                });
            }

One more thing ... If I wanted to know the name of the previous tab strip in order to improve the message ... How do I get the name of the previous tabstrip?

Current message : "You have pending changes to save in the previous tab."

New message : "You have pending changes to save in <name of the tabstrip> tab."

 

Best Regards.

Raúl.

0
Veselin Tsvetanov
Telerik team
answered on 06 Mar 2017, 03:01 PM
Hi Raul,

Within the select event, you could get the (previously) selected tab text in the following way:
function onSelect(e) {
    var selectedTab = e.sender.select();
    var selectedTabText = selectedTab.text().trim();
}

Regards,
Veselin Tsvetanov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Raul
Top achievements
Rank 1
answered on 06 Mar 2017, 03:22 PM

Hi Veselin,

Nice.

Thank you.

Best Regards.

Raúl.

Tags
TabStrip
Asked by
Andrés
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Andrés
Top achievements
Rank 1
Kamen Bundev
Telerik team
Mauro
Top achievements
Rank 1
Raul
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or