How to insert 2 button in 1 cell jqxgrid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, Cell, cellsrenderer, click, column, grid, jqxGrid ;

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

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

Author

How to insert 2 button in 1 cell jqxgrid Posts

October 18, 2013 at 9:31 am How to insert 2 button in 1 cell jqxgrid #30996

Member

Hi!
i need insert 2 button in 1 cell of jqxgrid.
i had read insert 1 button in http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/popupediting.htm
but i dont know how to insert 2 button in cell

Thanks Team.

October 18, 2013 at 9:52 am How to insert 2 button in 1 cell jqxgrid #30997

Dimitar

Participant

Hello nguyentran,

To achieve this, please use cellsrenderer as shown in the following 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 '<button>First button</button><button>Second button</button>';
            };
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 770,
                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: 200, 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/

October 18, 2013 at 10:47 am How to insert 2 button in 1 cell jqxgrid #31003

nguyentran

Member

it work thank very much bro

October 18, 2013 at 11:12 am How to insert 2 button in 1 cell jqxgrid #31008

nguyentran

Member

var dataAdapter1 = new $.jqx.dataAdapter(source1);
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
return ‘pausecancel’;
};
$(“#jqxgrid_active”).jqxGrid(
{
source: dataAdapter1,
theme: theme,
ready: function () {
},

columnsresize: true,
width: 1000,

filterable:true,
showtoolbar:true,
//editmode:’dblclick’,
//selectionmode: ‘checkbox’,// show check box in first collumn
altrows: true,
// status bar—————————————

columns: [
{text : ‘AgentParameters’, datafield: ‘AgentParameters’},
{ text: ‘JobID’, datafield: ‘JobID’},
{ text: ‘Status’, datafield: ‘Status’},
{ text: ‘Action’, datafield: ‘Action’,cellsrenderer: cellsrenderer, width: 120, editable: false },
{ text: ‘ErrorMessage’, datafield: ‘ErrorMessage’},
{ text: ‘CreatedOn’,datafield: ‘CreatedOn’},
{ text: ‘EndedOn’, datafield: ‘EndedOn’}

]
});
$(‘.btnpause’).buttonclick(function(){
alert(‘had click pause’);
});
$(‘.btncancel’).buttonclick(function(){
alert(‘had click cancel’);
});
i try use event click of 2 button but not work. can you help me
thank again bro

October 18, 2013 at 12:15 pm How to insert 2 button in 1 cell jqxgrid #31010

Dimitar

Participant

Hi nguyentran,

Here is an updated version of the 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 '<button class="btnpause">pause</button><button class="btncancel">cancel</button>';
            };
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 770,
                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: 200, editable: false },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ],
                ready: function () {
                    $('.btnpause').click(function () {
                        alert('had click pause');
                    });
                    $('.btncancel').click(function () {
                        alert('had click cancel');
                    });
                }
            });
        });
    </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/

October 3, 2019 at 4:05 pm How to insert 2 button in 1 cell jqxgrid #106929

TonyDeng

Participant

This method will stop working after the grid is sorted. Any fix?

October 3, 2019 at 5:42 pm How to insert 2 button in 1 cell jqxgrid #106932

Peter Stoev

Keymaster

Hi TonyDeng,

I suppose you experience some different behavior with our DataGrid. Could you share online sample, please? Please, also include instructions, which we can use.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

February 10, 2021 at 12:24 am How to insert 2 button in 1 cell jqxgrid #114463

redyyy

Participant

hi, can this be done using react? 2 buttons in one cell and those buttons have onclick function? Thank you.

February 12, 2021 at 8:35 am How to insert 2 button in 1 cell jqxgrid #114478

Hristo

Participant

Hello redyyy,

You could try to use the same approach.
We do not have exactly such a demo, unfortunately.
Also, you could try to use one of these two approaches below:
https://www.jqwidgets.com/react/react-grid/react-grid-popupediting.htm?light
https://www.jqwidgets.com/react/react-grid/react-grid-widgetcolumn.htm?light
With simple CSS settings to hide the vertical line between the columns.
Or to use more specific and complicated logic in the second demo to add two buttons inside one column.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.