Returning value from DirectMethod for Column Renderer

Page 3 of 3 FirstFirst 123
  1. #21
    Please provide a runnable test sample.

    You could also place the code behind within
    <script runat="server>
    
    </script>
    tags directly on a ASPX page.

    It will allow us to just copy/paste your code and run.
  2. #22
    Dear Danill,

    Here is the updated code as per your request. Please go through and let me know your feedback.

    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.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridComboTest.aspx.cs"
        Inherits="ExtNetSampleSite.GridComboTest" %>
    
    <%@ Import Namespace="ExtNetSampleSite" %>
    <!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>
        <script runat="server">
            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; }
            }
        </script>
        <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"></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>
    Regards,
    Huzefa
    Last edited by huzzy143; Feb 06, 2012 at 11:51 AM.
  3. #23
    You should define the following Renderer for the Location column:
    <Renderer Handler="var record = Store3.getById(value);
                                               
                        if (record) {
                            value = record.data.Name;
                        }
                                               
                        return value;" />
    And, certainly, the Store3 should be initially bound with all required Names if you need to show them on initial load.

    As far as I can understand you'd like to avoid binding all location names, right? If so, you could just analyze a grid's data on "LocationId" aspect and bind the Store3 with required names only.
  4. #24
    how do it do that??
  5. #25
    Well, the same way that you populate the grdComboGrid's Store. But within initial Page_Load.
Page 3 of 3 FirstFirst 123

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. 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 Premium Help
    Replies: 4
    Last Post: Dec 10, 2010, 5:40 AM

Tags for this Thread

Posting Permissions