lulu50
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
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;">
<!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>
Can you post a link? All your script and css includes are local so we can't really test on the code posted.
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Here how to add custom style to jqxgrid
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-styling-and-appearance.htm
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-styling-and-appearance.htm
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you
You are welcome.