multiple buttons withing grid cell - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, cellsrenderer, grid, jqxgrid, multiple

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

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

Author

multiple buttons withing grid cell Posts

April 2, 2013 at 12:42 pm multiple buttons withing grid cell #18412

lopez306

Participant

Is it possible to add multiple buttons (jqx buttons) to grid cell ?

April 2, 2013 at 12:57 pm multiple buttons withing grid cell #18416

Dimitar

Participant

Hello lopez306,

Yes, it is possible to add multiple buttons, by using Grid Cells Rendering. However, these would only be simple buttons, as it is not possible to initialize a jqxButton this way.

Best Regards,
Dimitar

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

April 2, 2013 at 1:13 pm multiple buttons withing grid cell #18417

lopez306

Participant

Thanks for quick answer.
What about event handlers ? Should I bind to ‘click’ event within function that renders cell ?
If so … doesn’t work ;(

April 2, 2013 at 1:34 pm multiple buttons withing grid cell #18418

Dimitar

Participant

Hi lopez306,

Here is how to bind to the click 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.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var url = "../sampledata/feed.xml";
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'title', type: 'string' },
                    { name: 'link', type: 'string' },
                    { name: 'pubDate', type: 'date' },
                    { name: 'creator', map: 'dc\\:creator', type: 'string' },
               ],
                root: "channel",
                record: "item",
                url: url
            };
            var renderer = function (row, column, value) {
                return "<button id='" + row + "' onclick='alertMsg()'>Button " + row + "</button>";
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'Link', datafield: 'link', width: 72, cellsrenderer: renderer },
                  { text: 'Title', datafield: 'title', width: 200 },
                  { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
                  { text: 'Creator', datafield: 'creator', width: 200 }
               ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
    <script type="text/javascript">
        function alertMsg() {
            alert("Button was clicked!")
        };
    </script>
</body>
</html>

Best Regards,
Dimitar

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

April 2, 2013 at 2:08 pm multiple buttons withing grid cell #18421

lopez306

Participant

Is it the only way ?? How to use more sophisticated calls e.g. anonymous function ??

April 3, 2013 at 9:49 am multiple buttons withing grid cell #18493

Dimitar

Participant

Hi lopez306,

Unfortunately, this is the only way when using cellsrenderer. You may use column with columntype: ‘button’, which provides more flexibility. However, button columns have only one button.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.