PDA

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