jQWidgets Forums

Tagged: #jqwidgets-grid, angular grid, bootstrap grid, change true false, checkbox, excel, javascript grid, jquery grid, jqxGrid ;, true false

This topic contains 10 replies, has 3 voices, and was last updated by millhorn 2 years, 8 months ago.

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

Author

checkbox text value "True / False" change on filter mode Posts

June 2, 2016 at 9:48 pm checkbox text value "True / False" change on filter mode #84847

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”

June 3, 2016 at 6:16 am checkbox text value "True / False" change on filter mode #84858

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

June 3, 2016 at 8:10 am checkbox text value "True / False" change on filter mode #84867

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

June 4, 2016 at 9:13 am checkbox text value "True / False" change on filter mode #84893

SysProfile

Participant

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

June 6, 2016 at 6:15 am checkbox text value "True / False" change on filter mode #84914

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

June 11, 2016 at 5:51 pm checkbox text value "True / False" change on filter mode #85042

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?

June 11, 2016 at 5:56 pm checkbox text value "True / False" change on filter mode #85043

SysProfile

Participant

I just need to change the labels

June 13, 2016 at 6:23 am checkbox text value "True / False" change on filter mode #85055

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

June 18, 2016 at 2:27 am checkbox text value "True / False" change on filter mode #85233

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/

June 20, 2016 at 1:51 pm checkbox text value "True / False" change on filter mode #85275

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

August 15, 2022 at 6:07 pm checkbox text value "True / False" change on filter mode #122340

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.

Author

Posts

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

You must be logged in to reply to this topic.