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
image show grid.
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!
If you have any concerns about the flicker I suggest you use a second grid, which will be hidden and when a user selects an option it will be initialized. And when the second grid is initialized and rendered, hide and destroy the first one, and show the second on the first grid places.
If this workaround does not works for you, this particular feature can be introduced in the future and should be logged as a new product idea at:
http://ideas.infragistics.com.
There are many benefits to submitting a product idea:
- Direct communication with our product management team regarding your product idea.- Notifications whenever new information regarding your idea becomes available.- Ability to vote on your favorite product ideas to let us know which ones are the most important to you. You will have ten votes for this and can change which ideas you are voting for at any time.- Allow you to shape the future of our products by requesting new controls and products altogether.- You and other developers can discuss existing product ideas with members of our Product Management team.
Steps to create your idea:1. Log into the Infragistics Product Idea site at http://ideas.infragistics.com (creating a new login if needed).2. Navigate to the product / platform channel of your choice (e.g. WPF, Windows Forms, ASP.NET, HTML5 / Ignite UI, iOS / NucliOS, etc.)3. Add your product idea and be sure to be specific and provide as much detail as possible. Explain the context in which a feature would be used, why it is needed, why it can’t be accomplished today, and who would benefit from it. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. Be convincing!
The Product Idea site puts you in the driver’s seat and allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
So, the other approach would be to use the igDataChart and use its tool tip mechanism, if you think that it can serve your purpose and maybe alter the default style using theming or some options alternations.
I will be more than happy if you can share your feedback on our product ideas site.