Filter Row & Custom List Items with colored dropdown entries - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: color, createfilterwidget, filter, filter row, filteritems, grid, jqxgrid, render, renderer, style

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 10 months ago.

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

Author

Filter Row & Custom List Items with colored dropdown entries Posts

February 5, 2015 at 8:13 pm Filter Row & Custom List Items with colored dropdown entries #66647

badera

Participant

Dear jqWidgets Team

I like to use the feature “Filter Row & Custom List Items” (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filterrowwithcustomitems.htm?arctic).

But I should be able to colorize the entries in the drop down: This would look like this:

...
            $("#jqxgrid").jqxGrid(
            {
                width: 600,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                columns: [
                  { text: 'Name', filtertype: 'list', filteritems: items, datafield: 'name', width: 200 },
                  { text: 'Product', filtertype: 'checkedlist', filteritems: ['<span style="color:red">Black Tea</span>', 'Green Tea', 'Caffe Latte'], datafield: 'productname'}
                ]
            });
...

The visual aspect works, the entry is colorized; but the filter does no more work…
Is there a way to have a renderer function for displaying the entries in the dropdown? Or can we give e.g. an array of objects to filteritems like
[{text: '<span style="color:red">Black Tea</span>', value: 'Back Tea'}, ...].

I saw the example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/grid-list-filter-with-key-value-column.htm?arctic.
However, this seems to be little bit overkill for what I need to do.

Thank you in advance for your help.
– badera

February 6, 2015 at 7:00 am Filter Row & Custom List Items with colored dropdown entries #66673

Dimitar

Participant

Hello badera,

Here is how to implement this functionality using createfilterwidget and setting the filter dropdownlist’s renderer callback function. You may also need to set the selectionRenderer callback depending on your requirement.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            var items = new Array();
            items.push(data[0].name);
            items.push(data[1].name);
            items.push(data[2].name);
            items.push(data[3].name);
            items.push(data[4].name);

            $("#jqxgrid").jqxGrid(
            {
                width: 600,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                columns: [
                  { text: 'Name', filtertype: 'list', filteritems: items, datafield: 'name', width: 200 },
                  { text: 'Product', filtertype: 'checkedlist', filteritems: ['Black Tea', 'Green Tea', 'Caffe Latte'], datafield: 'productname',
                      createfilterwidget: function (column, columnElement, widget) {
                          widget.jqxDropDownList({ renderer: function (index, label, value) {
                              return '<span style="color: Red;">' + label + '</span>';
                          }
                          });
                      }
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.