Search code examples
javascriptjqueryjquery-uijqgridjqgrid-asp.net

Apply Jqgrid required attribute dynamically


In Jqgrid you apply a required attribute to any given field like this

 { name: 'Comments', index: 'Comments', editable: true, editrules: { required: true }, edittype: 'textarea' }

How would I go about doing this dynamically? I'd like to make a field required, based on another field (like the selected value of a dropdown/combobox)

I know where to place the code, eg, my dropdown's select event. But not how to apply the required attribute in any other way other than the code sample I supplied..


Solution

  • I suggest that you use some event to monitor the changes in the select control and change the value of the required option of editrules.

    For example in the demo I used 'focusout' event on the select control of 'ship_via' column to change the required option of editrules of the column 'note'. I used the 'focusout' event because the code used the bug fix which I suggested here. You can use other events alternatively, but you should test there in different browsers.

    The code which I used in the demo is

    {name: 'ship_via', index: 'ship_via', width: 105, align: 'center', editable: true,
        formatter: 'select', edittype: 'select', editoptions: {
            value: 'FE:FedEx;TN:TNT;IN:Intim',
            defaultValue: 'IN',
            dataEvents: [
                {
                    type: 'focusout',
                    fn: function (e) {
                        $grid.jqGrid('setColProp', 'note', {
                            editrules: {required: ($(e.target).val() !== "IN")}
                        });
                    }
                }
            ]
        },
        stype: 'select', searchoptions: {
            sopt: ['eq', 'ne'],
            value: ':Any;FE:FedEx;TN:TNT;IN:IN'
        } },
    { name: 'note', index: 'note', width: 60, sortable: false, editable: true,
        edittype: 'textarea' }