[CLOSED] Change the value of a grid cell - The new value contains Html-Code

  1. #1

    [CLOSED] Change the value of a grid cell - The new value contains Html-Code

    Hello everybody,

    i have a problem with the grid.
    I try to build a grid where you can change the texts and place some html code in the new value.
    If you leave the cell a method will be called to change the value in the database directly.

    My grid is useable but i have a problem when i try to set html coded as text. Normal text without html runs.

    So i though i could use the HtmlEditor to change the values but the performance is not so fine like a textfield or a textarea.
    I can't jump out of the cell with a simple Ctrl+Enter and the new value is not available.

    I had created a little sample to show you my problem.

    In the following code you have a column with textfields and one with htmleditor.
    If you write some html code in a textfield cell the little popup which shows the changes will not be displayed.
    If you change the value in a htmleditor cell and leave the cell the new value is nothing and the popup isn't displayed too.

    I know that my english isn't the best so if you don't understand what my problem is i will try to explain it better.

    Here my sample code:

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        public class Company
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
            public DateTime LastChange { get; set; }
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
    
        private void BindData()
        {
            this.GridPanel1.Store.Primary.DataSource = this.GetData();
            this.GridPanel1.Store.Primary.DataBind();
        }
    
        private List<Company> GetData()
        {
            return new List<Company> 
            {
                new Company { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = DateTime.Now },
                new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = DateTime.Now },
                new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = DateTime.Now },
                new Company { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
                new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = DateTime.Now },
                new Company { ID = 6, Name = "AT&amp;T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = DateTime.Now },
                new Company { ID = 7, Name = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = DateTime.Now },
                new Company { ID = 8, Name = "Caterpillar Inc.", Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = DateTime.Now },
                new Company { ID = 9, Name = "Citigroup, Inc.", Price = 49.37, Change = 0.02, PctChange = 0.04, LastChange = DateTime.Now },
                new Company { ID = 10, Name = "E.I. du Pont de Nemours and Company", Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = DateTime.Now },
                new Company { ID = 11, Name = "Exxon Mobil Corp", Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = DateTime.Now },
                new Company { ID = 12, Name = "General Electric Company", Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = DateTime.Now },
                new Company { ID = 13, Name = "General Motors Corporation", Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = DateTime.Now },
                new Company { ID = 14, Name = "Hewlett-Packard Co.", Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = DateTime.Now },
                new Company { ID = 15, Name = "Honeywell Intl Inc", Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = DateTime.Now },
                new Company { ID = 16, Name = "Intel Corporation", Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = DateTime.Now },
                new Company { ID = 17, Name = "International Business Machines", Price = 81.41, Change = 0.44, PctChange = 0.54, LastChange = DateTime.Now },
                new Company { ID = 18, Name = "Johnson &amp; Johnson", Price = 64.72, Change = 0.06, PctChange = 0.09, LastChange = DateTime.Now },
                new Company { ID = 19, Name = "JP Morgan &amp; Chase &amp; Co", Price = 45.73, Change = 0.07, PctChange = 0.15, LastChange = DateTime.Now },
                new Company { ID = 20, Name = "McDonald\"s Corporation", Price = 36.76, Change = 0.86, PctChange = 2.40, LastChange = DateTime.Now },
                new Company { ID = 21, Name = "Merck &amp; Co., Inc.", Price = 40.96, Change = 0.41, PctChange = 1.01, LastChange = DateTime.Now },
                new Company { ID = 22, Name = "Microsoft Corporation", Price = 25.84, Change = 0.14, PctChange = 0.54, LastChange = DateTime.Now },
                new Company { ID = 23, Name = "Pfizer Inc", Price = 27.96, Change = 0.4, PctChange = 1.45, LastChange = DateTime.Now },
                new Company { ID = 24, Name = "The Coca-Cola Company", Price = 45.07, Change = 0.26, PctChange = 0.58, LastChange = DateTime.Now },
                new Company { ID = 25, Name = "The Home Depot, Inc.", Price = 34.64, Change = 0.35, PctChange = 1.02, LastChange = DateTime.Now },
                new Company { ID = 26, Name = "The Procter &amp; Gamble Company", Price = 61.91, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
                new Company { ID = 27, Name = "United Technologies Corporation", Price = 63.26, Change = 0.55, PctChange = 0.88, LastChange = DateTime.Now },
                new Company { ID = 28, Name = "Verizon Communications", Price = 35.57, Change = 0.39, PctChange = 1.11, LastChange = DateTime.Now },
                new Company { ID = 29, Name = "Wal-Mart Stores, Inc.", Price = 45.45, Change = 0.73, PctChange = 1.63, LastChange = DateTime.Now }
            };
        }
    
        [DirectMethod(Namespace = "CompanyX")]
        public void AfterEdit(int id, string field, string oldValue, string newValue, object customer)
        {
            string message = "Property: {0}<br />Field: {1}<br />Old Value: {2}<br />New Value: {3}";
    
            // Send Message...
            X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();
    
            this.GridPanel1.Store.Primary.CommitChanges();
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
    
        <script type="text/javascript">
            var template = '{1}';
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
            
            var startEditing = function (e) {
                if (e.getKey() === e.ENTER) {
                    var grid = GridPanel1,
                        record = grid.getSelectionModel().getSelected(),
                        index = grid.store.indexOf(record);
                        
                    grid.startEditing(index, 1);
                }
            };
            
            var afterEdit = function (e) {
                /*
                Properties of 'e' include:
                    e.grid - This grid
                    e.record - The record being edited
                    e.field - The field name being edited
                    e.value - The value being set
                    e.originalValue - The original value for the field, before the edit.
                    e.row - The grid row index
                    e.column - The grid column index
                */
                
                // Call DirectMethod
                CompanyX.AfterEdit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true" IDMode="Explicit" />
        
        <h1>Editable GridPanel With Save To [DirectMethod]</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Editable GridPanel" 
            StripeRows="true"
            TrackMouseOver="true"
            Width="600" 
            Height="350"
            AutoExpandColumn="Name">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:JsonReader IDProperty="ID">
                            <Fields>
                                <ext:RecordField Name="ID" Type="Int" />
                                <ext:RecordField Name="Name" />
                                <ext:RecordField Name="Price" Type="Float" />
                                <ext:RecordField Name="Change" Type="Float" />
                                <ext:RecordField Name="PctChange" Type="Float" />
                                <ext:RecordField Name="LastChange" Type="Date" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Listeners>
                <KeyDown Fn="startEditing" />
                <AfterEdit Fn="afterEdit" />
            </Listeners>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="ID" DataIndex="ID" Width="35" />
                    <ext:Column ColumnID="Name" Header="NameTextField" DataIndex="Name">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Width="200" ColumnID="NameHtmlEditor" Header="NameHtmlEditor" DataIndex="Name">
                        <Editor>
                        <ext:HtmlEditor ID="HtmlEditor1" runat="server">
                        </ext:HtmlEditor>
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
            </SelectionModel>
        </ext:GridPanel>          
    </body>
    </html>
  2. #2

    RE: [CLOSED] Change the value of a grid cell - The new value contains Html-Code

    Hi,

    By default, ASP.NET doesn't allow to submit html content (ASP.NET raises Dangerous content exception). You can see that exception if add failure handler to the direct method


    CompanyX.AfterEdit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data, {failure: function(result){alert(result);}});

    Solutions:

    - set ValidateRequest="false" for the page


    or


    - set AutoEncode="true" for the grid (in this case the html string will be shown in the cell with tags (encoded string) )
  3. #3

    RE: [CLOSED] Change the value of a grid cell - The new value contains Html-Code

    Other Solution:

    By calling the DirectMethod in javascript use encodeURI.

    Sample
    CompanyX.AfterEdit(e.record.data.ID, e.field, encodeURI(e.value));An in the DirectMethod, herer AfterEdit:
    [DirectMethod]
    public void AfterEdit(string id, string field, string newValue)
    {
    string decodeValue = Server.UrlDecode(newValue);
    ....





Similar Threads

  1. [CLOSED] Change grid cell color
    By BGeorge in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Dec 12, 2011, 5:05 AM
  2. [CLOSED] Change grid cell color on fly
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 03, 2010, 1:27 PM
  3. [CLOSED] Change the value of a grid cell
    By tms in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 15, 2010, 7:43 AM
  4. Change grid cell value
    By gpcontreras in forum 1.x Help
    Replies: 1
    Last Post: Feb 02, 2010, 5:24 PM
  5. Replies: 2
    Last Post: Feb 19, 2009, 2:02 PM

Posting Permissions