Custom DropDown key value filter using label insted of value for filtering

[ExlordParticipant]

Hi, One of my grids columns is a status field which only has 0 and 1 as value and I want to show it as icons in the grid, but I also want a row filter with dropdown, witch uses a user friendly name instead of 1 and 0.

I was able to render the icons and make the dropdown filter but, when i try to filter it uses the user fiendly names i have given instead of the columns value which is 0 or 1.

    this._statusEnum    = [
      {key: 0, name: $.i18n._('Unread')},
      {key: 1, name: $.i18n._('Read')}
    ];
    this._statusSource  = {
      datatype  : "array",
      datafields: [
        {name: 'name', type: 'string'},
        {name: 'key', type: 'int'}
      ],
      localdata : this._statusEnum
    };
    this._statusAdapter = new $.jqx.dataAdapter(this._statusSource, {autoBind: true});

    this._table.jqxGrid(
      {
        width             : '100%',
        showfilterrow     : true,
        rtl               : true,
        theme             : 'web',
        sortable          : true,
        pageable          : true,
        autoheight        : true,
        filterable        : true,
        autoshowfiltericon: true,
        // editable          : true,
        selectionmode     : 'multiplerowsextended',
        columns           : [
          {
            text              : $.i18n._('Status'),
            datafield         : 'Status',
            align             : 'center',
            cellsalign        : 'center',
            width             : 120,
            filtertype        : 'list',
            filteritems       : this._statusAdapter,
            createfilterwidget: function (column, htmlElement, editor) {
              editor.jqxDropDownList({displayMember: "name", valueMember: "key"});
            },
            cellsrenderer     : (row, column, value) => {
              let icon = '';
              icon     = value ? 'fa-envelope-open-o text-muted' : 'fa-envelope text-primary';

              return "<div class='jqx-grid-cell-middle-align' style='margin-top: 6px;'><i class='fa fa-lg " + icon + "'></i></div>";
            }
          },
          
        ],
        
      }
    );

      let data = [...];//loaded from server [{Status:0},{Status:1},{Status:0},{Status:1}]
      this._table.jqxGrid('source', new $.jqx.dataAdapter({
        datatype  : "json",
        datafields: [
          {name: 'Status', type: "int",},
        ],
        localdata : data,

      }));

It rendered correctly with icons :

image

filter drop down is rendered ok as well :

image

but when i choose on option to edit with it uses the label instead of the value :
{"Statusoperator":"and","filtervalue0":"خوانده نشده","filtercondition0":"EQUAL","filteroperator0":1,"filterdatafield0":"Status"}.

"filtervalue0":"خوانده نشده" where it should be "filtervalue0":0.

Is this a bug? Or am i doing something wrong ???

[Peter StoevKeymaster]

Hi Exlord,

There is filtervalue which is the displayed value. There is also filterid which is the key value. Not doing something wrong, just still learning the Grid

Regards,
Peter

[ExlordParticipant]

when i choose a option from the filter dropdown,grid is filtered with Status=="خوانده نشده" which results in a empty grid because Status is 0 or 1 in the data source and no rows are rendered.
Can you tell me how to fix it?

[Peter StoevKeymaster]

Hi Exlord,

I think you did not understand my answer. In the data the Grid sends to the server, there is filtervalue and filterid, filtervalue is the displayed value, filterid is the data value. On your server, you should use either the one or the other to return filtered results.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts