Hi
I am using jquery grid in our project wher i have defined the grid width and height due to that i am getting the horizontal and vertical scroll bar automatically and my all text in grid cell are right align by following code
$(gridid).unbind('iggriddatarendered'); $(gridid).on("iggriddatarendered", function (event, args) { for (var i = 0; i < metadata.length; i++) { j = i + 1; var formatType = metadata[i].FormatType; if (formatType.toLowerCase() == "int" || formatType.toLowerCase() == "currency" || formatType.toLowerCase() == "percentage" || formatType.toLowerCase() == "wholenumber" || formatType.toLowerCase() == "double" || formatType.toLowerCase() == "number") { args.owner.element.find("tr td:nth-child(" + j + ")").css("text-align", "right"); } } });
my problem is the last column text is getting overlapped by vertical scroll bar.
i inspect the last column using Google chrome inspect element tools and i saw the last column is getting automatically padding-right:2pxi think so its happening by some infragistics library.
is there any way to increase the padding right value or is there any other solution for this problem.
Please help me on this as early as possible.
Thanks
Vivek
Hi Martin
Thanks for your quick response i will try your suggestion but just for check i removed the group by feature from grid and checked and it doesn't workout.
Hello Vivek,
The issue is caused by the Group By feature of the grid. In order to overcome this problem you should update to one of the following SRs:
13.1.20131.2217
13.1.20131.2292
Best regards,Martin PavlovInfragistics, Inc.
Hi Martin i am using the following feature and setting of grid
columns: options.columns,autoGenerateColumns: false,autoFormat: true,width: options.divWidth, //we are setting here grid width and height based on parent div width and height like that $("#prodByMeaInfra").parent().width();height: options.divHeight,dataSource: options.data,rowTemplate: options.rowTemplate,features: options.features
gridOptions.features = [{ name: "Filtering", allowFiltering: true, type: "local" }, { name: "Resizing" }, { name: "Selection", mode: "cell", multipleSelection: true }, { name: "Paging", type: "local", pageSize: 100 }, { name: "Sorting", modalDialogHeight: 400, type: "local", mode: "multiple", columnSettings: [ { columnKey: 'ProductID', allowSorting: false } ] }, { name: 'GroupBy' }, { name: "Summaries", showDropDownButton: false, compactRenderingMode: true, emptyCellText: "-----", resultTemplate: "{1}", columnSettings: columnsettings }, { name: "RowSelectors", enableCheckBoxes: true, enableRowNumbering: false, checkBoxStateChanged: function (evt, ui) { $scope.eventRowSelectors(evt, ui) } } ];
Unfortunately I'm unable to reproduce the issue. Can you please post your grid configuration, because it's possible to be caused by enabling a specific option of the grid.