jQuery UI Widgets Forums Grid checkbox text value "True / False" change on filter mode

This topic contains 10 replies, has 3 voices, and was last updated by  millhorn 3 months, 1 week ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author

  • SysProfile
    Participant

    How I can do so that when the type “excel” filter is activated, the “checkbox” type column display “True / False” in other words, for example, in Spanish “Selected / Not selected”


    Hristo
    Participant

    Hello SysProfile,

    We have many topics in our forum.
    Please, take a look at this topic (that is almost similar):
    http://www.jqwidgets.com/community/topic/filter-by-selection-or-sort-by-selection/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    SysProfile
    Participant

    Sorry but I think you has misunderstood my question. To write the questions I am using Google Translate probably that’s the reason.

    In the example you tell me, I can not find the solution to my problem. I will attach a print screen to this message

    https://drive.google.com/file/d/0BwBRLEj_yWFKaWNoTUJNOURmVEE/view?usp=sharing <- Google Drive shared image


    SysProfile
    Participant

    Please, I need help from someone. The component works, is a matter of appearance it is in another language


    Hristo
    Participant

    Hello SysProfile,

    You could create custom filter menu.
    Please, take a look at this demo:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/filtering-menu-custom-widgets.htm

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    SysProfile
    Participant

    @hristo Thanks for your answer, I have seen the example of “Filter”, the example does not have what I need. I need to change True for “Verdadero” and False for “Falso”. How I could easily change these labels?


    SysProfile
    Participant

    I just need to change the labels


    Hristo
    Participant

    Hello SysProfile,

    Unfortunately we do not support short way to do this.
    Sorry for inaccurate link in a previous post.
    Please, take a look at this demo:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filtering-menu-custom-widgets.htm

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    SysProfile
    Participant

    I just come back to this post, thanks for your response @hristo. In the example I not find a Boolean column. It’s very simple what I try to do, I need to change the label shown in the filter of a column. Not if you can make an example https://jsfiddle.net/

    • This reply was modified 6 years, 5 months ago by  SysProfile. Reason: Tag an user response

    Hristo
    Participant

    Hello SysProfile,

    Please, take a look this workaround:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>Example
        </title>
        <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script src="../../libs/jquery-1.11.3-dev.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../../scripts/demos.js"></script>
        <script src="../../../demos/sampledata/generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = generatedata(220);
                var exampleTheme = theme;
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'custom', type: 'bool', map: 'available' },
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'date', type: 'date' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    datatype: "array"
                };
    
                var adapter = new $.jqx.dataAdapter(source);
                
                var buildFilterPanel = function (filterPanel, datafield) {
                    var textInput = $("<input style='margin:5px;'/>");
                    var applyinput = $("<div class='filter' style='height: 25px; margin-left: 20px; margin-top: 7px;'></div>");
                    var filterbutton = $('<span tabindex="0" style="padding: 4px 12px; margin-left: 2px;">Filter</span>');
                    applyinput.append(filterbutton);
                    var filterclearbutton = $('<span tabindex="0" style="padding: 4px 12px; margin-left: 5px;">Clear</span>');
                    applyinput.append(filterclearbutton);
    
                    filterPanel.append(textInput);
                    filterPanel.append(applyinput);
                    filterbutton.jqxButton({ theme: exampleTheme, height: 20 });
                    filterclearbutton.jqxButton({ theme: exampleTheme, height: 20 });
    
                    var dataSource =
                    {
                        localdata: adapter.records,
                        datatype: "array",
                        async: false
                    }
                    var dataadapter = new $.jqx.dataAdapter(dataSource,
                    {
                        autoBind: false,
                        autoSort: true,
                        autoSortField: datafield,
                        async: false,
                        uniqueDataFields: [datafield]
                    });
                    var column = $("#jqxgrid").jqxGrid('getcolumn', datafield);
    
                    textInput.jqxInput({ theme: exampleTheme, placeHolder: "Enter " + column.text, popupZIndex: 9999999, displayMember: datafield, source: dataadapter, height: 23, width: 175 });
                    textInput.keyup(function (event) {
                        if (event.keyCode === 13) {
                            filterbutton.trigger('click');
                        }
                    });
    
                    filterbutton.click(function () {
                        var filtergroup = new $.jqx.filter();
    
                        var filter_or_operator = 1;
                        var filtervalue = textInput.val();
                        var filtercondition = 'contains';
                        var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);            
                        filtergroup.addfilter(filter_or_operator, filter1);
                        // add the filters.
                        $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
                        // apply the filters.
                        $("#jqxgrid").jqxGrid('applyfilters');
                        $("#jqxgrid").jqxGrid('closemenu');
                    });
                    filterbutton.keydown(function (event) {
                        if (event.keyCode === 13) {
                            filterbutton.trigger('click');
                        }
                    });
                    filterclearbutton.click(function () {
                        $("#jqxgrid").jqxGrid('removefilter', datafield);
                        // apply the filters.
                        $("#jqxgrid").jqxGrid('applyfilters');
                        $("#jqxgrid").jqxGrid('closemenu');
                    });
                    filterclearbutton.keydown(function (event) {
                        if (event.keyCode === 13) {
                            filterclearbutton.trigger('click');
                        }
                        textInput.val("");
                    });
                }
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: adapter,
                    filterable: true,
                    sortable: true,
                    ready: function () {
                    },
                    autoshowfiltericon: true,
                    columnmenuopening: function (menu, datafield, height) {
                        var column = $("#jqxgrid").jqxGrid('getcolumn', datafield);
                        if (column.filtertype === "custom") {
                            menu.height(175);
                            setTimeout(function () {
                                menu.find('input').focus();
                            }, 25);
                        }
                        else menu.height(height);
                    },
                    columns: [
                      {
                          text: 'Available', datafield: 'custom', columntype: 'checkbox', width: 70,
                          filtertype: "custom",
                          createfilterpanel: function (datafield, filterPanel) {
                              var applyinput = $("<div class='filter' style='height: 25px; margin-left: 20px; margin-top: 7px;'></div>");
                              var filterbutton = $('<span tabindex="0" style="padding: 4px 12px; margin-left: 2px;">Filter</span>');
                              var filterclearbutton = $('<span tabindex="0" style="padding: 4px 12px; margin-left: 5px;">Clear</span>');
                              var listOptions = ("<div id='customList' style='margin:5px;'></div>");
                              applyinput.append(filterbutton);
                              applyinput.append(filterclearbutton);
                              applyinput.append(listOptions);
                              filterPanel.append(applyinput);
    
                              filterbutton.jqxButton({ theme: exampleTheme, height: 20 });
                              filterclearbutton.jqxButton({ theme: exampleTheme, height: 20 });
    
                              var source = ['Selected', 'Not selected'];
                              $('#customList').jqxListBox({
                                  width: 150,
                                  height: 55,
                                  source: source,
                                  checkboxes: true
                              });
    
                              filterbutton.click(function () {
                                  var filtergroup = new $.jqx.filter();
                                  var filter_or_operator = 1;
                                  var choise = $('#customList').jqxListBox('getCheckedItems');
                                  var filtertype = 'booleanfilter';
                                  if (choise.length == 1) {
                                      var currentElement = choise[0].label;
                                      var filtervalue = false;
                                      var filtercondition = 'EQUAL';
                                      if (currentElement == 'Selected') {
                                          filtervalue = true;
                                      }
                                      var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
                                      filtergroup.addfilter(filter_or_operator, filter);
                                      $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
                                      $("#jqxgrid").jqxGrid('applyfilters');
                                      $("#jqxgrid").jqxGrid('closemenu');
                                  }
                                  else {
                                      $("#jqxgrid").jqxGrid('closemenu');
                                  }
                              });
                              filterbutton.keydown(function (event) {
                                  if (event.keyCode === 13) {
                                      filterbutton.trigger('click');
                                  }
                              });
                              filterclearbutton.click(function () {
                                  $("#jqxgrid").jqxGrid('removefilter', datafield);
                                  // apply the filters.
                                  $("#jqxgrid").jqxGrid('applyfilters');
                                  $("#jqxgrid").jqxGrid('closemenu');
                              });
                              filterclearbutton.keydown(function (event) {
                                  if (event.keyCode === 13) {
                                      filterclearbutton.trigger('click');
                                  }
                                  textInput.val("");
                              });
                          }
                      },
                      {
                          text: 'First Name', datafield: 'firstname', width: 160,
                          filtertype: "custom",
                          createfilterpanel: function (datafield, filterPanel) {
                              buildFilterPanel(filterPanel, datafield);
                          }
                      },
                      {
                          text: 'Last Name', datafield: 'lastname',
                          filtertype: "custom",
                          createfilterpanel: function (datafield, filterPanel) {
                              buildFilterPanel(filterPanel, datafield );
                          },
                          width: 160
                      },
                      { text: 'Product', datafield: 'productname', filtertype: 'checkedlist', width: 170 },
                      { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
                      { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                      { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                    ]
                });
    
                $('#events').jqxPanel({ width: 300, height: 80 });
    
                $("#jqxgrid").on("filter", function (event) {
                    $("#events").jqxPanel('clearcontent');
                    var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
    
                    var eventData = "Triggered 'filter' event";
                    for (i = 0; i < filterinfo.length; i++) {
                        var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                        $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                    }
                });
    
                $('#clearfilteringbutton').jqxButton({ height: 25 });
                $('#filterbackground').jqxCheckBox({ checked: true, height: 25 });
                $('#filtericons').jqxCheckBox({ checked: false, height: 25 });
                // clear the filtering.
                $('#clearfilteringbutton').click(function () {
                    $("#jqxgrid").jqxGrid('clearfilters');
                });
                // show/hide filter background
                $('#filterbackground').on('change', function (event) {
                    $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
                });
                // show/hide filter icons
                $('#filtericons').on('change', function (event) {
                    $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
            <div id="eventslog" style="margin-top: 30px;">
                <div style="width: 200px; float: left; margin-right: 10px;">
                    <input value="Remove Filter" id="clearfilteringbutton" type="button" />
                    <div style="margin-top: 10px;" id='filterbackground'>Filter Background</div>
                    <div style="margin-top: 10px;" id='filtericons'>Show All Filter Icons</div>
                </div>
                <div style="float: left;">
                    Event Log:
                    <div style="border: none;" id="events">
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    You need to transform to desirable state. This example is based on this demo.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    millhorn
    Participant

    I know this question is quite aged, but I asked the question recently and the response was:

    You don’t need to use the cellsRenderer of the grid, but the renderer of the jqxDropDownList.

    Here is a demo: https://codepen.io/r3hab/pen/gOeQOrX Look at the has401k column.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.