I have igGrid that needs to get refreshed with data based upon a value that is selected in a combo box. The combo box takes the value and sends it to the database to retrieve the data. Sometimes that data coming back is 10 columns and some times it is 5 columns. However the first two columns are always the same so I would like to set their width so it would be constant. My problem is two fold, if I set the width like
columns: [ { headerText: "DISEASE SITE", key: "DISEASE_SITE", dataType: "string", width: "200" }, { headerText: "DESCRIPTION", key: "DESCRIPTION", dataType: "string", width: "200" } ],
then the other columns do not show up. The other columns should be able to take whatever space is available and share it. Can I remove the columns property and set it after the grid has rendered?
Also (without setting the width) if I display the data that has the 10 columns first and then display the 5 column then the other 5 columns show up blank but still have a header.
I used $('#grid').igGrid('destroy'); to solve that issue but the entire div jumps around when it is destroyed and then pops back when the data is added. Is there a cleaner way to repopulate a grid and have it redraw? I've read a bunch of threads on this issue but most were from 2012 and I was hoping that a cleaner solution has been discovered.
Thanks
Hello William,
Thank you for contacting Infragistics Developer Support!
Does the grid have specified width, if the grid has initial width and all the remaining width should be redistributed to the rest of the columns. If have set it could you please provide an isolated working sample attached to your reply as zip, so I can investigate it.
Thank in advance.
If I load
"site_code":[{"DISEASE_SITE":"BLAD","DESCRIPTION":"Bladder","CASES":"288","BC":"435","LN":"5","LT":"2","NL":"774","PL":"813","TP":"442","UK":"1","UR":"74"}],
I get what is shown in the attachment. It looks clean and shows all of the columns nicely
but if I rebind the grid with
site_code":[{"DISEASE_SITE":"ANAL","DESCRIPTION":"Anal","CASES":"5","BC":"10","NL":"15","PL":"20","TP":"9"}],
it leave the old list of columns and does not remove the ones that do not have any data. see attachment in next reply
By the given screenshots I cannot reproduce the issue, so I can investigate and help you.
Please review the attached sample and modify it, so the issue reproduces.
Thank you in advance!
here is the modified code so it reproduces the problem. What I did was make the Bladder data the default then loaded the other data by selecting the drop down and you can see that it has more columns than it needs. The blank columns should not render. If the grid is destroyed between load then it is fine but flickers more than necessary.
Thanks for your help
Bill
Hello Bill,
Thank you for your patience!
I suggest you define all your columns and hide them if an columns is completely empty. If you do not define the columns there is a scenario, where the grid could have less columns than the new data source, and when you switch the data source, some of the new columns may not be displayed, because they are initially generated.
You can do this by using the dataRendered event
1 2 3 4 5 6 7 8 9 10 11 12 13
dataRendered: function (evt, ui) { var columnKeys = $grid.igGrid('option', 'columns').map(function (item) { return item.key; }); for (var i = 0; i < columnKeys.length; i++) { if(isColumnEmpty(columnKeys[i])) { $grid.igGrid('hideColumn', columnKeys[i]); } else { $grid.igGrid('showColumn', columnKeys[i]); } } }
To check if a columns is empty you can get allRows using the allRows method and iterating of each columns cells and get their text by using the getCellText method.
!Note if a cell is empty in the grid it is being set to which is not the default white space character. This is specific for the igGrid.
function isColumnEmpty(columnKey) { var rows = $grid.igGrid('allRows'); for (var i = 0; i < rows.length; i++) { var cellText = $grid.igGrid('getCellText', i, columnKey); if (cellText.length == 1 && cellText.charCodeAt(0) == 160) { return true; } } return false; }
Please review the attached sample and let me know if you have any questions.
Sorry-- that will not be possible. The columns will be determined by the disease site and that could be anything that the human body has, I only showed an example with two possible Cancer sites. Is this done on purpose? I'm trying to migrate my code from a major competitor and not being able to refresh/change the data maybe a deal breaker.
Hello,
I am still following your case. Have you been able to submit your product idea?If you have any concerns or questions, please feel free to contact me, I will be glad to help you.Thank you for choosing Infragistics components!