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
Hello Viviek,
Can you report which version of Ignite UI controls you're using. To do this please execute the following code in your browser JavaScript console:
$.ui.igGrid.version
We had a fix for this issue sometime ago, but the padding fix which you see should be 17px and not 2px.
I want to test it with your specific version in order to see whether our fix is in there or you have an older version.
Best regards,Martin PavlovInfragistics, Inc.
Hi Martin
i executed the code given by you and i got to know that i am using 13.1.20131.2039 version grid and for the padding i am sending you screens hot where you can see i am getting padding 2px for the last column of the grid.
i feel so that for my problem the easiest solution is to increase padding for the last column so if possible for quick fix can you tell me from where i can increase this padding.
Please Help me on this as soon as possible.
Hello Vivek,
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.
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) } } ];
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
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.