jQWidgets Forums
jQuery UI Widgets › Forums › TreeGrid › Tree Grid Cell Click Event
Tagged: Tree Grid Cell Click Event
This topic contains 9 replies, has 3 voices, and was last updated by eric379990 9 years, 5 months ago.
-
Author
-
Hi All
We are using tree grid for one of our pages .I need to popup a chart when user click on the cell.I have used cellrendrer to embed html elements like ‘a’ tag.I have written on click event for the ‘a’ tag .My problem is that when i set first column as pinned column the click event is not working but if taken out the pinned column i can able trigger the click event .Could any one help me in solving this issues.Is there any alternative way where i can get the cell data .I need to keep track of which cell is being clicked by user.
Thanks and Regards
Anand.RHi Anand,
There is not Cell Click or Click event in jqxTreeGrid. There is only rowClick event.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for the quick response .We are evaluating the product and we are going to purchase this product but we need the cell click requirement .Am able to get the column data while doing click event using html tags.I need to know which column or cell user is being clicked by user.If i use rowclick event is it possible for me to get the cell data ?
Thanks and Regards
Anand.RHi Anand,
Despite the fact that there is no such API available in jqxTreeGrid, you can use the following workaround:
<!DOCTYPE html> <html lang="en"> <head> <title id="Description">The jqxTreeGrid widget represents data in a tree-like structure. The Tree Grid widget supports multi column display of hierarchical data, data paging, sorting and filtering, data editing, columns resizing, fixed columns, conditional formatting, aggregates and rows selection.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.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/jqxdatatable.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../../scripts/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: '../sampledata/employeesadv.csv' }; var dataAdapter = new $.jqx.dataAdapter(source); // create Tree Grid $("#treeGrid").jqxTreeGrid( { width: 680, source: dataAdapter, pageable: true, columnsResize: true, ready: function() { // expand row with 'EmployeeKey = 32' $("#treeGrid").jqxTreeGrid('expandRow', 32); $("#treeGrid td").on('click', function (event) { alert($(event.target).text()); }); }, columns: [ { text: 'FirstName', pinned: true, dataField: 'FirstName', minWidth: 100, width: 150 }, { text: 'LastName', dataField: 'LastName', width: 150 }, { 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: 320 } ] }); }); </script> </head> <body class='default'> <div id="treeGrid"> </div> </body> </html>
Best Regards,
Peter StoevHi Peter,
Please find the below code .I have used this already .But my problem is that it will work fine for the tree that grid doesn’t have any Pinned/Frozen column.But if i set any of the column as pinned then the click i snot triggering.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<link href=”Content/Style/jqx.base.css” rel=”stylesheet” type=”text/css” /><script src=”Scripts/jquery-1.9.1.min.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxcore.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxdata.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxbuttons.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxscrollbar.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxdatatable.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxtreegrid.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxgrid.columnsresize.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxgrid.selection.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxmenu.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxgrid.grouping.js” type=”text/javascript”></script>
<script src=”Scripts/Jqxwidget/jqxgrid.sort.js” type=”text/javascript”></script>
<script src=”Scripts/UserScreen.js” type=”text/javascript”></script><script language=”javascript” type=”text/javascript”>
$(document).ready(function () {
var x = “Total Width: ” + screen.width;
alert(x);
var employees = [{ “EmployeeID”: 1, “FirstName”: “Nancy”, “LastName”: “Davolio”, “ReportsTo”: 2, “Country”: “USA”, “Title”: “Sales Representative”, “HireDate”: “1992-05-01 00:00:00”, “BirthDate”: “1948-12-08 00:00:00”, “City”: “Seattle”, “Address”: “507 – 20th Ave. E.Apt. 2A” }, { “EmployeeID”: 2, “FirstName”: “Andrew”, “LastName”: “Fuller”, “ReportsTo”: null, “Country”: “USA”, “Title”: “Vice President, Sales”, “HireDate”: “1992-08-14 00:00:00”, “BirthDate”: “1952-02-19 00:00:00”, “City”: “Tacoma”, “Address”: “908 W. Capital Way” }, { “EmployeeID”: 3, “FirstName”: “Janet”, “LastName”: “Leverling”, “ReportsTo”: 2, “Country”: “USA”, “Title”: “Sales Representative”, “HireDate”: “1992-04-01 00:00:00”, “BirthDate”: “1963-08-30 00:00:00”, “City”: “Kirkland”, “Address”: “722 Moss Bay Blvd.” }, { “EmployeeID”: 4, “FirstName”: “Margaret”, “LastName”: “Peacock”, “ReportsTo”: 2, “Country”: “USA”, “Title”: “Sales Representative”, “HireDate”: “1993-05-03 00:00:00”, “BirthDate”: “1937-09-19 00:00:00”, “City”: “Redmond”, “Address”: “4110 Old Redmond Rd.” }, { “EmployeeID”: 5, “FirstName”: “Steven”, “LastName”: “Buchanan”, “ReportsTo”: 2, “Country”: “UK”, “Title”: “Sales Manager”, “HireDate”: “1993-10-17 00:00:00”, “BirthDate”: “1955-03-04 00:00:00”, “City”: “London”, “Address”: “14 Garrett Hill” }, { “EmployeeID”: 6, “FirstName”: “Michael”, “LastName”: “Suyama”, “ReportsTo”: 5, “Country”: “UK”, “Title”: “Sales Representative”, “HireDate”: “1993-10-17 00:00:00”, “BirthDate”: “1963-07-02 00:00:00”, “City”: “London”, “Address”: “Coventry House Miner Rd.” }, { “EmployeeID”: 7, “FirstName”: “Robert”, “LastName”: “King”, “ReportsTo”: 5, “Country”: “UK”, “Title”: “Sales Representative”, “HireDate”: “1994-01-02 00:00:00”, “BirthDate”: “1960-05-29 00:00:00”, “City”: “London”, “Address”: “Edgeham Hollow Winchester Way” }, { “EmployeeID”: 8, “FirstName”: “Laura”, “LastName”: “Callahan”, “ReportsTo”: 2, “Country”: “USA”, “Title”: “Inside Sales Coordinator”, “HireDate”: “1994-03-05 00:00:00”, “BirthDate”: “1958-01-09 00:00:00”, “City”: “Seattle”, “Address”: “4726 – 11th Ave. N.E.” }, { “EmployeeID”: 9, “FirstName”: “Anne”, “LastName”: “Dodsworth”, “ReportsTo”: 5, “Country”: “UK”, “Title”: “Sales Representative”, “HireDate”: “1994-11-15 00:00:00”, “BirthDate”: “1966-01-27 00:00:00”, “City”: “London”, “Address”: “7 Houndstooth Rd.”}];
// prepare the data
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘EmployeeID’, type: ‘number’ },
{ name: ‘ReportsTo’, type: ‘number’ },
{ name: ‘FirstName’, type: ‘string’ },
{ name: ‘LastName’, type: ‘string’ },
{ name: ‘Country’, type: ‘string’ },
{ name: ‘City’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ },
{ name: ‘Title’, type: ‘string’ },
{ name: ‘HireDate’, type: ‘date’ },
{ name: ‘BirthDate’, type: ‘date’ }
],
hierarchy:
{
keyDataField: { name: ‘EmployeeID’ },
parentDataField: { name: ‘ReportsTo’ }
},
id: ‘EmployeeID’,
localData: employees
};
var cellsRenderer = function (row, column, value, rowData) {
var bgColor = “#000”;
var parentClassforCollapse = “child-column”;
return ‘<span onclick=”Display();” style=”display:block;background:’ + bgColor + ‘;float:none;color:#FFF; text-align:center;height:30px;width:100%;” class=’ + parentClassforCollapse + ‘>‘ + value + ‘</span>’;
};var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$(“#FinanceGrid”).jqxTreeGrid(
{
width: 500,
source: dataAdapter,ready: function () {
$(“#FinanceGrid”).jqxTreeGrid(‘expandRow’, ‘2’);
$(“#FinanceGrid td”).on(‘click’, function (event) {
alert($(event.target).text());
alert(“Click on td “);
});
},
columns: [{ text: ‘FirstName’, dataField: ‘FirstName’, width: 150,pinned:true },
{ text: ‘Address’, dataField: ‘Address’, width: 150 },
{ text: ‘LastName’, dataField: ‘LastName’, cellsrenderer: cellsRenderer, width: 150 },
{ text: ‘Title’, dataField: ‘Title’, width: 200 }
]
});});
function showGraph() {
alert(“Graph”);
}
function Display() {
alert(“solved “);
}
</script></head>
<body>
<form id=”form1″ runat=”server”>
<div id=”FinanceGrid”></div>
</form>
</body>
</html>I have went through the grid and it is found that the tool is using two table with same data if i set as pinned.One table will have an id as “table +elementId” and the other will have Id “pinnedtable+elementId”.The table with Pinnedtable is showing on the top of the original table it means two tables place one above the other and the above table is pinnedtable and it has all the column set as visibility :hidden.The problem we are having is that click event is not triggered to a hidden column.so is there any way we can have any work around on it .Please let us know your valuable thought.
Thanks and Regards
Anand.RHi Anand R,
The sample I sent you has a Pinned column and it works. Please, use it in the way I provided it.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter
Thanks for your valuable help.I have tried the sample and it works good .The problem was the treegrid.js file .I have replaced the one which we have with the one from your sample.
Thanks a lot once again
Regards
Anand.RHi Peter,
Seems this is an old topic, but I also want to use cell click to trigger some of my following actions. I tried to use the method above, it is works
fine when the table is generated in the beginning, all cell’s click is worked. But when I expend or collapse the grid, or click the sorting button,
the click cell event cannot be triggered. can you give some suggestion? or there is other new method to bind on the cell click event for jqxTreeGrid?Thanks so much.
BR/EricHi,
Use the rowClick event. cellClick is not necessary here. rowClick has all the necessary Event Arguments to get know what’s clicked.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks so much Peter, thats solved my question! So quick response!
-
AuthorPosts
You must be logged in to reply to this topic.