Avatar of lulu50
lulu50
Flag for United States of America asked on

Jquery Tree Grid

Hi,

I am using Jquery Tree Grid.

I want to change the height of the Tree Grid header.  

This is making me crazy!!!!

all I want is to change the height from 29 to 25 for example, I search all CSS files and can't find it than I searched all my files and still can't find it.

I don't know from where the inline style is getting populated.
I see the inline height for filtertreeGrid is 29px but I can't locate the file that populate the height.

I don't know!!! I looked everywhere in all my CSS in all my Jquery stuff nothing. It's like magic so,
I need your help please.

Thank you
Lulu

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm?(arctic)#demos/jqxtreegrid/javascript-tree-grid-filter-textbox.htm


<div class="jqx-widget-header jqx-grid-toolbar" id="filtertreeGrid" style="left: 0px; top: 0px; width: 850px; height: 29px; visibility: inherit; position: absolute;">

Open in new window




<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Blaze Rule.</title>
    <link rel="stylesheet" href="CSS/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="Script/Grid/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="Script/Grid/jqxcore.js"></script>
    <script type="text/javascript" src="Script/Grid/jqxdata.js"></script>
    <script type="text/javascript" src="Script/Grid/jqxbuttons.js"></script>
    <script type="text/javascript" src="Script/Grid/jqxscrollbar.js"></script>
    <script type="text/javascript" src="Script/Grid/jqxdatatable.js"></script>
    <script type="text/javascript" src="Script/Grid/jqxtreegrid.js"></script>
    <script type="text/javascript" src="Script/Grid/demos.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {          
            // prepare the data
            var source =
            {
                dataType: "csv",
                dataFields: [
                    { name: 'EmployeeKey', type: 'number' },
                    { name: 'ParentEmployeeKey', type: 'number' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'HireDate', type: 'date' },
                    { name: 'BirthDate', type: 'date' },
                    { name: 'Phone', type: 'string' },
                    { name: 'Gender', type: 'string' },
                    { name: 'DepartmentName', type: 'string' }
                ],
                hierarchy:
                {
                    keyDataField: { name: 'EmployeeKey' },
                    parentDataField: { name: 'ParentEmployeeKey' }
                },
                id: 'EmployeeKey',
                url: 'employeesadv.csv'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create Tree Grid
            $("#treeGrid").jqxTreeGrid(
            { 
			    width: 850,
                source: dataAdapter,
                pageable: true,
                columnsResize: true,
				sortable: true,
				filterable: true,                
			    filterMode: 'simple',
                ready: function()
                {
                    // expand row with 'EmployeeKey = 32'
                    $("#treeGrid").jqxTreeGrid('expandRow', 32);
                },
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
                  { text: 'LastName',  dataField: 'LastName', width: 200 },
                  { text: 'Department Name', dataField: 'DepartmentName', width: 150 },
                  { text: 'Title', dataField: 'Title', width: 300 },
                  { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
                  { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
                  { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 120 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">

    </div>
</body>
</html>

Open in new window

jQueryJScriptJavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

Can you post a link? All your script and css includes are local so we can't really test on the code posted.
lulu50

ASKER
Hi Julian,

I can't upload any file from company computer

this is the link from where I got the grid

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm?(arctic)#demos/jqxtreegrid/javascript-tree-grid-filter-textbox.htm

Try to replicate the example and see if you can change the header inline style to a different color for example.

I just want to know, how to get to the inline style that shows on my browser.

Thanks,
Lulu
SOLUTION
hielo

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
lenamtl

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
lulu50

ASKER
Thank you
Julian Hansen

You are welcome.