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.

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,

Lance

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:

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) 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) {...}

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?

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.

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,

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.