Change the Text of Grid button - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, cellsrenderer, column, dropdown, DropDownList, grid, jqxgrid, text

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 11 months ago.

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

Author

Change the Text of Grid button Posts

May 18, 2014 at 9:53 am Change the Text of Grid button #54584

Aj_s

Participant

Hi jqgird community is there a way to change the Text of Jqxgrid button??

I have a grid in which i am showing Active Records and In Active Records depending on the selection of a HTML drop down !!

If i select the ‘Active’ option in HTML drop down i am showing Active Recorders in the grid. Where as If i select the ‘In Active’ in HTML drop down i am showing In Active Recorders in grid.

When i am showing Active Recorders i am showing a button also in grid with text ‘Remove’ , so at the time of Showing In Active recorders this button text should change to ‘Add’

Please give me any references..????

May 19, 2014 at 4:51 am Change the Text of Grid button #54594

Dimitar

Participant

Hello Aj_s,

Here is an example, based on the demo Popup Editing:

<!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/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/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' }
                ],
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                }
            };

            // initialize the input fields.
            $("#firstName").jqxInput({ theme: theme });
            $("#lastName").jqxInput({ theme: theme });
            $("#product").jqxInput({ theme: theme });

            $("#firstName").width(150);
            $("#firstName").height(23);
            $("#lastName").width(150);
            $("#lastName").height(23);
            $("#product").width(150);
            $("#product").height(23);

            $("#quantity").jqxNumberInput({ spinMode: 'simple', width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true });
            $("#price").jqxNumberInput({ spinMode: 'simple', symbol: '$', width: 150, min: 0, height: 23, spinButtons: true });

            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;

            var source = [
                "Active Records",
                "Inactive Records"
            ];
            // Create a jqxDropDownList
            $("#jqxdropdownlist").jqxDropDownList({ source: source, width: '200px', height: '25px', selectedIndex: 0 });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                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 () {
                      var value = $("#jqxdropdownlist").val();
                      if (value == "Active Records") {
                          return "Remove";
                      } else if (value == "Inactive Records") {
                          return "Add";
                      };
                  }, buttonclick: function (row) {
                      // open the popup window when the user clicks a button.
                      editrow = row;
                      var offset = $("#jqxgrid").offset();
                      $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });

                      // get the clicked row's data and initialize the input fields.
                      var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                      $("#firstName").val(dataRecord.firstname);
                      $("#lastName").val(dataRecord.lastname);
                      $("#product").val(dataRecord.productname);
                      $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                      $("#price").jqxNumberInput({ decimal: dataRecord.price });

                      // show the popup window.
                      $("#popupWindow").jqxWindow('open');
                  }
                  }
                ]
            });

            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({
                width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
            });

            $("#popupWindow").on('open', function () {
                $("#firstName").jqxInput('selectAll');
            });

            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });

            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                        quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                    };
                    var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                    $('#jqxgrid').jqxGrid('updaterow', rowID, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div id='jqxdropdownlist'>
        </div>
        <div style="margin-top: 30px;">
            <div id="cellbegineditevent">
            </div>
            <div style="margin-top: 10px;" id="cellendeditevent">
            </div>
        </div>
        <div id="popupWindow">
            <div>
                Edit</div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="right">
                            First Name:
                        </td>
                        <td align="left">
                            <input id="firstName" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Last Name:
                        </td>
                        <td align="left">
                            <input id="lastName" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Product:
                        </td>
                        <td align="left">
                            <input id="product" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Quantity:
                        </td>
                        <td align="left">
                            <div id="quantity">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Price:
                        </td>
                        <td align="left">
                            <div id="price">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                        </td>
                        <td style="padding-top: 10px;" align="right">
                            <input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel"
                                type="button" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.