jQWidgets Forums

This topic contains 20 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 2 months ago.

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →

Author

Link in Grid Column Header Posts

March 22, 2013 at 8:00 pm Link in Grid Column Header #17806

Participant

I’m trying to add a link to the column header of a grid. For some reason, no matter how wide the column itself is, the link seems to be getting pushed down below the visible header.

Before link:
http://imageshack.us/a/img824/7797/withoutlink.png

After link:
http://imageshack.us/a/img19/3208/withlink.png

Firebug inspect:
http://imageshack.us/a/img69/5921/inspect.png
http://imageshack.us/a/img19/6096/inspectcode.png

If I remove the text preceding the link completely, I can see the link/image, but the alignment is all messed up:
http://img820.imageshack.us/img820/7850/linkwithouttext.png

Please let me know what I need to do to get this working properly.

March 22, 2013 at 8:43 pm Link in Grid Column Header #17809

Peter Stoev

Keymaster

Hi shimmoril,

If you report an issue regarding our products, please include the following information in your post:

– jQuery version, jQWidgets version, device type(PC, Mobile), browser name and version.
– Please, provide step by step instructions on how to reproduce the reported issue and provide a small sample which demonstrates it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 22, 2013 at 8:57 pm Link in Grid Column Header #17810

shimmoril

Participant

JQuery: 1.7.2
JQWidgets: 2.7.0
Device: PC
Browser: All of them (specifically FF 19.0.2, Chrome 25.1, IE 9.0)

I’m not sure how much more ‘step-by-step’ I can get – I added a link to the column header and it doesnt show up. In the example below, I added the a tag to the first column, and it doesnt display properly. It’s like it’s getting pushed down a line somehow and since the header is only one line high, it disappears. The column is clearly large enough for the text of the a tag to appear, so I dont know what’s going on.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </title>
    <link rel="stylesheet" href="/javascript/jqwidgets/2.7.0/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="/javascript/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcore.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdata.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxbuttons.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxmenu.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxlistbox.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            var url = "/javascript/jqwidgets/demos/sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name <a href="#">lalala</a>', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

March 22, 2013 at 8:59 pm Link in Grid Column Header #17811

Peter Stoev

Keymaster

Hi shimmoril,

The text field should be used for specifying text, not html. The following sample shows how to override the rendering of a column’s header: customrowsselection.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 22, 2013 at 9:35 pm Link in Grid Column Header #17814

shimmoril

Participant

I appreciate the example, but that doesnt work.

If I just move the link to the renderer, I get the link and no text (and the link is oddly-aligned). If I move them both, I get the text and no link (and the text is oddly-aligned).

I need a column header that includes both plain text (in this case an abbreviation), and a link (used as a tooltip to explain the abbreviation). They must be on the same line, completely visible, and properly lined up.

Example w/ renderer:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </title>
    <link rel="stylesheet" href="/javascript/jqwidgets/2.7.0/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="/javascript/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcore.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdata.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxbuttons.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxmenu.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxlistbox.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            var url = "/javascript/jqwidgets/demos/sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: '', datafield: 'ProductName', width: 250,
				  	renderer: function() {
						return 	'<div style="margin-left: 10px; margin-top: 5px;">Text <a href="#">Link</a></div>';
					}  
				  },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

March 22, 2013 at 10:25 pm Link in Grid Column Header #17815

Peter Stoev

Keymaster

Hi shimmoril,

Then you should return HTML string which includes your link and column’s text. The “renderer” function overrides the header’s rendering and you can render any HTML using that function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 25, 2013 at 2:05 pm Link in Grid Column Header #17954

shimmoril

Participant

I’m not sure what you mean Peter. You can see in the second example I posted that I am returning an HTML string, which does contain both the text and the link, and it doesn’t work. Please provide an actual working example, with text and a link, or further explanation.

March 25, 2013 at 3:10 pm Link in Grid Column Header #17963

Peter Stoev

Keymaster

Hi shimmoril,

Here’s a the solution:

