Arun Killu
Arun Killu

Reputation: 14233

grid height issue when shown inside a window

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

Answers (4)

Sudhanshu Shekhar
Sudhanshu Shekhar

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

tarn
tarn

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

OnaBai
OnaBai

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:

  1. As far as I know, height is not a valid option of kendoTabStrip, you can remove it.
  2. You don't want paging but bring all results from the server and then scroll. So you need to remove pageable: ... from your Grid initialization as well as pageSize: 10 from the DataSource initialization.
  3. After the creating the grid, you should remove a 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.
  4. You should reduce the height of the grid a little otherwise it doesn't fit in the window. I changed it to 450.

In the following modification of your example I did this modifications for grid2 (only for grid2).

Upvotes: 2

jaychapani
jaychapani

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.

DEMO


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

Related Questions