jQWidgets Forums

Tagged: Button, cellsrenderer, column, custom, grid, html, jqxgrid

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years, 7 months ago.

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

Author

html Custom Column Implementation Posts

October 11, 2013 at 3:07 am html Custom Column Implementation #30581

Gowri

Participant

Hi,
In jqwidgets grid we’ll have check box column, Images Column and hyperlink column, apart from this is that possible that we can have html controls inside an column.?

For eg:
A Column which contains one button, one div element, one Image element and so on…

October 11, 2013 at 5:44 am html Custom Column Implementation #30587

Dimitar

Participant

Hello Gowri,

Yes, it is possible to add custom HTML elements in a grid column by using cellsrenderer. Please check out the forum topic Query regarding grid column. for an example on the matter.

Best Regards,
Dimitar

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

October 24, 2013 at 10:36 am html Custom Column Implementation #31294

Gowri

Participant

Hi Dimitar,

The sample you have given works great. But in my case I have a button in my row and I have to pass an ID (employee ID) when that button clicked.
Employee ID is present in my source. How can I pass Employee ID from source to cell Render function.

Regards,
Gowri.

October 25, 2013 at 8:27 am html Custom Column Implementation #31320

Dimitar

Participant

Hi Gowri,

Here is a modification of the provided example. When a row button is clicked, the product ID is alerted:

<!DOCTYPE html>
<html lang="en">
<head>
    <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/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 = getDemoTheme();
            var url = "../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 dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                var productID = dataAdapter.records[row].uid;
                return '<button onclick="buttonFunction(' + productID + ')">Button ' + row + '</button>';
            };
            // 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', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100, editable: false },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
            <script type="text/javascript">
                var buttonFunction = function (producID) {
                    alert("Product ID: " + producID);
                };
            </script>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.