jQuery UI Widgets Forums Grid How to insert 2 button in 1 cell jqxgrid

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • How to insert 2 button in 1 cell jqxgrid #30996

    nguyentran
    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.

    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/

    How to insert 2 button in 1 cell jqxgrid #31003

    nguyentran
    Member

    it work thank very much bro

    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

    • This reply was modified 10 years, 4 months ago by  nguyentran.
    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/


    TonyDeng
    Participant

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


    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

    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.

    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

    • This reply was modified 3 years ago by  Hristo.
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.