Hello everybody!
I am developing several grids in different pages.After a lot of searches, I don't manage to resolve a problem:
I have a problem with the headers of a grid (What I would like, is keeping the headers visible when lines are scrolled)
Two cases happened with .FixedHeaders(true) :
- After adding a new line or modifying a line (with the mode Edit Row Template), displayed data are mistaken. For example, at the first time of loading the grid, data of status is well displayed in the column "Status". Then, after editing, instead of data of status, data of date is displayed in the column Status (wrong place)!
- Using GroupBy(true), width of headers are not at all adjusted at the width of columns...
How correct the problem?
(Excuse me for my not very good English)
Hello Floriane,
Thank you for posting in our forum!
I have attached a sample implementing fixed headers, group by and row adding features. You might revise it and use it in your project if it’s needed. If you still encounter any issues regarding this matter could you provide a code snippets or a sample in order to investigate further?
Looking forwards to your reply.
Thank you for your quick return.
I have tested your sample and it works well, contrary to my work. I compared the properties and they are the same. Maybe, it is due to libraries (I am using jquery 1.7 and I saw in the sample, it is jquery 1.9).
Otherwise, I found a very neat solution but it works well:
When the grid is rendered, $('col') are gotten and the columns are set at the width of cells:
$("#grid1").live("iggridrendered",function(evt, ui){var cols = $('col');
//get width of rendered cells var tds = $($("#grid1 tr").not('.ui-iggrid-groupedrow')[0]).find('td');var cell1 = $("#grid1 .ui-iggrid-rowselector-class").width()+10;var cell2 =$(tds[1]).width() + 10;var cell3 = $(tds[2]).width() +10 ;var cell4 =$(tds[3]).width()+10; $(cols[1]).css("width", cell1+"px");$(cols[2]).css("width", cell2+"px");$(cols[3]).css("width", cell3+"px"); $(cols[4]).css("width", cell4+"px");});
Therefore, I noticed the last column is neglected. This is why I set only the 5 first columns expect the first (not necessary) (I have 6 columns at all). Consequently, the sixth column is set to the correct width.
A detail I forgot : the last column is not part of $('col')..
I am just following up to check if you have been able to resolve your issue. If you have any further questions feel free to contact me again.
Thank you for your reply.
Have you tested your sample by referring the jquery scripts used in the sample I have provided?
I have tried to implement the code snippet you have pasted in my sample but I encountered issues. You have said that it works well for you. Do you need any further assistance? If so could you provide me an executable sample?
Looking forwards to hearing from you.