CODEWITHSUNDEEP
javascriptjqueryjqgrid
ralph
ralph

Reputation: 1017

Dynamically size jqGrid Add/Edit Form fields

I have a jqGrid that has multiple select boxes and text fields. I would like all of the form fields to be the same length. I would like all of the form fields to be the size of the widest select box or text field. Is there a way that I can do this?

Thanks for all of your help.

Upvotes: 0

Views: 2166

Answers (1)

Oleg
Oleg

Reputation: 221997

You can use afterShowForm event to get the width of the widest select box and to set the width of all selects to the value.

The demo change the standard Edit/Add form from

enter image description here

to

enter image description here

The corresponding code:

var resizeSelectWidth = function ($form) {
        var maxWidth = 0, newMaxWidth = 0, i,
            $selects = $form.find('tr.FormData > td.DataTD > select.FormElement'),
            cn = $selects.length;

        // calculate the max width of selects
        for (i = 0; i < cn; i += 1) {
            maxWidth = Math.max(maxWidth, $($selects[i]).width());
        }
        maxWidth += 2; // increase width to improve visibility

        // change the width of selects to the max width
        for (i = 0; i < cn; i += 1) {
            $($selects[i]).width(maxWidth);
            newMaxWidth = Math.max(maxWidth, $($selects[i]).width());
        }
    };

...
$("#list").jqGrid('navGrid', '#pager', {del: true},
    {afterShowForm: resizeSelectWidth},
    {afterShowForm: resizeSelectWidth});

Upvotes: 2

Related Questions