Telerik Kindo Grid 隐藏 Y 轴滚动条（scroll ）设置自适应高度

最新推荐文章于 2021-11-08 11:52:29 发布

奥赛罗12

最新推荐文章于 2021-11-08 11:52:29 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/z1y1l1/article/details/49613561

C# 同时被 2 个专栏收录

2 篇文章

订阅专栏

telerik kendo grid

0 篇文章

订阅专栏

本文介绍了如何使用Telerik Kendo Grid控件来隐藏Y轴滚动条，并根据内容自适应高度。通过官方API和jQuery实现，无论数据存在与否，都能达到理想效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

kindo grid 控件的官方api

kindo grid 控件的设置如下：

    @(Html.Kendo().Grid<ControlTestingListViewModel>()
              .Name("Testing_Grid")
              .Columns(columns =>
              {
                  columns.Bound(m => m.ControlTestingID).Width(0).Hidden().Visible(false);
                  columns.Bound(m => m.PhaseID).Width(0).Hidden().Visible(false);
                  columns.Bound(m => m.SubphaseID).Width(0).Hidden().Visible(false);
                  columns.Bound(m => m.Campaign).Title(N5Default.TITLE_CAMPAIGN);
                               columns.Bound(m => m.SubPhase).Title(N5Default.TITLE_SUB_PHASE);
                               columns.Bound(m => m.LocationName).Title(N5Default.TITLE_LOCATION);
                               columns.Bound(m => m.ProcessName).Title(N5Default.TITLE_PROCESS);
                               columns.Bound(m => m.SubProcessName).Title(N5Default.TITLE_SUB_PROCESS);
                               columns.Bound(m => m.ControlCode).Title(N5Default.TITLE_CONTROLID).ClientTemplate("<span onClick=\"javascript:PopupControlTest(#=ControlTestingID#,'#=TestWith#','#=ControlCode#','#=SubPhaseStatus#','#=PhaseStatus#')\" class='text_decoration_underline cursor_pointer' >#=kendo.htmlEncode(ControlCode)#</span>").Width(100);
                               columns.Bound(m => m.TestNumber).Title(N5Default.TITLE_TEST_NUMBER);
                               columns.Bound(m => m.Tester).Title(N5Default.TITLE_TESTER);
                               columns.Bound(m => m.ReviewedName).Title(N5Default.TITLE_REVIEWER);
                               columns.Bound(m => m.ETA).Title(N5Default.TITLE_ETA).Format("{0:MM/dd/yyyy}");
                               columns.Bound(m => m.ConclusionName).Title(N5Default.TITLE_CONCLUSION);
                               columns.Bound(m => m.StatusName).Title(N5Default.TITLE_TEST_STATUS);
                               columns.Bound(m => m.WorkflowStatusName).Title(N5Default.TITLE_WF_STATUS);
                               columns.Bound(m => m.HasFinding).Title("HasFinding").Width(100);
                               columns.Bound("").HeaderTemplate("<img id=\"checkAll\" check='no' onclick=\"checkAll(this)\" class=\"cursor_pointer\" src='" + @Url.Content("~/Content/images/control_list_hollow.png") + "'></img>").HeaderHtmlAttributes(new { @class = "text_align_center" })
                                   .ClientTemplate("# if(WorkflowStatus == " + (int)EnumDefinition.TestWorkflowStatus.Approved + ") { #" +
                                                   "<img class='gridscope' check='yes' onclick=\"ScropClick('#=ControlTestingID#',this)\" src='" + @Url.Content("~/Content/images/control_list_solid.png") + "'></img>" +
                                                   "# } else { #" +
                                                   "<img class='gridscope' check='no' onclick=\"ScropClick('#=ControlTestingID#',this)\" src='" + @Url.Content("~/Content/images/control_list_hollow.png") + "'></img>" +
                                                   "# } #"
                                   ).HtmlAttributes(new { @class = "text_align_center", controlTestingID = "#=ControlTestingID#" })
                                   .Filterable(false).Sortable(false);
                           })
                      .Groupable(g => g.Messages(m => m.Empty(N5Default.LABEL_GROUPHEARDER)))
              .Events(e => e.DataBound("TestingDataBound"))
              .Scrollable(s=>s.Height("100%"))
              .Pageable(p => p.PageSizes(true))
              .Sortable()
              .Filterable()
              .Resizable(r => r.Columns(true))
              .DataSource(dataSource => dataSource
                                            .Ajax()
                                                    .Read(read => read.Action("ControlTestingList", "ControlTesting").Data("SetPassParam"))
              ))

上图，

 .Scrollable(s=>s.Height("100%"))

在官网是设置数值，不能自适应。如果设置成100%就可以自适应。

没有数据的时候，效果如下图

有数据的时候，效果如下图

上图显示，横向滚动条起作用。纵向滚动条高度自适应。

下面要隐藏纵向滚动条，

实用jquery

  function TestingDataBound(e) {
        var rowCount = jQuery("#" + this.element[0].id).find('table tbody tr').length;
        var colCount = jQuery("#" + this.element[0].id).find('table thead tr th').length;
        number = rowCount;
        if (rowCount == 0) {
            jQuery("#" + this.element[0].id).find('table tbody').append('<tr class="kendo-data-row"><td style=\"line-height:normal !important;\" colspan="' + colCount + '">@N5Default.PROMPT_NO_RECORDS</td></tr>');
        }
        jQuery("#" + this.element[0].id + " .k-grid-content").css("overflow-y", "auto");
        jQuery("#" + this.element[0].id + " .k-grid-header").css("padding-right", "0px");
        CorrectGridAllOptionText('Testing_Grid', '@N5Default.KENDO_DROPDOWN_ITEM_ALL');
        if (controlTestingIDArray.length == 0) {
            jQuery("#checkAll").attr("check", "no");
            jQuery("#checkAll").attr("src", '@Url.Content("~/Content/images/control_list_hollow.png")');
        }
}

其中

 jQuery("#" + this.element[0].id + " .k-grid-content").css("overflow-y", "auto");
 jQuery("#" + this.element[0].id + " .k-grid-header").css("padding-right", "0px");

.k-grid-header 是kindo grid控件的表头， .k-grid-content是kindo grid控件的表体。

效果如下：