Grid height set

2 posts, 0 answers
  1. wang
    wang avatar
    4 posts
    Member since:
    Jun 2017

    Posted 05 Dec 2017 Link to this post

     @(Html.Kendo().Grid<SysRoleModel>
            ()
            .HtmlAttributes("") 
            .AutoBind(true)
            .Name("grid")
            .Selectable(selectable =>//Grid选中设置
            {
                selectable.Enabled(true);//是否可以选中
                selectable.Type(GridSelectionType.Row);//选中行还是单元格;Row为行模式;Incell为单元格模式
                selectable.Mode(GridSelectionMode.Multiple);//选中一行还是可以选中多行;Single为单选;Multiple为多选
            })
            .Columns(columns =>
            {

                columns.Template("<input class=\"box\" id=\"assignChkBx\" name=\"assignChkBx\" title=\"#=RoleName#\" CompanyRole=\"#=CompanyRole#\" type=\"checkbox\" value=\"#=Id#\" onclick=\"selectRow(this)\"/> ")
                .Width(50)
                .ClientHeaderTemplate("<input class=\"selectAll\" type=\"checkbox\" id=\"allBox\" onclick=\"selectAllRow(this)\" /></text>")
                .HeaderHtmlAttributes(new { style = "text-align: center" })
                .HtmlAttributes(new { style = "text-align: center" });
                columns.Bound(c => c.RoleName).Title("角色名称").Width(150).HeaderHtmlAttributes(new { style = "text-align: center" });
                columns.Bound(c => c.RoleDescription).Title("角色说明").Width(150).HeaderHtmlAttributes(new { style = "text-align: center" });
                columns.Bound(c => c.Remark).Title("备注").Width(117).HeaderHtmlAttributes(new { style = "text-align: center" });
                columns.Bound(c => c.Enabled).Title("是否有效").Width(117).HeaderHtmlAttributes(new { style = "text-align: center" }).ClientTemplate("#if(Enabled=='1'){#" +
                                                  "<span>是</span>" +
                                              "#}else {#" +
                                                  "<span>否</span>" +
                                             "#}#").HtmlAttributes(new { style = "text-align: center" });
                columns.Bound(c => c.CompanyRole).Title("系统角色").Width(117).HeaderHtmlAttributes(new { style = "text-align: center" }).ClientTemplate("#if(CompanyRole=='1'){#" +
                                                         "<span>是</span>" +
                                                     "#}else {#" +
                                                         "<span>否</span>" +
                                                    "#}#").HtmlAttributes(new { style = "text-align: center" });
                columns.Bound(c => c.InDate).Title("录入时间").Width(126).HeaderHtmlAttributes(new { style = "text-align: center" }).Format("{0:yyyy-MM-dd HH:mm:ss}");
            })
            .Pageable(page => page
            .Refresh(true)
            .ButtonCount(10)
            .PageSizes(new[] { 20, 30, 50 })
            .Messages(mess => mess.ItemsPerPage("每页显示数目").Display("显示{0}-{1}条,共{2}条"))
            )//分页设置
            .Sortable()  // 是否支持排序
            .Scrollable(c => c.Height("100%"))
            .HtmlAttributes(new { @class = "k-grid-autoheight" })
            .Events(c => c.DataBound("window.kendoGridAutoHeightDataBound"))
            .PersistSelection()
            .Reorderable(reorderable => reorderable.Columns(true))//是否支持列的拖拽
            .Resizable(resizable => resizable.Columns(true))//设置Grid是否可以手动调整列宽
            .ColumnMenu()
            .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .ServerOperation(true)
                        .Model(model => model.Id(p => p.Id))
                        .Read(read => read.Action("Role_Read", "Role").Data("GetCriteria"))
            )
    )

     

    Scrollable Properties set 100% Why does not work, I want to make the grid control automatically according to the interface height how to set

     

  2. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 08 Dec 2017 Link to this post

    Hello, Wang,

    Thank you for providing the current code.

    This scenario will require using additional CSS rules and programmatically resize the Grid on window resize. Please check the following example demonstrating this:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/resize-grid-when-the-window-is-resized

    As this is only using CSS and clientside method, the MVC implementation is similar, only the header or the footer in the _Layout.cshtml has to be taken into account.

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top