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

How to Make Grid Responsive and Freeze Grid Columns

5 Answers 728 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anieda Hom
Top achievements
Rank 1
Anieda Hom asked on 03 Aug 2018, 08:43 PM

I want the grid to be responsive just like this page (https://demos.telerik.com/aspnet-mvc/grid), but I don't see any sample code that make it works. 

Here is my code:

@{
    Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(request => request.Id).Filterable(ftb => ftb.Cell(cell => cell.Template("integerFilter").Operator("eq").ShowOperators(false)));
            columns.Bound(request => request.Requestor).Encoded(false);
            columns.Bound(request => request.RequestDate).Format("{0:MM/dd/yyyy}").Encoded(false).HeaderHtmlAttributes(new { @class = "hidden - xs" }).HtmlAttributes(new { @class = "hidden - xs" });;
            columns.Bound(request => request.ChangeStartDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false).HeaderHtmlAttributes(new { @class = "hidden - xs" }).HtmlAttributes(new { @class = "hidden - xs" });
            columns.Bound(request => request.ChangeEndDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false).HeaderHtmlAttributes(new { @class = "hidden - xs" }).HtmlAttributes(new { @class = "hidden - xs" });
            columns.Bound(request => request.RequestSubject).Encoded(false).HeaderHtmlAttributes(new { @class = "hidden - xs" }).HtmlAttributes(new { @class = "hidden - xs" });
            columns.Bound(request => request.CurrentStatus).Encoded(false);
            columns.Bound(request => request.CompletedFlag).Encoded(false);
        })
.Filterable(filterable => filterable
   .Extra(false)
   .Operators(operators => operators
       .ForString(str => str.Clear()
           .Contains("Contains")
           .StartsWith("Starts With "))
       .ForNumber(num => num.Clear()
       .IsEqualTo("Equal to"))
       .ForDate(d => d.Clear())
    )
   .Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
   .Refresh(true)
   .PageSizes(true)
   .ButtonCount(5))
.Resizable(resize => resize.Columns(true))
.Selectable()
.Sortable()
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(request => request.Id))
)
.Render();
}
<script>
    function integerFilter(e) {
        e.element.kendoNumericTextBox({
            spinners: false,
            format: "#",
            decimals: 0
        });
    };  
    $(function() {
        $("div.k-grid-content").find("col").addClass("hidden-xs");
        $("div.k-grid-header").find("col").addClass("hidden-xs");
    });

</script>

Please see attached image.  I would like to show all columns from desktop but should be able to hide some columns from smart devices.  How can I accomplish the followings? 

1) Responsive Grid

2) Freeze curtain grid columns

 

Thank you very much in advance!

Anieda

 

 

5 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 07 Aug 2018, 11:30 AM
Hi Anieda,

The following online demo demonstrates how particular columns could be hidden if the width is lower than particular value, defined in the minScreenWidth property of the column: 
*To view the source code of the responsive demo you can right click on the page and click on "View page source".

As for freeze columns, you can set the "locked" property of the columns that you want to freeze:
Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Anieda Hom
Top achievements
Rank 1
answered on 07 Aug 2018, 08:00 PM

Thank you very much Konstantin for the documentation! 

I'll look into your sample code.  If I have questions, I'll get back to you.

Thanks again,

Anieda

 

0
Anieda Hom
Top achievements
Rank 1
answered on 08 Aug 2018, 06:36 PM

Good afternoon Konstatin and Telerik Team,

I used the sample code and the links above to apply to my grid.  It does not work.  The reference links are for "Kendo UI for JQuery" Grid.  My grid is for "Telerik UI for ASP.NET MVC" which linked to database.  Do you have any sample code/links that works for "Telerik UI for ASP.NET MVC" gird?

 

Here is my code that using the Kendo UI for JQuery Grid:

@model List<ChangeControl.Models.ViewModels.GridRequestViewModel>
@using Kendo.Mvc.UI

    @{
    Html.Kendo().Grid(Model)
        .Name("grid")
  .Columns(columns =>
        {
        columns.Bound(request => request.Id).Filterable(ftb => ftb.Cell(cell => cell.Template("integerFilter").Operator("eq").ShowOperators(false)));
        columns.Bound(request => request.Requestor).Encoded(false);
        columns.Bound(request => request.RequestDate).Format("{0:MM/dd/yyyy}").Encoded(false);
        columns.Bound(request => request.ChangeStartDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false);
        columns.Bound(request => request.ChangeEndDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false);
        columns.Bound(request => request.RequestSubject).Encoded(false);
        columns.Bound(request => request.CurrentStatus).Encoded(false);
        columns.Bound(request => request.CompletedFlag).Encoded(false);
    })
    .Filterable(filterable => filterable
    .Extra(false)
    .Operators(operators => operators
    .ForString(str => str.Clear()
    .Contains("Contains")
    .StartsWith("Starts With "))
    .ForNumber(num => num.Clear()
    .IsEqualTo("Equal to"))
    .ForDate(d => d.Clear())
    )
    .Mode(GridFilterMode.Row))
    .Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5))
    .Resizable(resize => resize.Columns(true))
    .Selectable()
    .Sortable()
    .DataSource(dataSource => dataSource
    .Server()
    .Model(model => model.Id(request => request.Id))
    )   
  })
  .Render();
    }
<script>
    function integerFilter(e) {
        e.element.kendoNumericTextBox({
            spinners: false,
            format: "#",
            decimals: 0
        });
    };
   
    $("#grid").kendoGrid({
        columns: [
            { field: "id", width: 250 }, //column will become hidden if screen size is less than 500px
            { field: "Requestor", width: 250 }, //column will always be visible
            { field: "RequestDate", width: 250, minScreenWidth: 500 }, //column will become hidden if screen size is less than 500px
            { field: "ChangeStartDateTime", width: 250, minScreenWidth: 500 }, //column will become hidden if screen size is less than 500px
            { field: "ChangeEndDateTime", width: 250, minScreenWidth: 500 },
            { field: "RequestDate", width: 250, minScreenWidth: 500 },
            { field: "RequestSubject", width: 250, minScreenWidth: 500 },
            { field: "CurrentStatus", width: 250, minScreenWidth: 750 },
            { field: "CompletedFlag", width: 250, minScreenWidth: 750 }
        ]      
    });
</script>

 

Please help!  Thanks so much!

Anieda

0
Konstantin Dikov
Telerik team
answered on 09 Aug 2018, 07:50 AM
Hi Aneida,

The same column properties are available in the MVC wrapper as well, so you can set them as shown below:
For locked column:
columns.Bound(o => o.ShipName).Width(300).Locked(true);

For minScreenWidth:
columns.Bound(o => o.ShipName).Width(300).MinScreenWidth(600);

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Anieda Hom
Top achievements
Rank 1
answered on 09 Aug 2018, 05:52 PM

Good afternoon Konstantin,

Thank you so much for your response.  The code woks well!!

Thanks again!
Anieda

 

 

Tags
Grid
Asked by
Anieda Hom
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Anieda Hom
Top achievements
Rank 1
Share this question
or