View Full Version : [CLOSED] Adding different Listitems to each ComboBox in Grid
blueworld
Mar 20, 2014, 10:22 AM
Hi,
I have a grid with a component/combobox column.
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Tourtyp" DataIndex="FormatedTourType"/>
<ext:Column ID="Column3" runat="server" Text="Route" DataIndex="FormatedCategory"/>
<ext:Column ID="Column4" runat="server" Text="Fahrzeug" DataIndex="FormatedVehicle"/>
<ext:Column ID="Column5" runat="server" Text="Beauftragter" DataIndex="FormatedPlanEmployee"/>
<ext:ComponentColumn ID="ComponentColumnNewCategory"
runat="server"
Editor="true"
DataIndex="NewRoute"
Flex="1"
Text="Neue Route">
<Component>
<ext:ComboBox ID="ComboBoxNewRoute" runat="server">
<Items>
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
Every Row in the grid needs to have different values in the Combox.
Row 1: Route1,Route2
Row 2: No Route
Row 3: Route3-1,Route3-2
etc.
Is there any example how to achieve that? I am filling the Store in Codebehind
Thanks
Daniil
Mar 20, 2014, 2:07 PM
Hi @blueworld,
You can use a ComponentColumns BeforeBind or/and Bind listeners to populate the ComboBoxes with items.
blueworld
Mar 20, 2014, 2:30 PM
Hi Daniil,
thank you, but to be honest, I have no idea what to do.
I have made a simple example.
Could you please show me what I need to change?
Row 1 should contain "A" and "B"
Row 2 should contain "C" and "D"
Thank you
<%@ Page Language="VB" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<script runat="server">
Private Class TestObject
Public Property ID As Integer
Public Property Name As String
End Class
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not ExtNet.IsAjaxRequest Then
Dim xx As New Generic.List(Of TestObject)
Dim to1 As New TestObject
to1.ID = 100
to1.Name = "A"
xx.Add(to1)
Dim to2 As New TestObject
to2.Name = "D"
xx.Add(to2)
FahrzeugeStore.DataSource = xx
FahrzeugeStore.DataBind()
End If
End Sub
</script>
<style>
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="borderLayout">
<Items>
<ext:Panel ID="Panel1" runat="server" Region="Center" Layout="FitLayout">
<Items>
<ext:GridPanel ID="FahrzeugeGrid" runat="server" Title="Fahrzeugauswahl"
Icon="Lorry" Flex="3" ForceFit="true" SelectionMemory="false">
<View>
<ext:GridView ID="Gridview1" runat="server" StripeRows="true"></ext:GridView>
</View>
<Store>
<ext:Store ID="FahrzeugeStore" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Listeners>
</Listeners>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID"
Sortable="True" Flex="1" Visible="true" />
<ext:ComponentColumn ID="ComponentColumnNewCategory"
runat="server"
Editor="true"
DataIndex="Name"
Flex="1"
Text="Name">
<Component>
<ext:ComboBox ID="NameCB" runat="server">
<Items>
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Daniil
Mar 20, 2014, 2:47 PM
Here is an example.
<ext:ComponentColumn>
<Component>
<ext:ComboBox runat="server" />
</Component>
<Listeners>
<BeforeBind Handler="if (e.rowIndex === 0) { e.config[0].store = ['A', 'B' ]; }
if (e.rowIndex === 1) { e.config[0].store = ['C', 'D' ]; }" />
</Listeners>
</ext:ComponentColumn>
Please also note that there is no sense to use an ID for a ComponentColumn's Component. It is just ignored, because a new component is render=ed for each row, but ids must be unique.
blueworld
Mar 20, 2014, 3:24 PM
Hi Daniil,
thank you for that example, now I have an idea how it does work.
The only problem is, that I will have 1-n rows, it depends on a database query.
Is there any way to do that in a more generic way, the best would be in codebehind?
Daniil
Mar 20, 2014, 4:32 PM
You could put the data for each row to some JavaScript object (it could be an array) from code behind, then use it in a BeforeBind listener.
blueworld
Mar 20, 2014, 5:43 PM
Thank you Daniil,
it doesnt need to be a combobox, I wonder if there would be a way to do something like this with the new callout feature?
I just need an option to change the value of each row before submitting the grid, but each row will have different values to choose from.
Daniil
Mar 20, 2014, 5:52 PM
Sorry, I don't quite understand the requirement. Please elaborate.
blueworld
Mar 21, 2014, 9:31 AM
Ok,
I have a grid. A specific Column in that grid can have 1-n values.
Lets say there is a car grid with the car-name and color.
Before submitting that rows values you should be able to change the color of each car.
But car A only has "red" and "yellow" as option.
Car B has "green" and "blue"
etc.
Daniil
Mar 21, 2014, 10:22 AM
Thank you for the clarification, it sounds clear for me. But how do you want to use a Callout in this scenario?
blueworld
Mar 21, 2014, 10:31 AM
I was just asking, if there might be a better way then using that combobox solution ;)
Daniil
Mar 21, 2014, 1:31 PM
Ok. Seems I have no good ideas on that. Though, it doesn't that there is no better solutions at all:)
Please clarify do you not like something in a solution with a ComboBox?
blueworld
Mar 21, 2014, 2:26 PM
Hi Daniil,
i can go on with the combobox, but the next problem is, how would I select the "current" color in each combobox, if I fill that store in the beforebind event?
What do I need to do, in order to select A in Row 1 and D in Row 2?
<ext:ComponentColumn>
<Component>
<ext:ComboBox runat="server" />
</Component>
<Listeners>
<BeforeBind Handler="if (e.rowIndex === 0) { e.config[0].store = ['A', 'B' ]; }
if (e.rowIndex === 1) { e.config[0].store = ['C', 'D' ]; }" />
</Listeners>
</ext:ComponentColumn>
edit: got it, its no problem.
<%@ Page Language="VB" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<script runat="server">
Private Class TestObject
Public Property ID As Integer
Public Property Name As String
End Class
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not ExtNet.IsAjaxRequest Then
Dim xx As New Generic.List(Of TestObject)
Dim to1 As New TestObject
to1.ID = 100
to1.Name = "A"
xx.Add(to1)
Dim to2 As New TestObject
to2.Name = "D"
xx.Add(to2)
FahrzeugeStore.DataSource = xx
FahrzeugeStore.DataBind()
End If
End Sub
</script>
<style>
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="borderLayout">
<Items>
<ext:Panel ID="Panel1" runat="server" Region="Center" Layout="FitLayout">
<Items>
<ext:GridPanel ID="FahrzeugeGrid" runat="server" Title="Fahrzeugauswahl"
Icon="Lorry" Flex="3" ForceFit="true" SelectionMemory="false">
<View>
<ext:GridView ID="Gridview1" runat="server" StripeRows="true"></ext:GridView>
</View>
<Store>
<ext:Store ID="FahrzeugeStore" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Listeners>
</Listeners>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID"
Sortable="True" Flex="1" Visible="true" />
<ext:ComponentColumn ID="ComponentColumnNewCategory"
runat="server"
Editor="true"
DataIndex="Name"
Flex="1"
Text="Name">
<Component>
<ext:ComboBox ID="NameCB" runat="server">
</ext:ComboBox>
</Component>
<Listeners>
<BeforeBind Handler="if (e.rowIndex === 0) { e.config[0].store = ['A', 'B' ]; }
if (e.rowIndex === 1) { e.config[0].store = ['C', 'D' ]; }" />
</Listeners>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
I think you can close this thread ;)
Thank you
Powered by vBulletin® Version 4.2.3 Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.