This is a migrated thread and some comments may be shown as answers.
Grid height set
1 Answer 137 Views
This is a migrated thread and some comments may be shown as answers.
wang
Top achievements
Rank 1
wang asked on 05 Dec 2017, 07:43 AM

 @(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

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 08 Dec 2017, 07:04 AM
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.
Asked by
wang
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or