ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: argo on August 06, 2014, 11:17:56 pm

Title: modifying select options dynamically
Post by: argo on August 06, 2014, 11:17:56 pm

Is there an example showing how to modify the built in <select> options when using the inline editor?

What I'm trying to do is disable certain <option> tags based on another column value.  In the editor I'm doing:
var $cell = ui.$cell;
var $s = ui.$cell.find("select");
$s.find("option").each(function() {
 // this is where I dynamically add/remove the "disabled" property of the <option> as needed based on the ui.rowData values
});

This DOES result in a changed DOM element for the <select>. The problem is that the entire <select> becomes unresponsive. The grid displays the select but when I click it, nothing happens. But if I hit the space bar, it'll open up just fine. Somehow modifying the <option> tags dynamically makes the <select> unresponsive to click events. I know the loop above to modify the options is working because when I open the <select> with the space bar, I can see that the correct options are disabled.

Title: Re: modifying select options dynamically
Post by: paramvir on August 07, 2014, 04:51:24 pm

That is a select list related question, this post might be helpful.

http://stackoverflow.com/questions/877328/jquery-disable-select-options-based-on-radio-selected-need-support-for-all-brow

Title: Re: modifying select options dynamically
Post by: argo on August 07, 2014, 07:42:08 pm

I think my evidence points to this issue being related specifically to paramquery. Here's the evidence:

In my post I state that the <select> is modified correctly. My JS code is working fine at modifying the <option> tags. And the same code works fine when the <select> is outside of the paramquery control. This is only an issue when I try to modify the DOM of the built-in auto-generated paramquery <select>. That's why I think the problem has to do specifically with the grid's handling of the <select>

The exact same code runs fine on Chrome and FF and the grid <select> works as expected. Only IE (tested 8 and 10) causes the <select> to become unresponsive, and only when modifying the paramquery generated <select>. If I don't disable any options in the <select> the form control works fine. But as soon as I disable even one of the <option> tags, IE causes the entire <select> to become unresponsive.  This does not happen if the <select> is outside of paramquery, so I don't see it as an overall IE issue, but rather seems to be specific to the paramquery <select> control.

One additional oddity. This issue happens if I disable the <option> using jQuery's prop() function OR using the attr()/removeAttr() functions. But if remove() the <option> entirely, the <select> behaves normally and the removed options are in fact gone. So the issue seems specifically related to making at least one <option> tab disabled.

Do you/have you ever written code to enable or disable the options in the generated select?

Title: Re: modifying select options dynamically
Post by: paramvir on August 07, 2014, 10:19:27 pm

Please try this

Code: [Select]

            init: function (ui) {
                var $sel = ui.$cell.find("select");
                $sel.find("option").each(function () {                    
                    var $option = $(this),
                                          text = $option.text();
                    if ( some_condition ) {
                        //$option.attr("disabled", "disabled");
                        $option.replaceWith("<option disabled='disabled'>"+ text +"</option>");
                    }
                });
            },


Title: Re: modifying select options dynamically
Post by: argo on August 07, 2014, 10:58:00 pm

Awesome! replaceWith() works. Thanks so much, I didn't even think of replacing the options instead of modifying them.

For future reference, any clue why replaceWith() works but setting the attr() doesn't?