KendoUI Grid使用中,在列宽超出屏幕无数据下显示滚动条

KendoUI Grid使用中,在列宽超出屏幕无数据下显示滚动条

kendoGrid 在使用中显示的列比较多,在这种情况下,设置column属性width如:

 			{
                title: "序号",
                filterable: false,
                width: "50px",
                attributes: {
                    style: "text-align: center;"
                }
            }

在这种情况下,如果所有的列的width超出表格的宽度就会出现滚动条,如图:
在这里插入图片描述
但是在使用中发现,如果查询的数据为空,则滚动条消失,表头出现显示不全的现象。在查找kendoUI的api后未发现没有方法或者属性可以控制这种情况,于是在页面仔细检查,终于发现在数据源的数据为空的情况下,table的宽度虽然依然超出屏幕,但是数据内容区域的高度为0,滚动条无法出现的原因找到。
在这里插入图片描述
在这里插入图片描述
在此情况下,于是想到赋予元素高度,在通过在dataBound方法中赋予该元素高度1px,滚动条终于出现,问题解决。
在这里插入图片描述
附上js代码:

 * grid 在筛选数据过程中无数据会导致列显示不全,
 * 此方法作用是显示表头,可以重新选择筛选条件
 * <br>
 * 示例方法:...
 *         dataBound:function (e) {
 *              setTableOverFlow(this);
 *          },
 *          ...
 * <br>
 * @param target 在dataBound中传入this对象,参考示例方法
 */
function setTableOverFlow(target) {
	//判断数据源数据为空
    if (target.dataSource.total() == 0) {
        var content = $(target.element).find(".k-grid-content-expander");
        if (content) {
            $(content).css("height",'1px');
        }
    }
    //表头需要自动滑动到左侧对齐,在超出屏幕的列上进行筛选,列不会自动返回到左侧,造成数据与表头错误,此方法解决这个问题
    $(target.element).find('.k-grid-header-wrap.k-auto-scrollable').scrollLeft(0).animate({scrollTop: $(target.element).offset().left});
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值