View Full Version : [CLOSED] Make dirty cells bold in PropertyGrid

Feb 19, 2014, 7:28 PM

I would like to know if there is a way (maybe handling in the client side) to make dirty cells appears in bold or at least that red triangle. I intend to alert user which properties have been modified before the save button has been clicked.

I was reading Sencha docs, and it seems like I have to override original onUpdate from PropertyGrid, because changes are submitted automatically, preventing dirty cells. I tried with this code, but it's not working.

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<head id="Head1" runat="server">
<title>Property GridPanel - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script type="text/javascript">
Ext.override(Ext.grid.PropertyStore, {
onUpdate: function (ds, record, type) {
if (type == Ext.data.Record.EDIT) {
var v = record.data['value'];
var oldValue = record.modified['value'];
if (this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false) {
this.source[record.id] = v;
this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
} else {
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Margins="0 0 10 0">
<ext:VBoxLayoutConfig Align="Center" Pack="Center" />
<ext:Container ID="Container1" runat="server" Width="275" Height="300">
<ext:VBoxLayoutConfig Align="Stretch" />
<ext:PropertyGrid ID="PropertyGrid1" runat="server">
<ext:PropertyGridParameter Name="(name)" Value="Property GridPanel" />
<ext:PropertyGridParameter Name="grouping" Value="false" />
<ext:PropertyGridParameter Name="autoFitColumns" Value="true" />
<ext:PropertyGridParameter Name="productionQuality" Value="false" />
<ext:PropertyGridParameter Name="created" Value="Ext.Date.parse('10/15/2006', 'm/d/Y')" Mode="Raw" />
<ext:PropertyGridParameter Name="tested" Value="false" DisplayName="QA" />
<ext:PropertyGridParameter Name="version" Value="0.01" />
<ext:PropertyGridParameter Name="borderWidth" Value="5" DisplayName="Border Width" />


Feb 20, 2014, 7:05 AM
Hi @posser,

The onUpdate method is defined inside PropertyGrid, not PropertyStore.

Ext.override(Ext.grid.property.Grid, {
onUpdate : function(store, record, operation) {
var me = this,
v, oldValue;

if (me.rendered && operation == Ext.data.Model.EDIT) {
v = record.get(me.valueField);
oldValue = record.modified.value;
if (me.fireEvent('beforepropertychange', me.source, record.getId(), v, oldValue) !== false) {
if (me.source) {
me.source[record.getId()] = v;
me.fireEvent('propertychange', me.source, record.getId(), v, oldValue);
} else {

As for bold, please set up this for the PropertyGrid.


.my-grid .x-grid-dirty-cell .x-grid-cell-inner {
font-weight: bold;

Feb 20, 2014, 11:48 AM
It's working great.

Thanks a lot!