Grid column : Delete icon at header level and checkboxes at row level ??? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkbox, click, column, grid, Header, icon, jqxgrid, onclick, renderer, row

This topic contains 6 replies, has 2 voices, and was last updated by mallepaddi 12 years, 10 months ago.

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

Author

Grid column : Delete icon at header level and checkboxes at row level ??? Posts

October 28, 2013 at 6:35 pm Grid column : Delete icon at header level and checkboxes at row level ??? #31472

Participant

I would like to show “Delete” icon like header level and displaying check boxes at row level, would it be possible of doing this ?

Thanks

October 29, 2013 at 11:45 am Grid column : Delete icon at header level and checkboxes at row level ??? #31530

Dimitar

Participant

Hello mallepaddi,

Yes, it is possible by using the renderer callback function which can modify a column’s header. Here is an example, based on the demo CheckBox Column:

<!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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200, true);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                columns: [
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 100 },
                  { text: 'Last Name', editable: false, datafield: 'lastname', width: 100 },
                  { text: 'Product', editable: false, datafield: 'productname', width: 180 },
                  { text: 'Available', datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70, renderer: function () {
                      return '<button id="delete">Delete</button>';
                  }
                  },
                  { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', editable: false, datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', editable: false, datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Instead of a button, renderer may return an image:

return '<img src="delete.png" />';

Best Regards,
Dimitar

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

October 29, 2013 at 12:37 pm Grid column : Delete icon at header level and checkboxes at row level ??? #31533

mallepaddi

Participant

perfect,

I have written like …

{ text: ”, datafield: ‘incart’, threestatecheckbox: false, columntype: ‘checkbox’, width: ‘5%’, renderer: function () {
return ““;
}
}

Image appearing at header level followed by ‘check boxes”

but following event is not firing to delete selected items …

$(“#delete”).click(function(e){ alert(‘clecked’); }

Please help.

Thanks

October 30, 2013 at 7:05 am Grid column : Delete icon at header level and checkboxes at row level ??? #31588

mallepaddi

Participant

Problem solved … with combination of “renderer” and “rendered”.

Thanks

October 30, 2013 at 7:10 am Grid column : Delete icon at header level and checkboxes at row level ??? #31590

Dimitar

Participant

Hi mallepaddi,

Here is a modification of the example that shows how to bind to the button’s onclick event:

<!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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200, true);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                columns: [
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 100 },
                  { text: 'Last Name', editable: false, datafield: 'lastname', width: 100 },
                  { text: 'Product', editable: false, datafield: 'productname', width: 180 },
                  { text: 'Available', datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70, renderer: function () {
                      return '<button id="delete" onclick="clickFunction()">Delete</button>';
                  }
                  },
                  { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', editable: false, datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', editable: false, datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </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 clickFunction = function () {
                    alert("clicked");
                };
            </script>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

October 30, 2013 at 8:52 am Grid column : Delete icon at header level and checkboxes at row level ??? #31602

mallepaddi

Participant

I’ve managed to click image created at header level for deleting items selected in shopping cart.

columns: [
{ text: ”, datafield: ‘incart’, threestatecheckbox: false, columntype: ‘checkbox’, width: 25,
renderer: function () {
return “

“;
},
rendered: function (columnHeaderElement) {
$(columnHeaderElement).on(‘click’, function (event) {
deleteRowsFromCart(event);
});
}
},
{ text: ‘Description’, datafield: ‘description’, editable: false,width: 190},
{ text: ‘Price’, datafield: ‘price’, width: 70, editable: false,cellsalign: ‘right’, align: ‘right’},
{ text: ‘Qty’, datafield: ‘qty’, width: 60, editable: false, cellsalign: ‘right’, align: ‘right’},
{ text: ‘UoM’, datafield: ‘uom’, editable: false}
]

but i can click “Delete” image at header if having following code ..

But “Delete” icon can’t be clicked if i have deleted one item from shopping cart , i guess it could be because of positioning / alignment of code generating by grid header.

How to solve this issue ..

Thanks

October 30, 2013 at 9:14 am Grid column : Delete icon at header level and checkboxes at row level ??? #31605

mallepaddi

Participant

Work around …

var adjustDeleteIconPosition = function(event){
$(“#columntable”+”jqxgrid1”).find(“[role=’columnheader’]”).eq(0).find(“div”).css(‘width’,’25’).css(‘margin-left’,’0px’);
}

calling above method in deleteRowsFromShoppingCart() method. Position of Deleting icon is consistent now ..

Thanks.

Author

Posts

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

You must be logged in to reply to this topic.