This is a migrated thread and some comments may be shown as answers.

Mixing different styles of Grids

5 Answers 54 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 1
Anthony asked on 08 May 2014, 08:13 AM
Hi
  I'm new to Telerik controls so sorry for the newbie question, but...

You can make a grid using the MVC style of markup

@(Html.Kendo().Grid((TimeSummaryDay[])Model)
.Name("grid")
.Columns(columns =>

etc

And also using javascript:

<div id="grid2"></div>
<script>
$("#grid2").kendoGrid({
columns: [
 { field: "name" },
 { field: "age" }

etc

The question is can you mix these styles, can you do everything with the MVC style that you can with the javascript style?

One reason for asking is that I want to be able to hide columns as the browser changes size. I've seen as example that looks like this:

var grid = $("#grid").data("kendoGrid");
grid.hideColumn("SortName");

but grid is null. When I do this with grid2 data("kendoGrid") does return an object. Does that means that data("kendoGrid") only works with the javascript style?

thanks









5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 08 May 2014, 12:00 PM
Hi Anthony,

You should be able to use the same approach with Kendo UI Grid for ASP.NET MVC (short screencast capture) and I am not quite sure what causes the issue in your application. Is it possible to provide a small runnable example which demonstrates your current implementation - this way I would be able to advice you further and provide concrete recommendations? Thank you in advance for your time and cooperation.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Anthony
Top achievements
Rank 1
answered on 08 May 2014, 12:14 PM
I've narrowed down the problem, it's a timing issue.

I dynamically load the grids contents, when I use this style it just works,

'$("#grid").kendoGrid({'  

when I use the MVC style 

@(Html.Kendo().Grid((TimeSummaryDay[])Model)

It doesn't. If I use $(document).ready with the MVC style it works again.

I assume that there is a slight delay when the MVC style grid is rendered? Or possibly it just happens after any <script> blocks that are on the page

Whats the best way to achieve this? My end goal is a grid where, as I shrink the size of the browser, some columns disappear. 
0
Anthony
Top achievements
Rank 1
answered on 08 May 2014, 12:23 PM
Also, when you hide a column the remaining columns don't take up the freed space, there's just a big gap there. Any way around this?
0
Accepted
Iliana Nikolova
Telerik team
answered on 12 May 2014, 11:11 AM
Hi Anthony,

In order to achieve the end goal you could attach a handler to the window resize event and hide some of the columns using Grid hideColumn method. As an example: 
$(window).resize(function () {
  //get reference to the Grid widget
  var grid = $("#grid").data("kendoGrid");
  //hide the UnitPrice column
  grid.hideColumn("UnitPrice");
});
Also, when you hide a column the remaining columns don't take up the freed space, there's just a big gap there. Any way around this?

I am not quite sure what your Kendo UI Grid implementation is, however I guess you have explicit column widths set to all columns? More detailed information about correct column width usage is available at the following documentation section: 
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

If the information above does not help to resolve the issues please provide a small runnable example which demonstrates your current implementation and which I can test locally. Thank you in advance for your time and cooperation.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Anthony
Top achievements
Rank 1
answered on 14 May 2014, 08:02 AM
Yep, it was as simple as that, thanks
Tags
Grid
Asked by
Anthony
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Anthony
Top achievements
Rank 1
Share this question
or