[CLOSED] Make dirty cells bold in PropertyGrid

  1. #1

    [CLOSED] Make dirty cells bold in PropertyGrid

    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.
    Last edited by Daniil; Feb 20, 2014 at 12:05 PM. Reason: [CLOSED]
  2. #2
    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>
  3. #3
    It's working great.

    Thanks a lot!

Similar Threads

  1. Replies: 1
    Last Post: Sep 13, 2012, 8:17 PM
  2. Replies: 9
    Last Post: May 09, 2012, 9:22 AM
  3. [CLOSED] GridPanel - how to make text in cells selectable?
    By wagger in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 05, 2011, 3:49 PM
  4. [CLOSED] how to make a text area bold
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 18, 2010, 4:21 PM
  5. FieldLabel- Bold
    By grmontero in forum 1.x Help
    Replies: 1
    Last Post: Sep 09, 2009, 7:52 PM

Tags for this Thread

Posting Permissions