jQWidgets Forums

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.

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

Author

Tree Grid Cell Click Event Posts
February 13, 2014 at 10:32 am Tree Grid Cell Click Event #49465

Anand R
Participant

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.R

February 13, 2014 at 10:39 am Tree Grid Cell Click Event #49467

Peter Stoev
Keymaster

Hi Anand,

There is not Cell Click or Click event in jqxTreeGrid. There is only rowClick event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 13, 2014 at 12:51 pm Tree Grid Cell Click Event #49475

Anand R
Participant

Hi 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.R

February 13, 2014 at 3:01 pm Tree Grid Cell Click Event #49478
Peter Stoev
Keymaster
Hi 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 Stoev
February 14, 2014 at 8:24 am Tree Grid Cell Click Event #49506

Anand R
Participant

Hi 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.R

February 15, 2014 at 8:14 am Tree Grid Cell Click Event #49559

Peter Stoev
Keymaster

Hi 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 Stoev

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

February 15, 2014 at 9:39 am Tree Grid Cell Click Event #49569

Anand R
Participant

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.R

September 28, 2015 at 6:57 am Tree Grid Cell Click Event #76202

eric379990
Participant

Hi 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/Eric

September 28, 2015 at 7:30 am Tree Grid Cell Click Event #76205

Peter Stoev
Keymaster

Hi,

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 Stoev

jQWidgets Team
http://www.jqwidgets.com

September 28, 2015 at 7:47 am Tree Grid Cell Click Event #76209

eric379990
Participant

Thanks so much Peter, thats solved my question! So quick response!
Author

Posts

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

You must be logged in to reply to this topic.