在劍道網格列菜單中滾動

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}

你會得到這樣的東西。