Please provide a runnable test sample.
You could also place the code behind within
tags directly on a ASPX page.Code:<script runat="server>
</script>
It will allow us to just copy/paste your code and run.
Printable View
Please provide a runnable test sample.
You could also place the code behind within
tags directly on a ASPX page.Code:<script runat="server>
</script>
It will allow us to just copy/paste your code and run.
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.
Regards,Code:<%@ 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>
Huzefa
You should define the following Renderer for the Location column:
And, certainly, the Store3 should be initially bound with all required Names if you need to show them on initial load.Code:<Renderer Handler="var record = Store3.getById(value);
if (record) {
value = record.data.Name;
}
return value;" />
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.
how do it do that??
Well, the same way that you populate the grdComboGrid's Store. But within initial Page_Load.