jQWidgets Forums

jQuery UI Widgets Forums TreeGrid 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 #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

    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

    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

    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

    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

    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/

    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

    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

    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

    Tree Grid Cell Click Event #76209

    eric379990
    Participant

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

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

You must be logged in to reply to this topic.