在剑道网格列菜单中滚动

Question

我在 jquery 中创建了一个 Kendo Grid，它有大量的列，假设为 50。最初只有 10 个可见，最终用户可以通过列菜单使其他列可见。

问题 ：

如果像我这样的列数太大，列菜单中的列窗口就会变得太大。 我想要的是在其中加入一个卷轴。

下面我展示了图像：

查询：

 //Creating Kendo Grid For Tasks
            divSearchGrid.kendoGrid({
                dataSource: {
                    transport: {
                        read: function (options) {
                            $.ajax({
                                type: "POST",
                                url: urlSearch,
                                data: paramsSearch,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (result) {

                                    var data = result.d;
                                    if (data != null) {
                                        if (data.length > 0) {
                                            orignalComplexData = data;
                                            structuredData = [];
                                            for (var i = 0; i < data.length; i++) {
                                                var checkExistance = '';
                                                var objStructured = {};
                                                objStructured['StatusID'] = 1;
                                                objStructured['AttID'] = 1;
                                                objStructured['ServiceDefautltSRSubject'] = data[i].ServiceDefautltSRSubject;
                                                objStructured['IsDescriptionEditable'] = data[i].IsDescriptionEditable;
                                                objStructured['RecordStatusID'] = data[i].RecordStatusID;
                                                objStructured['TaskOrder'] = data[i].TaskOrder;
                                                objStructured[defaultTaskColumnAray[0]] = data[i].ServiceRequestID;
                                                objStructured[defaultTaskColumnAray[1]] = data[i].TaskID;
                                                objStructured[defaultTaskColumnAray[2]] = data[i].TaskDescription;
                                                objStructured[defaultTaskColumnAray[3]] = data[i].FolderDescription;
                                                objStructured[defaultTaskColumnAray[4]] = data[i].FolderSubject;
                                                objStructured[defaultTaskColumnAray[5]] = data[i].AssignedToName;
                                                objStructured[defaultTaskColumnAray[6]] = data[i].StatusName;
                                                objStructured[defaultTaskColumnAray[7]] = data[i].ServiceName;
                                                objStructured['NavigateURI'] = data[i].NavigateURI;
                                                objStructured['SRNavigateURI'] = data[i].SRNavigateURI;
                                                objStructured['NavigateURIPSRID'] = data[i].NavigateURIPSRID;
                                                objStructured['StatusIconpath'] = data[i].StatusIconPath;
                                                objStructured['RecordStatusIcon'] = data[i].RecordStatusIcon;

                                                if (data[i].PSRID != 0) {
                                                    objStructured[defaultTaskColumnAray[8]] = data[i].PSRID;
                                                }
                                                else {
                                                    objStructured[defaultTaskColumnAray[8]] = '';
                                                }

                                                objStructured[defaultTaskColumnAray[9]] = data[i].PSRSubject
                                                var customFieldList = data[i].RecordStatusToolTip.split('%');
                                                if (selectedFolderType != '' || defaultServiceGUID != '') {
                                                    for (var j = 0; j < customFieldList.length; j++) {
                                                        var fieldIndex = $.inArray(customFieldList[j].split('||')[0], checkExistance.split(','));
                                                        if (fieldIndex == -1) {
                                                            if (customFieldList[j].split('||')[2] == '5' || customFieldList[j].split('||')[2] == '6') {
                                                                if (customFieldList[j].split('||')[1] == 'true') {
                                                                    objStructured[customFieldList[j].split('||')[0]] = true;
                                                                }
                                                                else {
                                                                    objStructured[customFieldList[j].split('||')[0]] = false;
                                                                }

                                                            }
                                                            else if (customFieldList[j].split('||')[2] == '7') {
                                                                if (customFieldList[j].split('||')[1] != '') {
                                                                    if (new Date(customFieldList[j].split('||')[1]) != 'Invalid Date') {
                                                                        objStructured[customFieldList[j].split('||')[0]] = customFieldList[j].split('||')[1];
                                                                    }
                                                                    else {
                                                                        objStructured[customFieldList[j].split('||')[0]] = customFieldList[j].split('||')[1].split('/')[1] + '/' + customFieldList[j].split('||')[1].split('/')[0] + '/' + customFieldList[j].split('||')[1].split('/')[2];
                                                                    }
                                                                }
                                                                else {
                                                                    if (new Date(customFieldList[j].split('||')[4]) != 'Invalid Date') {
                                                                        objStructured[customFieldList[j].split('||')[0]] = new Date(customFieldList[j].split('||')[4]);
                                                                    }
                                                                    else {
                                                                        objStructured[customFieldList[j].split('||')[0]] = customFieldList[j].split('||')[4].split('/')[1] + '/' + customFieldList[j].split('||')[4].split('/')[0] + '/' + customFieldList[j].split('||')[4].split('/')[2];
                                                                    }
                                                                }
                                                            }
                                                            else {
                                                                objStructured[customFieldList[j].split('||')[0]] = customFieldList[j].split('||')[1];
                                                            }
                                                            checkExistance = checkExistance + "," + customFieldList[j].split('||')[0];
                                                        }
                                                    }
                                                }
                                                objStructured[defaultTaskColumnAray[10]] = data[i].GUID
                                                objStructured[defaultTaskColumnAray[11]] = data[i].ServiceRequestGUID
                                                structuredData.push(objStructured)
                                            }

                                            //Below code collapse all the panels of the panel bar
                                            panelbar.collapse($("li", panelbar.element));

                                            options.success(structuredData)
                                        }
                                        else {
                                            //Below code collapse all the panels of the panel bar
                                            panelbar.collapse($("li", panelbar.element));

                                            divSearchGrid.html('<h4>No records To Display</h4>')
                                            // To stop the Auto Refresh of the grid if there are no results
                                            isEditing = true;
                                        }
                                    }
                                    else {
                                        divSearchGrid.html('<h4>Some Error Occured</h4>')
                                    }
                                }
                            })
                        }
                    },
                    pageSize: 10
                },
                batch: true,
                groupable: true,
                scrollable: true,
                dataBound: GridDataBound,
                sortable: true,
                reorderable: true,
                resizable: true,
                selectable: "row",
                editable: true,
                columns: columnList,
                columnMenu: true,
                filterable: true,
                columnMenu: {
                    sortable: false
                },
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5,
                    pageSizes: [10, 25, 50, 100, 200]
                },
            });

任何帮助将不胜感激。

Answer 1

这应该可以解决您的问题：

.k-group .k-popup .k-reset 
{
max-height: 50px !important;
overflow-y: scroll !important;
}

Answer 2

这是KendoUI之前发布的某些更改。 以前，您的垂直空间有限，而现在您拥有所有窗口。 不应有太大区别，因为无论如何您都应该具有垂直滚动。

无论如何，您可以按照@Bobby_D_的建议限制垂直间距的大小，但将滚动条定义为：

.k-group.k-popup.k-reset {
    max-height: 200px !important;
}

您可以在这里看到它： http : //jsfiddle.net/OnaBai/8k8NN/6/

Answer 3

应用此规则

 li.k-item.k-columns-item.k-state-default.k-last > div>ul {overflow:auto !important}

你会得到这样的东西。