jQuery UI Widgets › Forums › Grid › change css class to a button on cell
Tagged: Button, columntype, css, data, grid, jqxButton, jqxgrid, server, source, style, update, updatebounddata
This topic contains 6 replies, has 2 voices, and was last updated by Dimitar 9 years, 8 months ago.
-
Author
-
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
JoseNote: The button is a cell with type button!!
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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???
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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
JoseHi 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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.