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
Update, here's my code within the grid now...
name: 'Updating', enableDeleteRow: false, enableAddRow: false, editMode: 'cell', editCellStarted: function (evt, ui) { var cbtxt = ui.editor.igCombo("text"); if (cbtxt !== "Pending") { ...Now what do I do? } },
So now I'm in the right place at the right time to do what I need to do...but I'm at a loss as to how to do it. igCombo doesn't recognize the standard jquery methods to remove or hide an item from a combo box, and I don't see anything in the documentation that allows for removal of a specific item from the igCombo. How do I do it?
Here's the current workflow:
1) Value of "Status" for a record in the grid is "Approved", "Denied", or "Pending". This value comes from the database.
2) User clicks on "Status" cell for a record in the grid to update the value (in the now instantiated combo box).
3) User can select one of those three values to update the record in the database. The values in the combo box comes from my code:
var StatusCodesJSON = [ { "Status": "Approved", "StatusCode": "Approved" }, { "Status": "Pending", "StatusCode": "Pending" }, { "Status": "Declined", "StatusCode": "Declined" } ];
Here's what I NEED my workflow to be:
3) If the current Status is "Pending", the user can select one of those three values to update the record in the database. The values in the combo box comes from my code:
var StatusCodesJSON = [{ "Status": "Approved", "StatusCode": "Approved" },{ "Status": "Pending", "StatusCode": "Pending" },{ "Status": "Declined", "StatusCode": "Declined" }];
4) If the current Status for the record is either "Approved" or "Declined", then "Pending" should not be an option in the combo box. In other words, once a record's Status has been updated to "Approved" or "Declined" the user should no longer see "Pending" as an option in the Status combo box.
I hope that makes it clear what I'm trying to do. The editCellStarted event is too late for me to do that. That's why I've been trying (unsuccessfully) to target either the dropDownOpening or dropDownOpened events.
I've even tried to empty the combo box and then populate the values dynamically based on the current value in the cell...but I keep running into the error "Cannot call methods on igCombo prior to initialization".
By the way, when I try to reference ui.editor.igCombo as a selector in my code, I get an undefined error. That happens even when I pass ui as a parameter in the function (i.e. - function (evt, ui) {...}
Hi Hristo,
Thank you for your reply. Yes, I do need to be able to remove one of the three values at runtime. The problem is what I described in my previous message: "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".
I'm not sure how to get around this. The three values (Approved, Declined, Pending) come from a static json source that never changes. When a record first comes through it has a default status of "Pending". But once the record has been updated to either "Approved" or "Declined" then "Pending" should no longer be available in the combo box for that record. Hope that makes sense.
The only way I can think to achieve this is to use jQuery remove() at runtime based on the current text value in the combo box, but that's where I'm running into that error. Any suggestions you have on how to achieve this would be greatly appreciated.
Thank you,
Hello Lance Gardner,
When using a combo editor inside an igGrid the combo is defined as an editor provider. Therefore you can use the following selector:
ui.editor.igCombo("itemByIndex", id)
in the editCellStarted event, where id is the Index of item within drop-down list. This will return a json object where the "text" key will give you the value you need ("Approved", "Declined"or "Pending").
Please help me to understand if you really need to remove items from the combo. If the data source provide you with the possible options among "Approved", "Declined" and "Pending" you can load them directly to the combo.
Please feel free to let me know if I misunderstood you or if you have any other questions.
I think the real problem for me is being able to find the appropriate selector for the combo box. If I could do that, then I could just use empty() to clear all three items, and append() to add the two items back that I want ("Approved" and "Declined").
For an igCombo inside an igGrid what is the correct selector needed in order to empty, remove, append items to the combo box?