tabstrip selected tab will not show contented until another tab is clicked first.

[Gerald]

REPOSTING HERE AS I BELIEVE I HAVE POSTED THIS IN THE INCORRECT FORUM (Sorry ).

 

Hi, I am new to this, so I apologise if this is a simple question/answer.

I have been asked to "learn while doing" on some code .

at the moment, if a filter is used on a ride, and it return matches, the first row is selected, and that data is then used to help get data for the tab strip.

If the filter returns on rows, the tapstrip still has the data showing for the previous (still selected ? ) row .

 

I have tried

            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
               var tabStrip = $("#details").data("kendoTabStrip");
					
                if (displayedRows.length === 0) {
                    // Display the length of displayed rows for troubleshooting
                    /*                    alert("Number of displayed rows: " + displayedRows.length); // Show in alert for easier visibility*/
                    //var tabStrip = $("#details").data("kendoTabStrip");
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                }
                else {
                }
            });

and this works for the First time it finds length = 0, but if I clear the filter and do a search that has results, or clear the filter and select the first row in #grid, the tabstrip is not updated.

 

please can someone advise what I need in the else clause, as anything gi put in here either doesn't work, or "breaks" the other options grid.binds i have in that sets the default search filter on one column to "contains". 

 

thanks

 

Gerald

 commented on 23 Oct 2024, 11:44 AM 

Update : 

            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
                var tabStrip = $("#details").data("kendoTabStrip");

                if (displayedRows.length === 0) {
                    grid.clearSelection(); // Clear selection if no matches
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                } else {
                    clearTabStrip(); // Clear any previous "No Data" message

                    // Select the first row if there are matches
                    grid.select(displayedRows.first());

                    // Populate TabStrip elements
                    tabStrip.setOptions({
                        animation: { open: { effects: "fadeIn" } },
                        items: [
                            { text: "Connection", contentUrl: "Index", action: function () { location.href = '/Connection'; } },
                            { text: "PMS", contentUrl: "Index", action: function () { location.href = '/PMS'; } },
                            { text: "Corporate", contentUrl: "Index", action: function () { location.href = '/Corporate'; } },
                            { text: "Units", contentUrl: "Index", action: function () { location.href = '/Units'; } },
                            { text: "Version", contentUrl: "Index", action: function () { location.href = '/SoftwareVersion'; } },
                            { text: "Services", contentUrl: "Index", action: function () { location.href = '/Services'; } },
                            { text: "more", contentUrl: "Index", action: function () { location.href = '/Services'; } },
                            { text: "Emails", contentUrl: "Index", action: function () { location.href = '/SMTP'; } },
                            { text: "SMTP", contentUrl: "Index", action: function () { location.href = '/HotelSMTPSettings'; } },
                            { text: "Payments", contentUrl: "Index", action: function () { location.href = '/HotelPayment'; } },
                            { text: "Methods", contentUrl: "Index", action: function () { location.href = '/HotelPaymentMethods'; } },
                            { text: "Pay System", contentUrl: "Index", action: function () { location.href = '/HotelPaymentSystem'; } },
                            { text: "Notes", contentUrl: "Index", action: function () { location.href = '/HotelNotes'; } }
                        ]
                    });
                    tabStrip.reload(); // Reload TabStrip content
                    tabStrip.select(1); // Ensure the second tab (Connection) is selected
                   // tabStrip.select(0); // Ensure the first tab (Connection) is selected
                }
            });

I am almost there with the above changes. i can get the first tab (0) to select, but it renders no data. If I select tab 2 (1) it renders the data. I have tried selecting tab 2,(1) then the 1 (0) tab, but it stays selected on tab 2 . If I click the 1 tab, I see the data. What could I do to resolve this please ? 

Gerald

 commented on 23 Oct 2024, 05:34 PM 

            // Handle dataBound event
            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
                var tabStrip = $("#details").data("kendoTabStrip");

                if (displayedRows.length === 0) {
                    grid.clearSelection(); // Clear selection if no matches
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                } else {
                    clearTabStrip(); // Clear any previous "No Data" message

                    // Select the first row if there are matches
                    grid.select(displayedRows.first());

                    // Populate TabStrip elements
                    tabStrip.setOptions({
                        animation: { open: { effects: "fadeIn" } },
                        items: [
                            { text: "Connection", contentUrl: "Index", action: function () { location.href = '/Connection'; } },
                            { text: "PMS", contentUrl: "Index", action: function () { location.href = '/PMS'; } },
                            { text: "Corporate", contentUrl: "Index", action: function () { location.href = '/Corporate'; } },
                            { text: "Units", contentUrl: "Index", action: function () { location.href = '/Units'; } },
                            { text: "Version", contentUrl: "Index", action: function () { location.href = '/SoftwareVersion'; } },
                            { text: "Services", contentUrl: "Index", action: function () { location.href = '/Services'; } },
                            { text: "Reception", contentUrl: "Index", action: function () { location.href = '/Reception; } },
                            { text: "Emails", contentUrl: "Index", action: function () { location.href = '/SMTP'; } },
                            { text: "SMTP", contentUrl: "Index", action: function () { location.href = '/Settings'; } },
                            { text: "Payments", contentUrl: "Index", action: function () { location.href = '/Payment'; } },
                            { text: "Methods", contentUrl: "Index", action: function () { location.href = '/PaymentMethods'; } },
                            { text: "Pay System", contentUrl: "Index", action: function () { location.href = '/PaymentSystem'; } },
                            { text: "Notes", contentUrl: "Index", action: function () { location.href = '/Notes'; } }
          
                        ]
                    });
                    tabStrip.reload();  // Reload TabStrip content
                    setTimeout(function () {
                        tabStrip.select(1);
                        setTimeout(function () {
                            tabStrip.select(0);
                            tabStrip.reload(); // Reload content of the Connection tab
                        }, 50); // Adding a delay to ensure the tab is correctly reselected
                }, 0);
                }
            });

            // Function to clear the TabStrip
            function clearTabStrip() {
                var tabStrip = $("#details").data("kendoTabStrip");
                tabStrip.contentElements.empty(); // Clear tab content
            }

steps closer. this is now showing the data, but it flips between tab 0 and tab 1  when the filter button ( or Clear button) is clicked. I now need to try and get it so that it always goes to the first tab 

[Gerald]

Update : 

            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
                var tabStrip = $("#details").data("kendoTabStrip");

                if (displayedRows.length === 0) {
                    grid.clearSelection(); // Clear selection if no matches
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                } else {
                    clearTabStrip(); // Clear any previous "No Data" message

                    // Select the first row if there are matches
                    grid.select(displayedRows.first());

                    // Populate TabStrip elements
                    tabStrip.setOptions({
                        animation: { open: { effects: "fadeIn" } },
                        items: [
                            { text: "Connection", contentUrl: "Index", action: function () { location.href = '/Connection'; } },
                            { text: "PMS", contentUrl: "Index", action: function () { location.href = '/PMS'; } },
                            { text: "Corporate", contentUrl: "Index", action: function () { location.href = '/Corporate'; } },
                            { text: "Units", contentUrl: "Index", action: function () { location.href = '/Units'; } },
                            { text: "Version", contentUrl: "Index", action: function () { location.href = '/SoftwareVersion'; } },
                            { text: "Services", contentUrl: "Index", action: function () { location.href = '/Services'; } },
                            { text: "more", contentUrl: "Index", action: function () { location.href = '/Services'; } },
                            { text: "Emails", contentUrl: "Index", action: function () { location.href = '/SMTP'; } },
                            { text: "SMTP", contentUrl: "Index", action: function () { location.href = '/HotelSMTPSettings'; } },
                            { text: "Payments", contentUrl: "Index", action: function () { location.href = '/HotelPayment'; } },
                            { text: "Methods", contentUrl: "Index", action: function () { location.href = '/HotelPaymentMethods'; } },
                            { text: "Pay System", contentUrl: "Index", action: function () { location.href = '/HotelPaymentSystem'; } },
                            { text: "Notes", contentUrl: "Index", action: function () { location.href = '/HotelNotes'; } }
                        ]
                    });
                    tabStrip.reload(); // Reload TabStrip content
                    tabStrip.select(1); // Ensure the second tab (Connection) is selected
                   // tabStrip.select(0); // Ensure the first tab (Connection) is selected
                }
            });

