Tengo este código que funcionaba antes de actualizar mi versión de Kendo. Lo que estoy tratando de hacer es, dependiendo de la opción de pestaña seleccionada, ejecutar algún otro código, esto es lo que tengo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script></head> <body> <div id="tabs1"> <ul> <li id="tabs1-user" style="display:none;">Bullets</li> <li id="tabs1-superUser">Features</li> <li id="tabs1-details">Details</li> <li id="tabs1-dashboard">Info</li> </ul> </div> <script> $(document).ready(function () { setTabs(); }); function setTabs() { var t1 = $("#tabs1").kendoTabStrip({ animation: { open: { duration: 0, effects: "fadeIn" }, close: { duration: 0, effects: "fadeOut" } }, select: function (e) { console.log(e); if (e && e.item) { switch (e.item.id) { case 'tabs1-user': break; case 'tabs1-details': getDetails(); break; } } } }); t1.select(0); $("#tabs1").show(); } function getDetails() { console.log('calling method to retrieve details...'); } </script> </body> </html>También aquí hay un DOJO
Como puede ver, espero enviar el Id tabs1-details cuando hago clic en la pestaña Detalles, pero lo que obtengo es tabs1-tab-3 .
¿Cómo puedo solucionar este problema? ¿Necesito definir el nombre de las pestañas en otro lugar?
Parece que Kendo Tabstrip anula la ID que creaste. En este caso, mi sugerencia sería utilizar el atributo data . Algo así como data-id . Ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script></head> <body> <div id="tabs1"> <ul> <li data-id="tabs1-user" style="display:none;">Bullets</li> <li data-id="tabs1-superUser">Features</li> <li data-id="tabs1-details">Details</li> <li data-id="tabs1-dashboard">Info</li> </ul> </div> <script> $(document).ready(function () { setTabs(); }); function setTabs() { var t1 = $("#tabs1").kendoTabStrip({ animation: { open: { duration: 0, effects: "fadeIn" }, close: { duration: 0, effects: "fadeOut" } }, select: function (e) { console.log(e); if (e && e.item) { switch ($(e.item).attr('data-id')) { case 'tabs1-user': break; case 'tabs1-details': getDetails(); break; } } } }); t1.select(0); $("#tabs1").show(); } function getDetails() { console.log('calling method to retrieve details...'); } </script> </body> </html>Con el código anterior, cuando haga clic en Detalles, se imprimirá "método de llamada para recuperar detalles..." en el registro de la consola.