jQWidgets Forums

Tagged: jqxgrid

This topic contains 9 replies, has 5 voices, and was last updated by harry 11 years, 2 months ago.

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

Author

Header Height & Showfilterrow Posts

April 5, 2013 at 8:29 am Header Height & Showfilterrow #18646

naatha

Member

Hello,

I have increased the header height by using the following css and it works fine.

        .jqx-grid-header
        {
            height: 40px !important;     
        }

Then when i set showfilterrow: true, the grid display the top line of the column header and bottom line stay behind the filter row.

How can i display both properly.

Thanks

April 5, 2013 at 2:47 pm Header Height & Showfilterrow #18668

support

Participant

Hi naatha,

In order to change the jqxGrid’s header height you can use the columnsheight property. Please take a look at the following example:

<!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.8.2.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/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            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(
            {
                columnsheight:'40px',
                width: 685,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                theme: theme,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
                  {
                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                  },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number',  cellsalign: 'right' }
                ]
            });
            $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme });
            $('#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 Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

April 5, 2013 at 3:18 pm Header Height & Showfilterrow #18672

naatha

Member

Thanks Mariya, it works fine.

September 17, 2013 at 6:37 pm Header Height & Showfilterrow #29143

Participant

Hello,
I’m facing the same issue. Your fix works with Chrome, but doesn’t work with IE8. Is there another work around?
Thanks

September 18, 2013 at 4:39 am Header Height & Showfilterrow #29152

Peter Stoev

Keymaster

Hi jb,

The columnsheight property works in IE8 and it is not a fix, but a feature of the Grid which was not used in this topic.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 15, 2014 at 1:06 pm Header Height & Showfilterrow #51082

harry

Participant

Thankx for the solution. The columnsheight works, but first row of grid is behid the showfilterrow menu. How to solve this issue. Here is my code”

`columnsheight:’40px’,
width: ‘16%’,
height: 800,
source: dataAdapter,
showfilterrow: true,
filterable: true,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
Theme: ‘ui-lightness’,
ready: function () {
// callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
},
columnsresize: true,`

March 16, 2014 at 5:42 am Header Height & Showfilterrow #51084

Peter Stoev

Keymaster

Hi harry,

`columnsheight:’40px’ is wrong. columnsheight should be written as “columnsheight and the value should be Number, not String. In addition, there’s no Theme property. The property’s name is theme.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 16, 2014 at 11:31 am Header Height & Showfilterrow #51086

harry

Participant

Thankx for the suggestion, but it is nor working. If i change the code to
columnsheight:’40’,
width: ‘48%’,
height: 800,
source: dataAdapter,
showfilterrow: true,
filterable: true,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
The whole data from my grid is lost, The data in grid is visible only if i use px
columnsheight:’40px’,
width: ‘48%’,
height: 800,
source: dataAdapter,
showfilterrow: true,
filterable: true,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
Still the first row is behind the showfilterrow. Its not visible. Please suggest.

March 17, 2014 at 5:52 am Header Height & Showfilterrow #51113

Peter Stoev

Keymaster

Hi harry,

You still did not set the columnsheight property correctly. In addition, you set it 2 times. Please, refer to this working sample: http://jsfiddle.net/jqwidgets/LspfG/ which shows how this should be done.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 18, 2014 at 6:52 am Header Height & Showfilterrow #51230

harry

Participant

Thanks a lot Peter, its working now perfectly. I have one more question, some column of my grid has space and filter is not working on those columns. Is i remove space with any character, the filter works. Is there any way, filter works with spaces in the grid column. The filter is working for id, Q and A column, but if fails for H and M column. The grid says no data to display.
[{
“id”: “1”,
“Q”: “L”,
“A”: “-“,
“H”: ” “,
“M”: ” ”
}]
Thanks

Author

Posts

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

You must be logged in to reply to this topic.