jQuery UI Widgets Forums Grid change css class to a button on cell

This topic contains 6 replies, has 2 voices, and was last updated by  Dimitar 9 years, 8 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • change css class to a button on cell #68289

    jperera
    Participant

    Hello,

    I need to change the color or style in general speaking of a button in a grid, I have a cell with a button to click and then edit the content of the cell, I tried to use cellclassname for the cell and the button don’t change any style…
    Any help please??

    Thank you
    Jose

    change css class to a button on cell #68292

    jperera
    Participant

    Note: The button is a cell with type button!!

    change css class to a button on cell #68334

    Dimitar
    Participant

    Hello jperera,

    You can achieve this by applying a style to your page, as shown in the following 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" />
        <style type="text/css">
            #jqxgrid .jqx-button
            {
                background-color: Yellow;
                color: Red;
                font-size: larger;
            }
        </style>
        <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/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;
    
                // 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 () {
                          return "Edit";
                      }, 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 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/

    change css class to a button on cell #68345

    jperera
    Participant

    Thank you very much Dimitar, but I’m so sorry I’m not clear, I want to assign for example the property template like a jqxbutton to the button “Edit” in the grid cell…, where I should assign it?? in the cell render function???

    change css class to a button on cell #68346

    Dimitar
    Participant

    Hi jperera,

    Unfortunately, this cannot be achieved in jqxGrid. The only way to style these buttons is through CSS. However, this is possible in jqxDataTable. For example, in the demo Command Column, you can set the buttons’ properties in the rendered callback function, e.g.:

    rendered: function () {
        if ($(".editButtons").length > 0) {
            $(".cancelButtons").jqxButton({ template: 'danger' });
            $(".editButtons").jqxButton({ template: 'info' });
    
            var editClick = function (event) {
                var target = $(event.target);
                // get button's value.
                var value = target.val();
                // get clicked row.
                var rowIndex = parseInt(event.target.getAttribute('data-row'));
                if (isNaN(rowIndex)) {
                    return;
                }
    
                if (value == "Edit") {
                    // begin edit.
                    $("#dataTable").jqxDataTable('beginRowEdit', rowIndex);
                    target.parent().find('.cancelButtons').show();
                    target.jqxButton({ template: 'success' });
                    target.val("Save");
                }
                else {
                    // end edit and save changes.
                    target.parent().find('.cancelButtons').hide();
                    target.val("Edit");
                    $("#dataTable").jqxDataTable('endRowEdit', rowIndex);
                }
            }
    
            $(".editButtons").on('click', function (event) {
                editClick(event);
            });
    
            $(".cancelButtons").click(function (event) {
                // end edit and cancel changes.
                var rowIndex = parseInt(event.target.getAttribute('data-row'));
                if (isNaN(rowIndex)) {
                    return;
                }
                $("#dataTable").jqxDataTable('endRowEdit', rowIndex, true);
            });
        }
    },

    Best Regards,
    Dimitar

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

    change css class to a button on cell #68348

    jperera
    Participant

    thank you very much I appreciated your help a lot, Dimitar I have another question:
    I have a Datasource with parameters declared in that way:
    data: { Device: $(“#cbHistorySystemNumber”).val(), IncludeOperatorAction: $(“#jqxHistoryIncludeOper”).jqxCheckBox(‘val’), endDate: $(‘#tbHistoryEndDate’).jqxDateTimeInput(‘getDate’) },

    I did the following functions to refresh the grid:
    $(document).ready(function () {
    $(‘#cbHistorySystemNumber’).on(‘select’, function (event) {
    $(“#gvHistory”).jqxGrid(‘updatebounddata’);
    });
    });
    $(document).ready(function () {
    $(‘#tbHistoryEndDate’).on(‘change’, function (event) {
    $(“#gvHistory”).jqxGrid(‘updatebounddata’);
    });
    });
    $(document).ready(function () {
    $(‘#jqxHistoryIncludeOper’).on(‘change’, function (event) {
    $(“#gvHistory”).jqxGrid(‘updatebounddata’);
    });
    });

    The problem is that when the events fired when I check the callback to the method in the server the parameters don’t change the value, the refresh is ok, the datasource go to the server but the parameters don’t have the changes that I made in the screen?? I missed something or what do you think
    Thank you very much
    Jose

    change css class to a button on cell #68402

    Dimitar
    Participant

    Hi Jose,

    You should update the data property manually before calling updatebounddata, i.e.:

    source.data = { Device: $("#cbHistorySystemNumber").val(), IncludeOperatorAction: $("#jqxHistoryIncludeOper").jqxCheckBox('val'), endDate: $('#tbHistoryEndDate').jqxDateTimeInput('getDate') };
    dataAdapter.dataBind();
    $("#gvHistory").jqxGrid('updatebounddata');

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.