I am almost there with the above changes. i can get the first tab (0) to select, but it renders no data. If I select tab 2 (1) it renders the data. I have tried selecting tab 2,(1) then the 1 (0) tab, but it stays selected on tab 2 . If I click the 1 tab, I see the data. What could I do to resolve this please ? 

[Gerald]

            // Handle dataBound event
            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
                var tabStrip = $("#details").data("kendoTabStrip");

                if (displayedRows.length === 0) {
                    grid.clearSelection(); // Clear selection if no matches
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                } else {
                    clearTabStrip(); // Clear any previous "No Data" message

                    // Select the first row if there are matches
                    grid.select(displayedRows.first());

                    // Populate TabStrip elements
                    tabStrip.setOptions({
                        animation: { open: { effects: "fadeIn" } },
                        items: [
                            { text: "Connection", contentUrl: "Index", action: function () { location.href = '/Connection'; } },
                            { text: "PMS", contentUrl: "Index", action: function () { location.href = '/PMS'; } },
                            { text: "Corporate", contentUrl: "Index", action: function () { location.href = '/Corporate'; } },
                            { text: "Units", contentUrl: "Index", action: function () { location.href = '/Units'; } },
                            { text: "Version", contentUrl: "Index", action: function () { location.href = '/SoftwareVersion'; } },
                            { text: "Services", contentUrl: "Index", action: function () { location.href = '/Services'; } },
                            { text: "Reception", contentUrl: "Index", action: function () { location.href = '/Reception; } },
                            { text: "Emails", contentUrl: "Index", action: function () { location.href = '/SMTP'; } },
                            { text: "SMTP", contentUrl: "Index", action: function () { location.href = '/Settings'; } },
                            { text: "Payments", contentUrl: "Index", action: function () { location.href = '/Payment'; } },
                            { text: "Methods", contentUrl: "Index", action: function () { location.href = '/PaymentMethods'; } },
                            { text: "Pay System", contentUrl: "Index", action: function () { location.href = '/PaymentSystem'; } },
                            { text: "Notes", contentUrl: "Index", action: function () { location.href = '/Notes'; } }
          
                        ]
                    });
                    tabStrip.reload();  // Reload TabStrip content
                    setTimeout(function () {
                        tabStrip.select(1);
                        setTimeout(function () {
                            tabStrip.select(0);
                            tabStrip.reload(); // Reload content of the Connection tab
                        }, 50); // Adding a delay to ensure the tab is correctly reselected
                }, 0);
                }
            });

            // Function to clear the TabStrip
            function clearTabStrip() {
                var tabStrip = $("#details").data("kendoTabStrip");
                tabStrip.contentElements.empty(); // Clear tab content
            }

steps closer. this is now showing the data, but it flips between tab 0 and tab 1  when the filter button ( or Clear button) is clicked. I now need to try and get it so that it always goes to the first tab 

[Gerald]

UPDATE. What I found worked is looking for the tab name, instead of selecting the tab numbers . so : 

                    tabStrip.reload();  // Reload TabStrip content
                    setTimeout(function () {
                        var ConnectionTab = tabStrip.tabGroup.find("li:contains('Connection')");
                        if (ConnectionTab.length > 0) {
                            tabStrip.activateTab(ConnectionTab);
                        }
                    }, 0);

[Gerald]

UPDATE. What I found worked is looking for the tab name, instead of selecting the tab numbers . so : 

                    tabStrip.reload();  // Reload TabStrip content
                    setTimeout(function () {
                        var ConnectionTab = tabStrip.tabGroup.find("li:contains('Connection')");
                        if (ConnectionTab.length > 0) {
                            tabStrip.activateTab(ConnectionTab);
                        }
                    }, 0);