Returning value from DirectMethod for Column Renderer

Page 2 of 3 FirstFirst 123 LastLast
  1. #11
    Hi,

    How can i set a value for a particular cell in the AfterRender event.

    function(e){
     var rows = e.store.data.length;
     for(var i=0;i < rows;i++){
         var item = e.store.data.itemAt(i);
         item.data['ColorId'] = 'value';
     }
    }
    The above code does not work. I am trying to set a readable value for the ColorId column.

    I am looping through each GridRow and then getting the value from server for the ColorId column and then want to set the Readable Value instead of Id.

    Can you please tell how can i achieve this.

    Regards,
    Huzefa
  2. #12
    The AfterRender event of what?

    Generally, to update a record's field you should use its set method.
    item.set('ColorId', 'value');
    See also
    http://docs.sencha.com/ext-js/3-4/#!...ord-method-set
  3. #13
    item.set is giving error.
    I am not getting how to set value for a column. Please help.
  4. #14
    I though the "item" is a record instance.

    Should be:
    var item = e.store.getAt(i);
    item.set('ColorId', 'value');
  5. #15
    Thanks, I will check this.

    But what if I don't modify the store and instead modify the column display text.
    I want the way renderer works, but I will change the text in after render Listner and get the value from server using Ajax or DirectMethod.

    Can you please tell me how can I directly change the cells display text instead of modifying the store?

    Regards,
    Huzefa
  6. #16
    It's possible, but the changes will be discarded after grid's view refreshing which happens very often: sorting, filtering, paging, load a new data, editing.

    I would strongly recommend to avoid changing cells values directly.

    I've still not got your requirement well. Please provide a sample which would demonstrate the requirement.
  7. #17
    Here is a small sample which i have made to better communicate the problem that i am facing.

    In this sample there is GridPanel which has a column for 'Location'. The Location column is attached to DropDownField as Editor.

    What i want is to show the Location Name instead of LocationId in the Location column.

    Please go through the sample and let me know your feedback.

    .ASPX
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridComboTest.aspx.cs"
        Inherits="ExtNetSampleSite.GridComboTest" %>
    
    <!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 runat="server">
        <title></title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" InitScriptMode="Linked"
            DirectMethodNamespace="X" IDMode="Explicit" />
        <div>
            <ext:GridPanel ID="grdTest" runat="server" Height="500" StripeRows="false" Title="Editable GridPanel"
                TrackMouseOver="true" Width="600" AutoExpandColumn="Name">
                <Store>
                    <ext:Store ID="Store1" runat="server" AutoSave="true" SkipIdForNewRecords="false"
                        RefreshAfterSaving="None">
                        <Reader>
                            <ext:JsonReader IDProperty="ID">
                                <Fields>
                                    <ext:RecordField Name="ID" Type="Int" />
                                    <ext:RecordField Name="Name" />
                                    <ext:RecordField Name="LocationId" />
                                    <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>
                <ColumnModel ID="ColumnModel2" runat="server">
                    <Columns>
                        <ext:RowNumbererColumn>
                        </ext:RowNumbererColumn>
                        <ext:Column Header="ID" DataIndex="ID" Editable="false">
                        </ext:Column>
                        <ext:Column Header="Name" DataIndex="Name">
                        </ext:Column>
                        <ext:Column Header="Location" DataIndex="LocationId">
                            <Editor>
                                <ext:DropDownField ID="DropDownField1" runat="server" Editable="true" Width="200"
                                    TriggerIcon="Combo" Mode="ValueText">
                                    <DirectEvents>
                                        <Expand OnEvent="GridExpand_Event">
                                        </Expand>
                                        <KeyPress OnEvent="GridKeyPress_Event" Delay="500">
                                        </KeyPress>
                                    </DirectEvents>
                                    <Component>
                                        <ext:GridPanel ID="grdComboGrid" runat="server" Height="350" Frame="false" Width="400">
                                            <Store>
                                                <ext:Store ID="Store3" runat="server">
                                                    <Reader>
                                                        <ext:JsonReader IDProperty="ID">
                                                            <Fields>
                                                                <ext:RecordField Name="ID" Type="Int" />
                                                                <ext:RecordField Name="Name" />
                                                            </Fields>
                                                        </ext:JsonReader>
                                                    </Reader>
                                                </ext:Store>
                                            </Store>
                                            <ColumnModel ID="ColumnModel3" runat="server">
                                                <Columns>
                                                    <ext:Column ColumnID="ID" Header="ID" DataIndex="ID" Width="50" />
                                                    <ext:Column Header="Name" DataIndex="Name" Width="130" />
                                                </Columns>
                                            </ColumnModel>
                                            <Listeners>
                                                <RowClick Handler="this.dropDownField.setValue(this.getSelectionModel().getSelected().data.ID,this.getSelectionModel().getSelected().data.ID + ' - ' + this.getSelectionModel().getSelected().data.Name ,true);" />
                                            </Listeners>
                                            <LoadMask ShowMask="true" />
                                            <SelectionModel>
                                                <ext:RowSelectionModel ID="RowSelectionModel3" runat="server">
                                                    <Listeners>
                                                        <SelectionChange Handler="if(this.grid.getSelectionModel().getSelected()!=null){this.grid.dropDownField.setValue(this.grid.getSelectionModel().getSelected().data.ID,this.grid.getSelectionModel().getSelected().data.ID + ' - ' + this.grid.getSelectionModel().getSelected().data.Name ,true);}" />
                                                    </Listeners>
                                                </ext:RowSelectionModel>
                                            </SelectionModel>
                                            <Plugins>
                                                <ext:GridFilters runat="server" ID="GridFilters2" Local="true">
                                                    <Filters>
                                                        <ext:NumericFilter DataIndex="ID" />
                                                        <ext:StringFilter DataIndex="Name" />
                                                    </Filters>
                                                </ext:GridFilters>
                                            </Plugins>
                                            <BottomBar>
                                                <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10">
                                                    <Items>
                                                        <ext:ComboBox ID="ComboBox1" runat="server" Width="40" Text="10">
                                                            <Items>
                                                                <ext:ListItem Text="10" Value="10" />
                                                                <ext:ListItem Text="20" Value="20" />
                                                                <ext:ListItem Text="30" Value="30" />
                                                            </Items>
                                                            <DirectEvents>
                                                                <Select OnEvent="Select_Event">
                                                                </Select>
                                                            </DirectEvents>
                                                        </ext:ComboBox>
                                                    </Items>
                                                </ext:PagingToolbar>
                                            </BottomBar>
                                        </ext:GridPanel>
                                    </Component>
                                </ext:DropDownField>
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Price" DataIndex="Price">
                            <Editor>
                                <cc1:CustomNumeric ID="CustomNumeric1" runat="server">
                                </cc1:CustomNumeric>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                </SelectionModel>
            </ext:GridPanel>
        </div>
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            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 + "%");
            };
    
            function gridComboSelect(grid, x, y, z) {
    
            }
        </script>
        </form>
    </body>
    </html>
    .CS
    using System;
    using System.Collections.Generic;
    using Ext.Net;
    
    namespace ExtNetSampleSite
    {
        public partial class GridComboTest : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    this.BindTestData();
                }
            }
    
            protected void Select_Event(object sender, DirectEventArgs e)
            {
                var combo = sender as ComboBox;
                this.PagingToolBar1.SetPageSize(int.Parse(combo.SelectedItem.Value));
            }
    
            protected void GridKeyPress_Event(object sender, DirectEventArgs e)
            {
                if (string.IsNullOrWhiteSpace(DropDownField1.Text))
                {
                    this.grdComboGrid.Store.Primary.ClearFilter();
                    this.BindGridComboData();
                }
                else
                {
                    this.BindGridComboData();
                    this.grdComboGrid.Store.Primary.Filter("ID", this.DropDownField1.Text, false, false);
                    var rowSelection = this.grdComboGrid.SelectionModel.Primary as RowSelectionModel;
                    rowSelection.SelectFirstRow();
                    rowSelection.UpdateSelection();
                }
            }
    
            protected void GridExpand_Event(object sender, DirectEventArgs e)
            {
                this.BindGridComboData();
            }
    
            private void BindGridComboData()
            {
                this.grdComboGrid.Store.Primary.DataSource = this.GetLocationData();
                this.grdComboGrid.Store.Primary.DataBind();
            }
    
            private void BindTestData()
            {
                var data = this.GetCompanyData();
                Session["Company1"] = data;
                this.grdTest.Store.Primary.DataSource = data;
                this.grdTest.Store.Primary.DataBind();
            }
    
            private List<Company> GetCompanyData()
            {
                return new List<Company>
            {
                new Company { ID = 1, Name = "3m Co",LocationId = 1,Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = DateTime.Now },
                new Company { ID = 2, Name = "Alcoa Inc",LocationId = 2, Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = DateTime.Now },
                new Company { ID = 3, Name = "Altria Group Inc",LocationId = 2, Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = DateTime.Now },
                new Company { ID = 4, Name = "American Express Company",LocationId = 1, Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
                new Company { ID = 5, Name = "American International Group, Inc.",LocationId = 2, Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = DateTime.Now },
                new Company { ID = 6, Name = "AT&T Inc.",LocationId = 1, Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = DateTime.Now },
                new Company { ID = 7, Name = "Boeing Co.",LocationId = 3, Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = DateTime.Now },
                new Company { ID = 8, Name = "Caterpillar Inc.",LocationId = 1, Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = DateTime.Now },
                new Company { ID = 9, Name = "Citigroup, Inc.",LocationId = 3, 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",LocationId = 2, Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = DateTime.Now },
                new Company { ID = 11, Name = "Exxon Mobil Corp",LocationId = 1, Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = DateTime.Now },
                new Company { ID = 12, Name = "General Electric Company",LocationId = 2, Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = DateTime.Now },
                new Company { ID = 13, Name = "General Motors Corporation",LocationId = 3, Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = DateTime.Now },
                new Company { ID = 14, Name = "Hewlett-Packard Co.",LocationId = 2, Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = DateTime.Now },
                new Company { ID = 15, Name = "Honeywell Intl Inc",LocationId = 2, Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = DateTime.Now },
                new Company { ID = 16, Name = "Intel Corporation",LocationId = 2, Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = DateTime.Now },
                new Company { ID = 17, Name = "International Business Machines",LocationId = 1, Price = 81.41, Change = 0.44, PctChange = 0.54, LastChange = DateTime.Now },
                new Company { ID = 18, Name = "Johnson & Johnson",LocationId = 3, Price = 64.72, Change = 0.06, PctChange = 0.09, LastChange = DateTime.Now },
                new Company { ID = 19, Name = "JP Morgan & Chase & Co",LocationId = 1, Price = 45.73, Change = 0.07, PctChange = 0.15, LastChange = DateTime.Now },
                new Company { ID = 20, Name = "McDonald\"s Corporation",LocationId = 1, Price = 36.76, Change = 0.86, PctChange = 2.40, LastChange = DateTime.Now },
                new Company { ID = 21, Name = "Merck & Co., Inc.",LocationId = 1, Price = 40.96, Change = 0.41, PctChange = 1.01, LastChange = DateTime.Now },
                new Company { ID = 22, Name = "Microsoft Corporation",LocationId = 1, Price = 25.84, Change = 0.14, PctChange = 0.54, LastChange = DateTime.Now },
                new Company { ID = 23, Name = "Pfizer Inc",LocationId = 1, Price = 27.96, Change = 0.4, PctChange = 1.45, LastChange = DateTime.Now },
                new Company { ID = 24, Name = "The Coca-Cola Company",LocationId = 1, Price = 45.07, Change = 0.26, PctChange = 0.58, LastChange = DateTime.Now },
                new Company { ID = 25, Name = "The Home Depot, Inc.",LocationId = 1, Price = 34.64, Change = 0.35, PctChange = 1.02, LastChange = DateTime.Now },
                new Company { ID = 26, Name = "The Procter & Gamble Company",LocationId = 1, Price = 61.91, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
                new Company { ID = 27, Name = "United Technologies Corporation",LocationId = 1, Price = 63.26, Change = 0.55, PctChange = 0.88, LastChange = DateTime.Now },
                new Company { ID = 28, Name = "Verizon Communications",LocationId = 1, Price = 35.57, Change = 0.39, PctChange = 1.11, LastChange = DateTime.Now },
                new Company { ID = 29, Name = "Wal-Mart Stores, Inc.",LocationId = 1, Price = 45.45, Change = 0.73, PctChange = 1.63, LastChange = DateTime.Now }
            };
            }
    
            private List<Location> GetLocationData()
            {
                return new List<Location>
            {
                new Location { ID = 1, Name = "Washington" },
                new Location { ID = 2, Name = "New York" },
                new Location { ID = 3, Name = "Seattle" },
            };
            }
        }
    
        public class Company
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
    
            public int LocationId { get; set; }
    
            public double Price { get; set; }
    
            public double Change { get; set; }
    
            public double PctChange { get; set; }
    
            public DateTime LastChange { get; set; }
        }
    
        public class Location
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
        }
    }
    Regards,
    Huzefa
  8. #18
    I have an "Not found <cc1:CustomNumeric>" error.
  9. #19
    No problem, remove the customnumeric control as the editor of price column and then test it
  10. #20
    Any updates??
Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. Setting and returning value on checkbox
    By HexElffilter in forum 1.x Help
    Replies: 0
    Last Post: Feb 14, 2012, 8:39 AM
  2. DirectMethod returning a boolean
    By mark39 in forum 1.x Help
    Replies: 2
    Last Post: Dec 15, 2011, 11:46 AM
  3. Replies: 1
    Last Post: Sep 13, 2011, 5:19 PM
  4. [CLOSED] Difference between DirectMethod , DirectEvent, Static DirectMethod
    By syllabusarq in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 01, 2011, 11:37 AM
  5. [CLOSED] Reach Command coloumn at run time with javascript
    By farisqadadeh in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 10, 2010, 5:40 AM

Tags for this Thread

Posting Permissions