I'm trying to experiment with this grid to see if these kendo tools could be useful in our enterprise MVC 3 environment. I started up a new MVC 3 app in visual studio and added stylesheet links and jquery 1.6.2 to the head section in _Layout. Then dropped a kendo script reference in the index page and added some code to use the grid.
Grid works if I create the simple Star Wars html table in the examples and call .kendoGrid() on it. But it is not working at all with a div and datasource. Datasource is showing as populated in FireBug. I tried multiple ways to get this working, including initializing data in the kendogrid method, to no avail.
Please see attached screenshot. Should be able to tell from screenshot if there is a coding error. Any help appreciated. Should be easy to replicate as I had the same problem at home and in work environment. Will be happy to provide additional details.
Grid works if I create the simple Star Wars html table in the examples and call .kendoGrid() on it. But it is not working at all with a div and datasource. Datasource is showing as populated in FireBug. I tried multiple ways to get this working, including initializing data in the kendogrid method, to no avail.
Please see attached screenshot. Should be able to tell from screenshot if there is a coding error. Any help appreciated. Should be easy to replicate as I had the same problem at home and in work environment. Will be happy to provide additional details.
6 Answers, 1 is accepted
0
Jason
Top achievements
Rank 1
Rank 1
answered on 04 Dec 2011, 11:34 PM
May have answered my own question. The table elements are there in the HTML but it appears everything is just hidden from the default styling. So the problem is CSS and not grid binding.
0
Jason
Top achievements
Rank 1
Rank 1
answered on 04 Dec 2011, 11:49 PM
Ok when I call kendoGrid() on a empty div it is creating a nested div with a class "k-grid-content" and creating an inline style on that div with a height of 1px in Firefox. (2px in Chrome.) Hence my table was not showing in the original screenshot and I thought it wasn't binding.
Please see screenshot. Is this a bug?
Please see screenshot. Is this a bug?
0
Hello Jason,
Atanas Korchev
the Telerik team
We are not sure what the problem may be because you have not provide your code. We have a lot of demos showing how to bind the grid to a datasource:
Binding to local data
Binding to remote data
Perhaps those would help you.
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jason
Top achievements
Rank 1
Rank 1
answered on 05 Dec 2011, 04:16 PM
The problem goes away if i manually set the height on the grid. Still here is an example with the issue. Run the solution and it will set the height on the "k-grid-content" div to 1px.
0
Hello Jason,
Atanas Korchev
the Telerik team
Indeed the grid height seems to be improperly calculated in this case. We will investigate why this happens.
As a workaround please specify some grid height:
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "rank", title: "Rank" },
{ field: "rating", title: "Rating" },
{ field: "title", title: "Movie Title"}
],
height: 200
});
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jason
Top achievements
Rank 1
Rank 1
answered on 22 Mar 2012, 09:13 AM
Any progress on fixing this issue?