I have created a Kendo Grid in jquery which has a large number of columns suppose 50. Initially only 10 will be visible and the end-user can make other columns visible through column menu.
Problem :
If the column count is too large like in my case , the columns window in the column menu become too large . What i want is to incorporate a scroll in it.
Below I have shown the image:
Jquery:
//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]
},
});
Any help will be highly appreciated.
