CODEWITHSUNDEEP
asp.net-mvc-3kendo-ui
Mateusz Rogulski
Mateusz Rogulski

Reputation: 7455

KendoGrid doesn't work in kendoTabStrip

I'm using kendoTabStrip as is shown on KendoUI Page. In my case in each div I have rendered partial view. In a few of my partial views I have additionaly kendoGrid.

Problem

When I reload page in any tab and go to tab which contain kendoGrid then it do not work correctly. For example: I'm on tab#0 and go for tab#3 which contain kendoGrid with pagination, then pagination is not display. But when I reload it then pagination works fine.

What can I do to my Grids works inside TabStrip?

Any help would be appreciated.

UPDATE

My implementation of tabstrip

    $("#tabStrip").kendoTabStrip({
        animation: { open: { effects: false} },
        select: function (e) {
            document.location.hash = 'tab-' + $(e.item).index();
        }
    });

    var tabStrip = $('#tabStrip').data('kendoTabStrip');
    var tabId = 0;
    var scheduledId = 0;
    if (document.location.hash.match(/tab-/) == 'tab-') {
        tabId = document.location.hash.substr(5);
    }
    if (document.location.hash.match(/scheduled-/) == 'scheduled-') {
        tabId = 1;
        scheduledId = document.location.hash.substr(11);
        editSchedule('/admin/Course/Scheduled/' + scheduledId +  '/Edit/' );

    }
    tabStrip.select(tabStrip.tabGroup.children('li').eq(tabId));

So I need it to make some rewrites from controller.

Upvotes: 2

Views: 4580

Answers (2)

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7455

To fix this problem we must change :

$("#tabStrip").kendoTabStrip({
    animation: { open: { effects: false} },
    select: function (e) {
        document.location.hash = 'tab-' + $(e.item).index();
    }
});

for:

$("#tabStrip").kendoTabStrip({
    animation: { open: { effects: false} },
    select: function (e) {
        document.location.hash = 'tab-' + $(e.item).index();
    },
    activate: function(e) {
        $(e.contentElement).find('.k-state-active [data-role="grid"]').each(function() {
            $(this).data("kendoGrid").refresh();
        });                
    }
});

Event activate is 'Triggered just after a tab is being made visible, but before the end of the animation'. So we must refresh our grids then becouse js counts widths of hidden elements wrong.

Upvotes: 2

Daniel
Daniel

Reputation: 5742

I put together an example of Grids working inside of a TabStrip: http://jsfiddle.net/dpeaep/SJ85S/. Maybe, I am missing part of what you are asking in your question. If so, you can modify the jsfiddle to clarify what the problem is.

HTML

<div id="tabstrip">
  <ul>
    <li>Grid 1</li>
    <li>Grid 2</li>
    <li>Grid 3</li>
  </ul>
  <div><div id="grid1"></div></div>
  <div><div id="grid2"></div></div>
  <div><div id="grid3"></div></div>
</div>

Javascript

var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);

$("#grid1").kendoGrid({
  columns: [
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" }
  ],
  dataSource: {
    data: [
      { FirstName: "Joe", LastName: "Smith" },
      { FirstName: "Jane", LastName: "Smith" }
    ]
  }
});

$("#grid2").kendoGrid({
  columns: [
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" }
  ],
  dataSource: {
    data: [
      { FirstName: "Betty", LastName: "Lakna" },
      { FirstName: "Fumitaka", LastName: "Yamamoto" },
      { FirstName: "Fred", LastName: "Stevenson" }
    ]
  }
});

$("#grid3").kendoGrid({
  columns: [
    { field: "Title", title: "Title" },
    { field: "Year", title: "Year" }
  ],
  dataSource: {
    data: [
      { Title: "Lost in Domtar", Year: "2012" },
      { Title: "Evergreen", Year: "2012" },
      { Title: "Fields of Yellow", Year: "2010" },
      { Title: "Where the Whistle Blows", Year: "2008" }
    ]
  }
});

Upvotes: 1

Related Questions