How can I put two buttons?

[SerdarParticipant]

hello How can I put two buttons?
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/popupediting.htm?arctic

Edit | Delete

[DimitarParticipant]

Hello Serdar,

Here is an example from another forum topic: http://www.jqwidgets.com/community/topic/multiple-buttons-in-a-grid-column/#post-52205.

Best Regards,
Dimitar

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

[SerdarParticipant]

hello thank you dimitar but I want to click events’
plese give me sample code ?
thank you

 {
                      text: 'Edit', datafield: 'Edit', columntype: 'button', width: 100, cellsrenderer: function () {
                          return "Edit";
                      }, buttonclick: function (row) {
                          editrow = row;
                          var dataRecord = $("#GridModul").jqxGrid('getrowdata', editrow);
                          OpenPopup("PopupUpdateModul");
                          $("#PopUpModulActive").jqxCheckBox({ checked: false, theme: 'arctic' });
                          $("#PopUpModulName").val(dataRecord.ModulName);
                          $("#PopUpDescription").val(dataRecord.Description);
                          $("#PopUpModulActive").val(dataRecord.Active);
                      }
                  }

[SerdarParticipant]

hello I see such an error

   var source =

          {
              datafields: [
              { name: 'ModulName', type: 'string' },
              { name: 'Description', type: 'string' },
              { name: 'Active', type: 'bool' }

              ],
              addrow: function (rowid, rowdata, position, commit) {
                  commit(true);
              },
              deleterow: function (rowid, commit) {
                  commit(true);
              },
              updaterow: function (rowid, newdata, commit) {
                  commit(true);
              },
              localdata: GetModuls(),
              async: false,
              datatype: "array",
              id: 'ModulID',
              url: url
          }

   
    var buttonrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
        return '<button type="button" class="btn default grey-cascade" onclick="UpdateModul(' + row + ');">Update</button>&nbsp;&nbsp;<button href="#" type="button" class="btn default red" onclick="DeleteModul(' + row.ID + ')">Delete</button>';
    };

    var dataAdapter = new $.jqx.dataAdapter(source, {
        downloadComplete: function (data, status, xhr) { },
        loadComplete: function (data) { },
        loadError: function (xhr, status, error) { }
    });

    // initialize jqxGrid
    $("#GridModul").jqxGrid(
    {
        width: 930,
        source: dataAdapter,
        pageable: true,
        autorowheight: true,
         
        sortable: true,
        altrows: true,
        height: '420px',
        theme: 'arctic',
        editable: false,
        columns: [
          { text: 'Modul Name', datafield: 'ModulName', width: 200 },
          { text: 'Description', datafield: 'Description', width: 450 },
          { text: 'Active', datafield: 'Active', width: 100, threestatecheckbox: false, columntype: 'checkbox' },
          { text: 'Actions', cellsrenderer: buttonrenderer, width: 180 }
        ]
    });

`function UpdateModul(updateData) {

//…
}`

`function DeleteModuol(id) {

//…
}`

and I’ve tried it

thank you

[SerdarParticipant]

okay I tried the code you’ve tried it

var UpdateModulClick = function (row) {

    
};
var DeleteModulClick = function (row) {
  
};

but I want in the grid multiple button
ist’s possible ?

sample

 {
                      text: 'Edit', datafield: 'Edit', columntype: 'button', width: 100, cellsrenderer: function () {
                          return "Edit";
                      }, buttonclick: function (row) {
                          editrow = row;
                          var dataRecord = $("#GridModul").jqxGrid('getrowdata', editrow);
                          OpenPopup("PopupUpdateModul");
                          $("#PopUpModulActive").jqxCheckBox({ checked: false, theme: 'arctic' });
                          $("#PopUpModulName").val(dataRecord.ModulName);
                          $("#PopUpDescription").val(dataRecord.Description);
                          $("#PopUpModulActive").val(dataRecord.Active);
                      }
                  } 

[SerdarParticipant]

    var buttonrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
        return '<button type="button" class="btn default grey-cascade" onclick="UpdateClick(' + rowdata + ')">Delete</button><button type="button" class="btn default red" onclick="DeleteClick(' + rowdata.ModulID + ')">Delete</button>';
    };

UpdateClick(‘ + row + ‘) ist work but
UpdateClick(‘ + rowdata + ‘) object Giving error

[SerdarParticipant]

okay I’m fixed
thank you

 ready: function () {
            $('.update').click(function () {
               
            });
            $('.delete').click(function () {
                
            });
        }

[SerdarParticipant]

sorry the problem continues

 var ensRender = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
        return '<button class="btn default grey-cascade update" type="button">Update</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button type="button" class="btn default red delete">Delete</button>';
    };

  ready: function () {
            
            $('.update').click(function (row, columnfield, value, defaulthtml, columnproperties) {
               I cannot get this data here
            });

            $('.delete').click(function (row, columnfield, value, defaulthtml, columnproperties) {
                I cannot get this data here
            });
        }

I do have to use global variables? window.rowdata = rowdata;

[DimitarParticipant]

Hello Serdar,

The example I referred you to works perfectly fine on our side. The key is to place the script with the button click functions inside the jqxGrid div, otherwise the solution would not work. Here is how to expand our example to make the second button delete its respective row (note the function button2Click):

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin.
        The jQWidgets Grid plugin offers rich support for interacting with data, including
        paging, grouping and sorting. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            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 cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }

            var buttonrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                return '<button onclick="button1Click(' + row + ')">Button1</button><button onclick="button2Click(' + row + ')">Button2</button>';
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 1000,
                source: dataAdapter,
                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: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                  { text: 'Buttons', cellsrenderer: buttonrenderer, width: 150 }
                ],
                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 button1Click = function (row) {
                    alert("Clicked Button1; Row: " + row);
                };
                var button2Click = function (row) {
                    var id = $('#jqxgrid').jqxGrid('getrowid', row);
                    $("#jqxgrid").jqxGrid("deleterow", id);
                };        
            </script>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

[Author]

Posts