Reputation: 14233
I have an issue with kendo grid i have a window
and inside the window there is a tabstrip
the content of the tab is two grid which are shown in tab1 and tab2 respectively ,also the window is invisible at first.
My problem is the grid in the second tab height
exceeds the original grid-content height.
i have recreated the problem in jsfiddle clickhere.I think someone can help me.
Upvotes: 1
Views: 3431
Reputation: 263
Grid height issue inside a window or tabstrip (other than active tab). Actually these issue comes when we load the content partially or through ajax.
Solution 1: Working for me
- Set a max-height to the grid content container using CSS and remove height while binding grid. Hence when the grid content is larger than this height the scroller will be enabled. I have done as below.
CSS:
#gridTasks .k-grid-content { max-height: 300px; }
javascript:
//prepare datasource available for grid var taskDataSource = new kendo.data.DataSource({ serverPaging: true, serverFiltering: true, serverSorting: true, pageSize: 10, schema: { data: "Data", total: "Total", model: { // define the model of the data source. Required for validation and property types. id: "MemberID", fields: { MemberID: { type: "number", editable: false }, TaskName: { type: "string" } } } }, transport: { read: { url: "/MemberManagement/GetTasksList", contentType: "application/json", type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC }, parameterMap: function (data, operation) { if (operation == "read") { return JSON.stringify(data); } } } }); //bind grid $("#gridTasks").kendoGrid({ // height: 300, // remove this line *** columns: [ { field: "MemberID", title: "Member ID", width: 60, groupable: false, hidden: true }, { field: "TaskName", title: "Task Name", width: 100 , groupable: false } ], pageable: { refresh: true, pageSize: 10, pageSizes: [10, 20, 50, 100], buttonCount: 5, messages: { empty: "No Records Found.", display: "{0}-{1} of {2}" } }, sortable: true, selectable: "multiple", scrollable: true, filterable: true, groupable: true, dataSource: taskDataSource });
Solution 2: Also working for me.
- Change the k-grid-content height on dataBound
javascript:
dataBound: function() { $('#gridTasks .k-grid-content').height(300); }
Upvotes: 0
Reputation: 556
I have same problem and solve by set the height of .k-grid-content in dataBound event
$("#grid").kendoGrid(
{
dataBound: function()
{
$('#grid .k-grid-content').height(349);
}
});
check jsfiddle here
Upvotes: 1
Reputation: 40887
For getting the result as described in above comment:
You want a grid that shows all results not using paging but scrolling. But this grid is inside a tabstrip tab (that happens to be inside a window) so it should not overflow its container (the tabstrip tab)
You should:
height
is not a valid option of kendoTabStrip
, you can remove it.pageable: ...
from your Grid
initialization as well as pageSize: 10
from the DataSource
initialization.height
styling that Kendo UI introduced since it is not correctly calculated (!?) by doing $("#grid2").css("height","");
. This seems to me a little tricky but I couldn't get it running otherwise.In the following modification of your example I did this modifications for grid2
(only for grid2).
Upvotes: 2
Reputation: 1509
I have checked your jsfiddle and found that
<div id="tabStrip">
<ul>
<li>First tab</li>
<li>Second tab</li>
</ul>
<div id="grid1"></div>
<div id="grid2">Second tab content</div>
</div>
in above code <div id="grid2">Second tab content</div>
is creating height issue for second tab.
You can remove that text of div
and try.
Change
I have made some changes to your code please see the bellow jsFiddle
FiddleCheck this fiddle
Updated Fiddle as per your comment
Upvotes: 1