How to change the text of a checkbox column in the filter

[SysProfileParticipant]

Excuse my bad English

I have a grid with multiple columns, the first column is type checkbox. When I open the filter listbox I have two options that say “true” and “false”. I need to change “true” to “Seleccionado” and “false” by “No seleccionado”.

The grid is filled by a MySQL query, the column corresponding to the checkbox returns true or false, the following are text, number and date

Query Example:

Enabled   |   User   |   Age  |  Date of admission
true          User A      35     2008-12-07
true          User B      42     2012-04-11
false         User C      68     1998-01-03

[ChristopherParticipant]

Hi SysProfile,

Have a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/grid-list-filter-with-key-value-column.htm?light

You can create a new data source for the jqxDropDownList that has the fields:

 { value: "true", label: "Seleccionado" },
  { value: "false", label: "No seleccionado" }

and pass it to the checkbox column’s filteritems property as a jqxdataAdapter object(just like in the demo). This will configure the filter exactly like you want to.
I made you a demo, here you go:
https://www.jseditor.io/?key=xb-grid

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[SysProfileParticipant]

Thanks Christopher.

The example is excellent. Now I have a little extra difficulty. All report columns are dynamically created by a query that builds the entire worksheet.

My English is not very good, it will be much better to see code

  var menuID = "<?php echo $menuID; ?>";
  var objColumns = null;
  $.ajax({
    url: "sys_Fill_GridColumns.php",
    type: "POST",
    async: false,
    cache: false,
    data: "menuID=" + menuID,
    success: function (result) {
      objColumns = jQuery.parseJSON(result); // Here create the variable that contains the data of the columns.
    }
  });

      //
      var aryDataFields = new Array();
      for (var i = 0; i < objColumns.length; i++) {
        aryDataFields.push({
          "name": objColumns[i].cmn_menu_webcfg_dfName, // The field name that I use in the query MySQL
          "type": objColumns[i].cmn_menu_webcfg_fields_dfType, // Could be: string, date, number, float, int or bool
          "format": objColumns[i].cmn_menu_webcfg_fields_dfInFormat // This is a character string, especially for the date format, default MySQL returns 'yyyy-mm-dd'
        });
      }

      var aryColumns = new Array();
      for (var i = 0; i < objColumns.length; i++) {
        aryColumns.push({
          "datafield": objColumns[i].cmn_menu_webcfg_dfName, // The field name that I use in the query MySQL, the same as the previous case
          "columntype": objColumns[i].cmn_menu_webcfg_dfType, // 'textbox','dropdownlist','numberinput','checkbox' or 'datetimeinput'
          "text": objColumns[i].cmn_menu_webcfg_fields_dfText, // It contains the title text of column
          "filterable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfFiltrable), // true or false
          "sortable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfSorteable), // true or false
          "editable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfEditable), // true or false
          "groupable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfGroupable), // true or false
          "menu": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfMenu), // true or false
          "exportable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfExportable), // true or false
          "cellsAlign": objColumns[i].cmn_menu_webcfg_fields_dfLCR, // cell align, 'left', 'center' or 'right'
          "align": objColumns[i].cmn_menu_webcfg_fields_dfColLCR, // column align, 'left', 'center' or 'right'
          "width": objColumns[i].cmn_menu_webcfg_fields_dfWidth, // column width in pixels
          "cellsFormat": objColumns[i].cmn_menu_webcfg_fields_dfOutFormat, // This is a character string, especially for the date format, in my case  'dd-mm-yyyy' format
          "hidden": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfHidden) // true or false
        });
      }

some more code to complete and understand how I do my jqxGrid

      var source = {
        localData: result,
        dataType: "json",
        dataFields: aryDataFields
      };
      var dataAdapter = new $.jqx.dataAdapter(source, {
        loadComplete: function () {
          $("#showLoader").jqxLoader("close");
        }
      });
      $("#datacontainer").jqxGrid({
        autoheight: false,
        enablebrowserselection: true,
        showgroupsheader: false,
        groupable: true,
        sortable: true,
        editable: true,
        filterable: true,
        columnsResize: true,
        autoRowHeight: false,
        columnsReorder: true,
        columnsheight: 40,
        rowsheight: 20,
        autoShowLoadElement: false,
        filterMode: "excel",
        theme: "custom",
        localization: getLocalization(),
        source: dataAdapter,
        columns: aryColumns
      });

As you can see, your example is perfect if I have a static code, I do not know if in a column, no checkbox, the property “filteritems” will be applied correctly. I do not know what happens if “filteritems: null” in the other columns, stop working.

Thanks for your time

[ChristopherParticipant]

Hi SysProfile,

You don’t have to add filteritmes to every column that doesn’t need it. You can just check if the datafield of the current column is the one you need – “Discontinued”. If it is, add the filteritems property to it. If not, don’t add it. You can make that check here:

var aryColumns = new Array();
      for (var i = 0; i < objColumns.length; i++) {
        aryColumns.push({
          "datafield": objColumns[i].cmn_menu_webcfg_dfName, // The field name that I use in the query MySQL, the same as the previous case
          "columntype": objColumns[i].cmn_menu_webcfg_dfType, // 'textbox','dropdownlist','numberinput','checkbox' or 'datetimeinput'
          "text": objColumns[i].cmn_menu_webcfg_fields_dfText, // It contains the title text of column
          "filterable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfFiltrable), // true or false
          "sortable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfSorteable), // true or false
          "editable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfEditable), // true or false
          "groupable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfGroupable), // true or false
          "menu": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfMenu), // true or false
          "exportable": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfExportable), // true or false
          "cellsAlign": objColumns[i].cmn_menu_webcfg_fields_dfLCR, // cell align, 'left', 'center' or 'right'
          "align": objColumns[i].cmn_menu_webcfg_fields_dfColLCR, // column align, 'left', 'center' or 'right'
          "width": objColumns[i].cmn_menu_webcfg_fields_dfWidth, // column width in pixels
          "cellsFormat": objColumns[i].cmn_menu_webcfg_fields_dfOutFormat, // This is a character string, especially for the date format, in my case  'dd-mm-yyyy' format
          "hidden": $.parseJSON(objColumns[i].cmn_menu_webcfg_dfHidden) // true or false
        });
      }

For example:
if(objColumns[i].cmn_menu_webcfg_dfName=== 'Discontinued') ... add the filteritems property.

Another approach is to iterate through the “aryColumns” array and add the filteritems property only to the “Discontinued” column.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts