Changing Cell Border or Background color when editing and finished editing

[keyurParticipant]

Hi this is my Grid and I am just trying to change border color of firstname column cells when they are being edited using this code below, but it’s not working. Please can anyone have solution for this.

<style type=”text/css”>
.current_editing
{
border-width: 3px !important;
border-color: #ffd000 !important;
}
</style>
$(document).ready(function () {
//Documents Grid
var data = <?php echo $user_grid_data ?>;
if (data == ‘logout’)
{
window.location = ‘/users/logout’;
return false;
}
var source =
{
localdata: data,
datafields: [
{name: ‘user_id’, type: ‘int’},
{name: ‘is_active’, type: ‘bool’},
{name: ‘force_password_change’, type: ‘string’},
{name: ‘firstname’, type: ‘string’},
{name: ‘lastname’, type: ‘string’},
{name: ‘username’, type: ‘string’},
{name: ‘phone_number’, type: ‘string’},
{name: ‘position’, type: ‘string’},
],
id: ‘user_id’,
datatype: “json”
};
var dataAdapter = new $.jqx.dataAdapter(source);

var cellStyle = ”;
$(“#users_grid”).jqxGrid(
{
width: 900,
height: 470,
source: dataAdapter,
columnsresize: true,
sortable: true,
editable: true,
pageable: true,
pagesize: 20,
altrows: true,
autoheight: false,
rowsheight: 20,
selectionmode: ‘singlecell’,
editmode: ‘selectedcell’,
theme: ‘glacier’,
columns: [
{hidden: true, datafield: ‘user_id’, width: 0},
{text: ‘Active’, datafield: ‘is_active’, threestatecheckbox: false, columntype: ‘checkbox’, width: 50},
{
text: ‘Force Password Change’, datafield: ‘force_password_change’, width: 150, columntype: ‘combobox’,
createeditor: function (row, column, editor) {
var list = [‘N’, ‘Y’];
editor.jqxComboBox({autoDropDownHeight: true, source: list, promptText: “Please Choose:”});
},
// update the editor’s value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == “”)
return oldvalue;
}
},
{text: ‘First Name’, datafield: ‘firstname’, align: ‘center’, width: 150, columntype: ‘text’, cellclassname: cellStyle,
cellbeginedit: function (row, datafield, columntype) {
cellclassname= “current_editing”;
return cellclassname;
}
},
{text: ‘Last Name’, datafield: ‘lastname’, align: ‘center’, width: 150, columntype: ‘text’, cellclassname: cellStyle},
{text: ‘Email’, datafield: ‘username’, align: ‘center’, width: 200, columntype: ‘text’, cellclassname: cellStyle},
{text: ‘Phone’, datafield: ‘phone_number’, align: ‘center’, width: 100, columntype: ‘text’, cellclassname: cellStyle},
{text: ‘Position’, datafield: ‘position’, align: ‘center’, columntype: ‘text’, width: 100, cellclassname: cellStyle},
]
});

$(“#users_grid”).on(‘rowselect’, function (event) {
var args = event.args;
var rowData = args.row;
});
//textboxeditorusers_gridphone_number
$(“#users_grid”).on(‘cellendedit’, function (event)
{
var args = event.args;

var dataField = event.args.datafield;
var rowBoundIndex = event.args.rowindex;
var value = args.value;

if (args.columntype == “checkbox” && dataField == “is_active”)
{
if (value == true)
{
value = ‘Y’;
} else
{
value = ‘N’;
}

}

var oldvalue = args.oldvalue;
var rowData = args.row;
var user_id = rowData[‘user_id’];

send_data_to_update(dataField, value, oldvalue, user_id, “/Users/save_user”, “users”);
});
});

[keyurParticipant]

Or is there a way to refer a cell (like cell_id or something unique) so that I can do something like in “cellbeginedit”
$(cell_id).css(“background-color”,”#333″);

[HristoParticipant]

Hello keyur,

Unfortunately, we do not have such example.
I would like to suggest you look at our “Theme Builder” section.
There you could choose the desired ‘theme’ and after that, you could change the color of the edited cell.
You should navigate to “Inputs and dropdowns” and for you case need to change the color under “Input background” label.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts