Currently I have an igGrid and the first column has an editorType of "combo" with mode of "dropdown". There are three values in the igCombo: "Approved", "Pending", and "Declined".
It's working fine, however I've been given the requirement of removing the "Pending" item from the combo if the value that comes through in the dataSource is either "Approved" or "Declined". In other words, if the Status value is not equal to "Pending", then "Pending" should not be an option in the list.
I've wrestled with this for awhile and can't figure out how to do it. The two issues I'm running into are:
1) The following jquery code seem to have no effect:
var stat = $('.ui-iggrid-editingcell').text();
if (stat === 'Approved' || stat === 'Declined') {
$('#grid.igCombo option[value="Pending"]').remove();
}
2) Any attempt to fire a method in the dropDownOpening event, or even after the grid has been initialized results in the error "Cannot call methods on igCombo prior to initialization".
Can you please describe how to remove an item from the igCombo inside the igGrid?
Thanks,
Lance
Hello,
Thank you for your feedback and for sharing this with us. We believe that the other community members could benefit from such threads.
Please feel free to let me know if a question about our tool set comes up on your mind.
I was able to figure out a solution to my problem. I just created a second dataSource (without "Pending" in it) and then bind to it when appropriate in the editCellStarted event. Here's the relevant code:
var StatusCodesJSON = [ { "Status": "Approved", "StatusCode": "Approved" }, { "Status": "Pending", "StatusCode": "Pending" }, { "Status": "Declined", "StatusCode": "Declined" } ];
var StatusCodesNoPendingJSON = [ { "Status": "Approved", "StatusCode": "Approved" }, { "Status": "Declined", "StatusCode": "Declined" } ];
editCellStarted: function (evt, ui) { var selectedValue = $(ui.editor).igCombo("value"); // gets the current value of the cell // Checking if the user has updated the default value for Status if ((selectedValue !== null)) {
if (selectedValue !== "Pending") { // This statement is true when the Status value is Approved or Declined $(ui.editor).igCombo("option", "dataSource", StatusCodesNoPendingJSON); $(ui.editor).igCombo("dataBind"); $(ui.editor).igCombo("text", selectedValue); } } else { $(ui.editor).igCombo("option", "dataSource", StatusCodesJSON); $(ui.editor).igCombo("dataBind"); $(ui.editor).igCombo("text", "Pending"); } }
Thanks for all your help Hristo.
Hi Hristo,
This almost works perfectly. The only problem is that the very first time a combo box with "Accepted" or "Declined" is clicked and opened, all 3 values still show. After that first time, it works perfectly. In other words, it only functions correctly after one combo box has been clicked, opened, and closed. It doesn't work correctly the first time (unless it's "Pending"). Not sure why this is the case.
If you have a fix for this, please let me know. I'll see if I can figure it out on my end as well.
Thanks,Lance
Hello Lance Gardner,
I am happy to provide you with a sample that I believe is working exactly as you would like to.
You can see that the $(ui.editor).igCombo("value"); is used for getting the selected combo item value. Please be aware that this selector will only work when the editCellStarted event for a cell in the Status columns is fired. I would also like to note that Grid API calls do not work as expected with DIV elements and this may be the reason for getting "Cannot call methods on igCombo prior to initialization" error when trying to handle events. If this is the case please make sure that you are initializing the igGrid in a <table> element, not in a <div>.
I hope this answers your questions regarding this issue. Could you please review the attached sample and see if it meets your requirements. Please feel free to let me know if you have any other questions.
Hello,I am currently looking into this matter and will keep you posted of any available information.Please do not hesitate to contact us with any updates or additional questions regarding this scenario in the meantime.