Hello,
We are using the new UI and trying to reproduce something we did on the previous version:
Basically, we were using bootstrap tabs on a list page. Say for example, we have three sections A, B and C. These sections are list of records of different objects.
This three sections would go under Tabs T1, T2, T3. It was mainly DOM manipulation with bootstrap.
Now to achieve the same with the new UI, we are trying to use KendoStrip Tabs.
We are creating the three li (for the three tabs) , then three divs (for the sections under the Tabs), in which we are appending our sections. And because we are hiding the other non active sections, when we display them under their Tabs, they are not displaying properly.
The widths of the columns in the grid are shrinking to zero, so the columns are not showing.
Why is hiding one section affecting the width of the columns when the section is shown back, (appended to the right div..) ?
By resizing these columns we can get this working, but this is not very proper,. Can you give us some help on this please?
Cheers
Meryem
In the meanwhile, a possible workaround would be to get a handle on the grid and invoke read on the dataSource. Currently the column width rendering is being handled in the grid's dataBound event and if the grid is not visible when the data is being bound, the problem occurs. This is what we plan to fix.
Possible code... (assumes one grid on the page/tab, change selector accordingly if you have more grids on page/tab)
$('.k-grid').data('kendoGrid').dataSource.read();
This call should be made after the grid is visible
Hello,
We are using the new UI and trying to reproduce something we did on the previous version:
Basically, we were using bootstrap tabs on a list page. Say for example, we have three sections A, B and C. These sections are list of records of different objects.
This three sections would go under Tabs T1, T2, T3. It was mainly DOM manipulation with bootstrap.
Now to achieve the same with the new UI, we are trying to use KendoStrip Tabs.
We are creating the three li (for the three tabs) , then three divs (for the sections under the Tabs), in which we are appending our sections. And because we are hiding the other non active sections, when we display them under their Tabs, they are not displaying properly.
The widths of the columns in the grid are shrinking to zero, so the columns are not showing.
Why is hiding one section affecting the width of the columns when the section is shown back, (appended to the right div..) ?
By resizing these columns we can get this working, but this is not very proper,. Can you give us some help on this please?
Cheers
Meryem
Flag this post as spam/abuse.
We have a bug on the issue from a different scenario that is going to be fixed in 4.0.2 release. We will keep in mind your scenario while fixing this. Watch this space for info on how to address your case after that fix is made.
In the meanwhile, a possible workaround would be to get a handle on the grid and invoke read on the dataSource. Currently the column width rendering is being handled in the grid's dataBound event and if the grid is not visible when the data is being bound, the problem occurs. This is what we plan to fix.
Possible code... (assumes one grid on the page/tab, change selector accordingly if you have more grids on page/tab)
$('.k-grid').data('kendoGrid').dataSource.read();
This call should be made after the grid is visible
Hello,
Thank you all for replying.
Here is my code :
<div id="tabstrip">
<ul>
<li class="k-state-active">
Modules
</li>
<li>
KB Categories
</li>
<li >
Section Templates
</li>
</ul>
<div>
<div id="replaceMe1">
</div>
</div>
<div>
<div id="replaceMe2">
</div>
</div>
<div>
<div id="replaceMe3">
</div>
</div>
</div>
<script>
$(document).ready(function() {
var sec1 = $("#rbi_S_566063");
var sec2 = $("#rbi_S_566104");
var sec3 = $("#rbi_S_589610");
// hide all the sections except the active one
sec2.attr("style", "display: none;");
sec3.attr("style", "display: none;");
// append the active section to its Tab
$("#replaceMe1").append(sec1);
// append each section to its Tab only when the Tab gets Active
function onActivate(e) {
var tab = $(e.item).attr("aria-controls");
var toReplace = $("#" + tab.toString()).find('div').attr('id');
if(toReplace === "replaceMe1"){
$("#replaceMe1").append(sec1);
}
if(toReplace === "replaceMe2"){
sec2.removeAttr("style");
$("#replaceMe2").append(sec2);
$('#611516').data('kendoGrid').dataSource.read(); // 611516 is the id of the k-grid in this section
}
if(toReplace === "replaceMe3"){
sec3.removeAttr("style");
$("#replaceMe3").append(sec3);
$('.k-grid').data('kendoGrid').dataSource.read();
}
}
$("#tabstrip").kendoTabStrip({
activate: onActivate,
animation: {
open: {
effects: "fadeIn"
}
}
});
});
</script>
Santosh Patel, I tried adding the line you suggested (see the two red lines in the code) :
$('.k-grid').data('kendoGrid').dataSource.read();
But it is not working. Nothing is changing from the previous behavior I was having. I also tried grid.refresh(), but same it is not working.
Can you give it a try please using the code I provided below ? Thank you.
Thierry Ciot, I would be interested in seeing the events of sectionExpanded and sectionCollapsed.
Is this available now in 4.0.1.0? because I tried your code and it is not logging anything. Probably the events are not implemented yet.
Thank you all,
Meryem
Hi again,
Just realized that Reading the grid is not working because obviously it is not visible yet!
How do I wait until the grid is made visible ?
Thanks
Meryem