Hi,
I'm using in a project the igGrid with a size of 350 rows and 350 columns at the moment.
Due to the size I want to give as an orientation indication for the user a row and column highlight (selection).
The idea is to click (select) a cell and afterwards the depending row and column should be highlighted/marked/selected.
I tried to use an idea to work with fixed columns but due to the JSON that a get from the Web-Server I have to work with unbound columns.
I would appreciate tips
Hello Hazim,
After investigating this further, I determined that the row of the clicked cell could be selected by enabling the Selection feature. Regarding highlighting the column of the selected cell, what I could suggest is binding a method to the cellClick event. In this method a css class is set to the column of the clicked cell by using the property columnCssClass and the class is removed from all other columns. In order to set the new styles of the columns the dataBind method of the grid should be called:
cellClick: function (evt, ui) {
var cols = $("#grid").igGrid("option", "columns");
cols.forEach(col => {
col.columnCssClass = "";
})
var col = $("#grid").igGrid("columnByKey", ui.colKey);
col.columnCssClass = "colStyle";
$("#grid").igGrid("dataBind");
}
Below I am attaching a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
igGridSelectRowAndColumn.zip
Hello Monika,
Thanks for your answer und it is exactly what I was looking for as result.
I tested you example. But unfortunately the performance (Chrome 89) is not good for a size of 350x350, which is probably due to the "$("#grid").igGrid("dataBind");"Any idea how can the speed can be improved?
Best regards
Hazim
Another possible approach to apply css class to a column without calling databind method would be to loop through all rows in the grid and add a css class to every cell in the column. This could be achieved as below:
var rowsCount = $("#grid").igGrid("allRows").length;
for (var i = 0; i < rowsCount; i++) {
if(previousColumnIndex !== null){
$("#grid").igGrid("cellAt", previousColumnIndex, i).classList.remove("colStyle")
$("#grid").igGrid("cellAt", ui.colIndex, i).classList.add("colStyle")
previousColumnIndex = ui.colIndex;
Where previousColumnIndex is a global variable, which persists the selected column on the previous click.
Additionally, the following article in our documentation regarding improving the performance of the igGrid could be helpful.
Below I am attaching the modified sample. Please test it on your side and let me know if you need any further information regarding this matter.
7242.igGridSelectRowAndColumn.zip
Hi Monika,Thanks for your answer.
After your first answer I though that a possible soultion will go in the way like your second. Your example works fine for me and the performance is good!
Thank you for your help!!! Best regardsHazim
I am glad that you find my suggestion helpful and were able to achieve your requirement.
Thank you for using Infragistics components.