Rank 1
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
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
Rank 1
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
Rank 1
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
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
Rank 1
Good afternoon Konstantin,
Thank you so much for your response. The code woks well!!
Thanks again!
Anieda