Home/ Questions/Q 9151825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:53:49+00:00

When editing column with edittype: select and multiple: true , jqGrid sends the data

  • 0

When editing column with edittype: select and multiple: true, jqGrid sends the data to the server as comma-separated values. Is that possible to bind some event to this specific column, which will return an array instead of comma-separated values?

I’d like to avoid using serializeEditData event, since

  1. this one is grid-specific, not column-specific which would be a trouble for me – I’m trying to separate column logic from grid logic
  2. it does not sound like a good idea to convert array to string, and the string to the very same array again.
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think that you will have to use edittype: 'custom' in the case and provide your custom implementations of custom_element and custom_value methods of editoptions. If the value from the custom input element will be need to read jqGrid will call custom_value method with the parameter 'get' parameter. Your implementation of custom_value method could return array of items in the case.

    It’s important to understand that in general you will need to implement custom formatter which allows to display array of data which are input for multiselect. Fortunately formatter: "select" has the line

    cellval = cellval + "";

    which convert array to comma separated items. Because of the line the array will by converted to string by usage of .join(",") and formatter: "select" successfully accepts arrays as input.

    The demo

    enter image description here

    demonstrates the described above approach. It uses the following code:

    {
    name: "Subcategory",
    width: 250,
    formatter: "select",
    edittype: "custom",
    editoptions: {
        value: {"1": "football", "2": "formula 1", "3": "physics", "4": "mathematics"},
        custom_element: function (value, options) {
            return $.jgrid.createEl.call(this, "select",
                $.extend(true, {}, options, {custom_element: null, custom_value: null}),
                value);
        },
        custom_value: function ($elem, operation, value) {
            if (operation === "get") {
                return $elem.val();
            }
        },
        multiple: true
    }
}

    In the above code I use $.jgrid.createEl to create multivalue select by existing code of jqGrid. The only thing which one need to do is removing of custom_element and custom_value from the options to prevent unneeded call of the methods from setAttributes. If one would modify the line of setAttributes code and include "custom_value" and "custom_element" in the list of excluded attributes the expression $.extend(true, {}, options, {custom_element: null, custom_value: null}) could be reduced to options.

    In the way we get almost the same <select> as using edittype: "select". There are two differences only:

    • the <select> element created inside of edittype: "custom" will have additional attribute class="customelement"
    • the <select> element created inside of edittype: "custom" will be wrapped (will be direct child) inside of <span class="editable">...</span>

    Such differences seems be not important in our case.

    UPDATED: The code of setAttributes method is now fixed in the main code of jqGrid on the gtihub (see the suggestion and the commit). So in the next version of jqGrid (higher as 4.4.1) one could reduce the code of custom_element to

    custom_element: function (value, options) {
    return $.jgrid.createEl.call(this, "select", options, value);
}

    See the corresponding demo.

    • 0