How to inject additional html codes to jqGrid's column-chooser dialog?

Question

Is it possible to inject additional html codes to the dialog of the jqGrid Column Chooser dialog? If so then what's the best way to do it?

$('#jqgridTest').columnChooser({
    title: "Saved Builds",
    //Inject some html codes here??
});

what exactly you want to change in `columnChooser` dialog? Which HTML fragment you need to inject? An example could explains many opened questions. — Oleg, Sep 03 '13 at 17:14
Adding a drop-down selection and another button to the columnChooser dialog box. — fletchsod, Sep 03 '13 at 17:39
I still don't understand what exactly you need. Where you need add "a drop-down selection" for example and where add the button? An picture could be helpful. Do you need have the `columnChooser` dialog box resizable (see [the answer](http://stackoverflow.com/a/9688942/315935)) or you use original code from jqGrid? I don't understand where you have the problem in adding HTML eleemnts to the dialog. — Oleg, Sep 03 '13 at 18:21
The example is already provided in the original post above. I don't see how to inject a drop-down selection and inject a button into the columnChooser script for it to show up on the Column-Chooser dialog box. — fletchsod, Sep 04 '13 at 15:16
If **the position** of HTML fragment in the Column-Chooser dialog box not important for you I can post an example which shows how you can modify the dialog. — Oleg, Sep 04 '13 at 15:53

score 2 · Accepted Answer · answered Sep 04 '13 at 16:15

You can examine the HTML structure of columnCooser dialog you will see the following

enter image description here

So you can make any modifications of the columnCooser dialog which you need. You need just insert HTML fragment which you need on the place which you need. For example to insert "Hi!" button I used the following JavaScript code of onClickButton:

onClickButton: function () {
    var $button = $('<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" type="button"><span class="ui-button-text">Hi!</span></button>');
    $(this).jqGrid('columnChooser');
    $("#colchooser_" + this.id +
        " ~ div.ui-dialog-buttonpane > div.ui-dialog-buttonset");
        //.prepend($button);
    $button.click(function () {
        alert('"Hi!" button is clicked!');
    });
}

As the result (see the corresponding demo here) one will have something like the picture above after clicking on the "Hi!" button:

enter image description here

How to inject additional html codes to jqGrid's column-chooser dialog?

1 Answers1