PDA

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



posser
Feb 19, 2014, 8:28 PM
Hello

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>
<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;
//record.commit();
this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
} else {
record.reject();
}
}
}
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Margins="0 0 10 0">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" Pack="Center" />
</LayoutConfig>
<Items>
<ext:Container ID="Container1" runat="server" Width="275" Height="300">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:PropertyGrid ID="PropertyGrid1" runat="server">
<Source>
<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" />
</Source>
</ext:PropertyGrid>
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>


Thanks.

Daniil
Feb 20, 2014, 8: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;
}
//record.commit();
me.fireEvent('propertychange', me.source, record.getId(), v, oldValue);
} else {
record.reject();
}
}
}
});

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

Cls="my-grid"

<style>
.my-grid .x-grid-dirty-cell .x-grid-cell-inner {
font-weight: bold;
}
</style>

posser
Feb 20, 2014, 12:48 PM
It's working great.

Thanks a lot!