Cancel tab selection

[Andrés]

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

[Petyo]

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

[Andrés]

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

[Kamen Bundev]

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

[Mauro]

How can I start with no tab selected?

Thanks

[Raul]

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.

 

[Veselin Tsvetanov]

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

[Raul]

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.

[Veselin Tsvetanov]

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

[Raul]

Hi Veselin,

Nice.

Thank you.

Best Regards.

Raúl.