jQWidgets Forums

Tagged: createfilterwidget, DropDownList, filter, grid, itemHeight, jqxDropDownList, jqxgrid

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

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

Author

Grid: Filter Row: Drop down option line height Posts

October 29, 2014 at 3:55 am Grid: Filter Row: Drop down option line height #61773

Participant

Hi JQX Team,

I am using JQXGrid and have enabled filter row. I am trying to set my custom line-height to droop down options in one of filter header column.
The JQXGrid internally uses JQXDropdownlist which uses JQXListbox and list box has property ‘itemHeight’.

I set this property inside column’s callback ‘createfilterwidget’ like below:
var createListBoxFilterWidget = function (column, columnelement, widget) {
var listbox;
if(column.filtertype === ‘list’ || column.filtertype === ‘checkedlist’){
listbox = widget.jqxDropDownList(‘listBox’);
} else if(column.filtertype === ‘number’){
listbox = widget.find(‘[role=”combobox”]’).jqxDropDownList(‘listBox’);
}
if(listbox){
listbox.itemHeight= 25;
listbox.refresh();
}
}

The problem is, this refresh call removes default option of the filter column drop down like ‘please select’ and ‘select all’ from boolean drop down and checked list respectively.
Is there any other way where i can give this property while initializing the column like i give ‘showfilterrow’?
Is there any other method to call instead of refresh on list box?

Regards,
Deepak Pundir

October 29, 2014 at 1:36 pm Grid: Filter Row: Drop down option line height #61797

Dimitar

Participant

Hello Deepak Pundir,

jqxDropDownList also has an itemHeight property so you can do the following:

var createListBoxFilterWidget = function (column, columnelement, widget) {
    widget.jqxDropDownList({ itemHeight: 25 });
}

Best Regards,
Dimitar

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

November 14, 2014 at 6:11 am Grid: Filter Row: Drop down option line height #62734

Deepak Singh Pundir

Participant

This code just change the ‘itemHeight’ property but does not render the drop down according to this new ‘itemHeight’.

Please suggest.

Regards,
Deepak Pundir

November 14, 2014 at 7:44 am Grid: Filter Row: Drop down option line height #62747

Dimitar

Participant

Hi Deepak Pundir,

The code works on our side. Here is the example we tested:

<!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.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/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="../../jqwidgets/globalization/globalize.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' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };

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

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
                  {
                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220, createfilterwidget: function (column, columnelement, widget) {
                          widget.jqxDropDownList({ itemHeight: 45 });
                      }
                  },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
                ]
            });
            $('#clearfilteringbutton').jqxButton({ height: 25 });
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton"
        type="button" />
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.