1

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.
migajek
  • 8,524
  • 15
  • 77
  • 116

1 Answers1

2

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798