$("#jqxgrid").jqxGrid(
{
    source: dataAdapter,
    columns: [
        { text: 'Name', renderer: function () {
            return "<div style='margin-top: 3px;'>Name<a style='display: inline;' href='#'>Link</a></div>";
        },
            datafield: 'name', width: 115
        },
        {
        },
        { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
        { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
        { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
    ]
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 25, 2013 at 6:17 pm Link in Grid Column Header #17977

shimmoril

Participant

Okay, so now the text and the link both show up properly, thank you. However, clicking the link doesnt actually do anything. I had to turn off sorting on the grid so I could actually hit the link (which is fine), and then I changed it to point to Google for testing. I even tried adding target=”_blank”, but that didn’t change anything.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </title>
    <link rel="stylesheet" href="/javascript/jqwidgets/2.7.0/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="/javascript/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcore.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdata.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxbuttons.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxmenu.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxlistbox.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            var url = "/javascript/jqwidgets/demos/sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: false,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: '', datafield: 'ProductName', width: 250,
				  	renderer: function() {
						return "<div style='margin-top: 3px; margin-left: 3px;'>Name<a style='display: inline;' href='http://www.google.ca' target='_blank'>Link</a></div>";
					}  
				  },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

March 26, 2013 at 5:55 am Link in Grid Column Header #18004

Peter Stoev

Keymaster

Hi shimmoril,

It seems that as the “clicks” are handled by the column’s header, you will have to use the Grid’s “columnclick” event.

For example:

            $("#jqxgrid").on('columnclick', function (event) {
                var args = event.args;
                var originalClick = args.originalEvent;
                var target = originalClick.target;
                if (target.href) {
                    window.open(target.href);
                }
            });

The above wil open your link in a new window, if it is clicked.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 26, 2013 at 3:06 pm Link in Grid Column Header #18065

shimmoril

Participant

Well I finally got it working, but I found a weird issue. If the column isnt wide enough to display the full text of the link, the link just doesnt work. In the code snippit below, I made the link column too narrow to show the full text of “Name Link”, and added an alert to show the target.href on the columnclick. You’ll notice that hovering over the part of the link that is visible does not change the mouse icon to a hand, and clicking on it results in an alert showing undefined.

This is not ideal, given that we allow our users to resize the column widths. I’m concerned that while the initial state of the grid allows the links to work, any resizing done by the user will disable the links and cause them to raise a bug with us. Please let me know if there’s a work around, or if a bug will be opened.

And one more issue – I want to use a Font Awesome (http://fortawesome.github.com/Font-Awesome/) icon for the link, instead of text. I can get the icon to appear, but clicking on it gives the same “undefined” message as above for the target.href. This is the link code, with the FA icon:

<a style='display: inline;' href='http://www.google.ca' target='_blank'><i class='icon-question-sign blue'></i></a>

Column width issue code snippit:

$("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: false,
				filterable: false,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: '', datafield: 'ProductName', width: 50,
				  	renderer: function() {
						return "<div style='margin-top: 3px; margin-left: 3px;'>Name<a style='display: inline;' href='http://www.google.ca' target='_blank'>Link</a></div>";
					}  
				  },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
            });
			
			$("#jqxgrid").on('columnclick', function (event) {
                var args = event.args;
                var originalClick = args.originalEvent;
                var target = originalClick.target; alert(target.href);
                if (target.href) {
                    window.open(target.href);
                }
            });

March 26, 2013 at 3:15 pm Link in Grid Column Header #18068

Peter Stoev

Keymaster

Hi shimmoril,

You can do as in our Demo about Custom Rows Selection.

rendered: function (element) {
      return true;
}

That prevents the column to create its default Sorting, Filtering and Columns Menu elements.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 26, 2013 at 4:02 pm Link in Grid Column Header #18073

shimmoril

Participant

I don’t understand your response Peter, I can do what? I presented two bugs to you in my previous post, and your response doesn’t appear related to either of them. In fact, I added the code you provided and it did not fix either of the bugs I outlined.

March 26, 2013 at 4:26 pm Link in Grid Column Header #18077

Peter Stoev

Keymaster

Hi shimmoril,

These are not bugs, but more an insufficient initialization for overriding a built-in behavior. Please, do what I posted.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 26, 2013 at 4:36 pm Link in Grid Column Header #18080

Peter Stoev

Keymaster

Hi,

I think that it would be better for everyone if I post you the complete solution. You can click the link on even a very small column. It works great with jQWidgets 2.8. The rendered callback should return true, if you want to prevent the column to create its default Sorting, Filtering and Columns Menu elements which occupy 30px from the column’s right corner.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            var url = "/javascript/jqwidgets/demos/sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: false,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  {
                      text: '', datafield: 'ProductName', width: 50,
                      renderer: function () {
                          return "<div style='margin-top: 3px; margin-left: 3px;'>Name<a style='display: inline;' href='http://www.google.ca' target='_blank'>Link</a></div>";
                      },
                      rendered: function () {
                          return true;
                      }
                  },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
            });
            $("#jqxgrid").on('columnclick', function (event) {
                var args = event.args;
                var originalClick = args.originalEvent;
                var target = originalClick.target;
                if (target.href) {
                    window.open(target.href);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →

You must be logged in to reply to this topic.