Mixing different styles of Grids

[Anthony]

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

[Iliana Dyankova]

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

 

 

[Anthony]

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. 

[Anthony]

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?

[Iliana Dyankova]

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

 

 

[Anthony]

Yep, it was as simple as that, thanks