jQWidgets Forums

jQuery UI Widgets › Forums › Grid › jqxgrid mastergrid perform using button click on each row

Tagged: , , ,

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    jqxgrid mastergrid perform using button click on each row Posts
  • February 17, 2017 at 7:34 pm jqxgrid mastergrid perform using button click on each row #91674

    dan123
    Participant

    Hi I used the sample master detail grid, and I am trying to figure out if there is a way to update the data source of the detail grid through using button click. I create a button column using the cellsrenderer, but I cannot seem to perform the similar function of the rowselect by using the button on each row.
    Here is my jsfiddle:
    https://jsfiddle.net/UbK74/426/

    February 21, 2017 at 2:58 am jqxgrid mastergrid perform using button click on each row #91727

    dan123
    Participant

    Could use help on this?

    February 21, 2017 at 9:16 am jqxgrid mastergrid perform using button click on each row #91736

    Hristo
    Participant

    Hello dan123,

    You want to when the click particular (custom) button to select the row. Could you clarify?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    February 22, 2017 at 12:52 am jqxgrid mastergrid perform using button click on each row #91765

    dan123
    Participant

    Yes hristo

    February 22, 2017 at 12:54 am jqxgrid mastergrid perform using button click on each row #91766

    dan123
    Participant

    Yes when I press the button for that row, it will bring the details for that row.

    February 22, 2017 at 11:42 am jqxgrid mastergrid perform using button click on each row #91778

    Hristo
    Participant

    Hello dan123,

    You could use selectrow method when clicking on the button (need to implement buttonclick callback of the column).
    Please, take a look at this example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'></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/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="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.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);
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                selectionmode: 'checkbox',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 200 },
                  { text: 'Last Name', datafield: 'lastname', width: 200 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  {
                      text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function ()
                      {
                          return "Edit";
                      }, buttonclick: function (row)
                      {
                          $('#jqxgrid').jqxGrid('selectrow', row);
                      }
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

    You need to decide how to proceed when having the second click on the button. Also, how to visualize the data in the Grid below.

    Best Regards,
    Hristo Hristov

    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.