jQWidgets Forums

Tagged: cellsrenderer, checkbox, column, grid, image, jqxgrid

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

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

Author

Query regarding grid column. Posts

August 23, 2013 at 11:35 am Query regarding grid column. #27545

Apeksha Singh

Participant

Hi,

Is it possible to have images and checkboxs in one single column if I do not defined the column type as “checkbox”.

Please guide me as soon as possible.

Thanks & Regards,

Apeksha

August 26, 2013 at 6:42 am Query regarding grid column. #27656

Dimitar

Participant

Hello Apeksha,

Yes, it is possible, by using cellsrenderer.

Best Regards,
Dimitar

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

August 26, 2013 at 8:24 am Query regarding grid column. #27676

Apeksha Singh

Participant

Hi Dimitar,

Can you provide me an example that has both an image and checkboxes in one column of a grid.

Thanks & Regards,
Apeksha

August 27, 2013 at 5:22 am Query regarding grid column. #27755

Dimitar

Participant

Hi Apeksha,

Here is an example:

<!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) {
                return '<img src="../../images/help.png" /><input type="checkbox" />';
            };
            // 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">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

August 27, 2013 at 12:25 pm Query regarding grid column. #27790

Apeksha Singh

Participant

Hi Dimitar,

This code is helpful to me after I make these changes :-

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
if(row == 1) {
return ”;
}
else {
return ”;
}
};

But its creating an issue in respect of my requirement.

I want to get the count for checked checkboxes in the grid and the row id of all the checked checkboxes.
Is it possible to do so ?

Thanks & Regards,
Apeksha

August 28, 2013 at 5:40 am Query regarding grid column. #27832

Dimitar

Participant

Hi Apeksha,

Here is an updated example:

<!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' }
                ],
                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) {
                return '<img src="../../images/help.png" /><input type="checkbox" onclick="checkboxClick(' + row + ')" />';
            };
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 570,
                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 }
                ],
                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 checkboxClick = function (row) {
                    var checkboxes = $("input:checkbox");
                    var checkedRows = new Array();
                    var checkedCount = 0;
                    for (var i = 0; i < checkboxes.length; i++) {
                        if (checkboxes[i].checked == true) {
                            checkedRows.push(i);
                            checkedCount++;
                        };
                    };
                };        
            </script>
        </div>
    </div>
</body>
</html>

The checkedRows variable contains an array with the indexes of the checked rows and checkedCount contains their count.

Best Regards,
Dimitar

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

October 24, 2013 at 7:35 am Query regarding grid column. #31287

Gowri

Participant

Hi Dimitar,

The above sample 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.

Author

Posts

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

You must be logged in to reply to this topic.