Recently a number of you have asked this question. Since the jQuery version of the product relies on multiple third party plugins, upgrading the jQuery version of the product means that you have to upgrade some of the plugins as well, in addition to the grid scripts. The one such plugin that we use that you will need to upgrade is the excellent masked textinput plugin by digital bush. You simply have to replace this line:
   <script type="text/javascript" src=" http://www.htmltreegrid.com/demo/ external/js/adapters/jquery/jquery.maskedinput-1.3.js"></script>
With this:

    <script type="text/javascript" src=" http://www.htmltreegrid.com/demo/ external/js/adapters/jquery/jquery.maskedinput-1.3.1.js "></script>

The second thing to do is to get the latest jQuery build from us. We have eliminated the dependencies on the deprecated bits.

The other thing you could also do, if you do not wish to change the URLS, is to add this snippet of code right after your jQuery import:

<script type="text/javascript">
        (function () {
            if (!jQuery.browser) {
                var matched, browser;
                var matchFunction = function (ua) {
                    ua = ua.toLowerCase();
                    var match = /(chrome)[ \/]([\w.]+)/.exec(ua) ||

                    /(webkit)[ \/]([\w.]+)/.exec(ua) ||
                    /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) ||
                    /(msie) ([\w.]+)/.exec(ua) ||
                    ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) || [];
                    return {
                        browser: match[1] || "",
                        version: match[2] || "0"
                    };
                };
                matched = matchFunction(navigator.userAgent);
                browser = {};
                if (matched.browser) {
                    browser[matched.browser] = true;
                    browser.version = matched.version;
                }
                if (browser.chrome) {
                    browser.webkit = true;
                } else if (browser.webkit) {
                    browser.safari = true;
                }
                jQuery.browser = browser;
            }

        })();

</script>

We recently fixed a couple of issues with the jQuery edition of the product. Both were cosmetic and can be patched with simple additions to the css:

1) First, the zIndex of the vertical separator for locked columns is higher than the one for the popups. This causes it to bleed through the popups:

2) The close button of the popup is misplaced.

The fix to both these issues is simple: 

Just add the following to your css:

   
.ui-dialog{

       z-index:999;

}

.ui-dialog .ui-dialog-titlebar-close span{
    left: 0px;
    margin: 0px;
    top: 0px;
}

This will resolve both these issues:

Since HTML Treegrid was designed to be integrated with third party libraries from the ground up, it is quite easy to make it work with a lot of the opensource and commercial libraries available. In this blog post, we will cover a feature that we developed for one of our customers, addition of the right click feature. This particular customer was using the jQuery version of the product, so we added support using an open source right click menu jQuery plugin. Below is the screenshot of this functionality : 

The code to accomplish this is quite straightforward:

First we include the third party menu plugin (MIT licensed):

    <script type="text/javascript" src="http://wwwendt.de/tech/demo/jquery-contextmenu/jquery.ui-contextmenu.js"></script>

Then, we set it up:

            $("#gridContainer").contextmenu({
                delegate: ".flexDataGridDataCell",
                menu: [
                    {title: "Copy Cell", cmd: "copyCell", uiIcon: "ui-icon-copy"},
                    {title: "Copy Row", cmd: "copyRow", uiIcon: "ui-icon-copy"},
                    {title: "Copy Table", cmd: "copyTable", uiIcon: "ui-icon-copy"}
                ]
                , 
                select: function(event, ui) {
                    var grid =document.getElementById('gridContainer').component;
                    if(!grid.currentCell)
                    grid.currentCell = grid.getBodyContainer().getCellFromMouseEventTarget(ui.target[0].component);

                    if(ui.cmd == 'copyCell'){
                        grid.onCellContextMenuItemClick()
                    }else if(ui.cmd == 'copyRow'){
                        grid.onRowContextMenuItemClick()
                    }else if(ui.cmd == 'copyTable'){
                        grid.onTableContextMenuItemClick()
                    }
                }
            });

The key pieces here are the css class that we use to attach to the grid. This makes the menu appear only on those cells. Then, we handle the right click. In the handling mechanism, we identify the cell that the right click happened on:

                    grid.currentCell = grid.getBodyContainer().getCellFromMouseEventTarget(ui.target[0].component);

The code below demonstrates this functionality.

CustomContextMenu.html (6.34 kb)