Cancel tab selection

10 posts, 1 answers
  1. Andrés
    Andrés avatar
    37 posts
    Member since:
    Jun 2011

    Posted 04 Mar 2012 Link to this post

    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
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 05 Mar 2012 Link to this post

    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!
  3. Andrés
    Andrés avatar
    37 posts
    Member since:
    Jun 2011

    Posted 07 Mar 2012 Link to this post

    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 () {

    Cheers,
    Andrés
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 08 Mar 2012 Link to this post

    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!
  5. Mauro
    Mauro avatar
    8 posts
    Member since:
    Feb 2012

    Posted 21 Jun 2012 Link to this post

    How can I start with no tab selected?

    Thanks
  6. Raul
    Raul avatar
    20 posts
    Member since:
    Apr 2016

    Posted 28 Feb in reply to Kamen Bundev Link to this post

    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.

     

  7. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 03 Mar Link to this post

    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.
  8. Raul
    Raul avatar
    20 posts
    Member since:
    Apr 2016

    Posted 03 Mar in reply to Veselin Tsvetanov Link to this post

    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.

  9. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 06 Mar Link to this post

    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.
  10. Raul
    Raul avatar
    20 posts
    Member since:
    Apr 2016

    Posted 06 Mar in reply to Veselin Tsvetanov Link to this post

    Hi Veselin,

    Nice.

    Thank you.

    Best Regards.

    Raúl.

Back to Top