GridPanel : read Rows and Submit in a global Array

[Marc]

Hi,

i have two GridPanels from the first GridPanel i add one or more selected Rows into the second GridPanel. That works perfect, but i have a Problem when i want to submit this Page to go forward to another Page i need to read all the Rows from the second Gridpanel into a global Array, because the rows of the second Gridpanel are necessary for the commands in the new Page.

.... adding selected Rows from the first GridPanel into the second one

<ext:Store ID="Store2" runat="server"  DataSourceID="SqlDataSource1">
         <Reader>
         <ext:JsonReader>
                                                <Fields>
                                                <ext:RecordField Name="ParaName"></ext:RecordField>
                                                <ext:RecordField Name="ParaGruppe"></ext:RecordField>
                                                <ext:RecordField Name="GraphTyp"></ext:RecordField>
                                                <ext:RecordField Name="Space"></ext:RecordField>
                                                </Fields>
         </ext:JsonReader>
         </Reader>    
</ext:Store>
<ext:GridPanel ID="GridPanel2" runat="server" StripeRows="true"
                                                Height="260" AutoExpandColumn="Space" StoreID="Store2" AutoScroll="true" 
                                                TrackMouseOver="True">
                                                <ColumnModel ID="ColumnModel1" runat="server">
                                                <Columns>
                                                <ext:Column Width="300" Header="Parametername" 
                                                    DataIndex="ParaName" Sortable="True" Align="Center" />
                                                <ext:Column Width="180" Header="Parametergruppe" 
                                                    DataIndex="ParaGruppe" Align="Center" />
                                                <ext:Column Width="180" Header="Graph-Darstellung" 
                                                    DataIndex="GraphTyp" Align="Center" />
                                                <ext:CommandColumn Width="25">
                                                <Commands>
                                                <ext:GridCommand  Icon="Add" CommandName="Add" ToolTip-Text="Add"  >
                                                </ext:GridCommand>
                                                </Commands>
                                                </ext:CommandColumn>
                                                <ext:Column ColumnID="Space" Header="" 
                                                    DataIndex="Space" Align="Center" MenuDisabled="true" Groupable="False" />
                                                </Columns>
                                                </ColumnModel>
                                                <SelectionModel>
                                                <ext:RowSelectionModel runat="server" SingleSelect="true">
                                                </ext:RowSelectionModel>
                                                </SelectionModel>
                                                <LoadMask ShowMask="true" />
                                                <BottomBar>
                                                <ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="Store2" />
                                                </BottomBar>
                                                <Listeners>
                                                    <Command Handler="Selector.add();"/>
                                                </Listeners>
</ext:GridPanel>
.....
var Selector = {add : function (source, destination) {
               
                source = source || GridPanel2;
                destination = destination || GridPanel1;
                if (source.hasSelection()) {
                    var records = source.selModel.getSelections();
                    Ext.each(records, function(record){
                        destination.store.addSorted(record);
                        
                    });}}}
.....
<ext:Store ID="Store1" runat="server" >
                                                <Reader>
                                                <ext:JsonReader>
                                                <Fields>
                                                <ext:RecordField Name="ParaName"></ext:RecordField>
                                                <ext:RecordField Name="ParaGruppe"></ext:RecordField>
                                                <ext:RecordField Name="GraphTyp"></ext:RecordField>
                                                <ext:RecordField Name="Space"></ext:RecordField>
                                                </Fields>
                                                </ext:JsonReader>
                                                </Reader>    
</ext:Store>

<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" StoreID="Store1"
                                                Height="210" AutoExpandColumn="Space" AutoScroll="true"
                                                TrackMouseOver="True">
                                                <ColumnModel ID="ColumnModel2" runat="server">
                                                <Columns>
                                                <ext:Column Width="300" Header="Parametername" 
                                                    DataIndex="ParaName" Align="Center" Sortable="True" />
                                                <ext:Column Width="180" ColumnID="Gruppe" Header="Parametergruppe" 
                                                    DataIndex="ParaGruppe" Align="Center" />
                                                <ext:Column Width="180" Header="Graph-Darstellung" 
                                                    DataIndex="GraphTyp" Align="Center"/>
                                                <ext:CommandColumn Width="25">
                                                <Commands>
                                                <ext:GridCommand Icon="Delete" CommandName="Delete1" ToolTip-Text="Eintrag löschen" />
                                                </Commands>
                                                </ext:CommandColumn> 
                                                <ext:Column ColumnID="Space" Header="" 
                                                    DataIndex="Space" Align="Center" MenuDisabled="true" Groupable="False" />                                             
                                                </Columns>
                                                </ColumnModel>
                                                <SelectionModel>
                                                <ext:RowSelectionModel runat="server" SingleSelect="true">
                                                </ext:RowSelectionModel>
                                                </SelectionModel>
                                                <Listeners>
                                                    <Command Fn="commandHandler" />
                                                </Listeners>
</ext:GridPanel>
.....
var commandHandler = function(cmd, record) {
        switch (cmd) {
            case "Delete1":
                GridPanel1.deleteSelected();UserForm.getForm().reset();
            break;
            case "Edit1":
                Ext.Msg.alert('Delete', record.data.UserId);
            break; }}
.....

.... here the Button to redirect to the other Page

<ext:Button ID="Button3" runat="server" Text="Diagramm darstellen" Icon="chartbar">
                                            <AjaxEvents>
                                            <Click OnEvent="Button3_Click"></Click>
                                            </AjaxEvents>
</ext:Button>
.....
Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
        Session("ZeitauswahlStart") = Request.Form(DateField1.ClientID).ToString() & " " & _
                                    Request.Form(TimeField1.ClientID).ToString()
        Session("ZeitauswahlEnde") = Request.Form(DateField2.ClientID).ToString() & " " & _
                                    Request.Form(TimeField2.ClientID).ToString()

       ' Some Code for Submit the Rows into an Array


        Response.Redirect("Diagramm1.aspx")
End Sub
.....

oh my God, my English is bad as well .. but i hope anyone understand my Problem and give me a helping hand ..

thanks Marc

[Marc]

Hi,

the Solution for my Problem come nearer ..

here the Things i changed ..

First i insert a <Parameter> in the Code, but it was necessary to work with "Ext.encode(#{GridPanel1....." when i used only "#{GridPanel1..." the result was only the first row of the Grid.

<ext:Button ID="Button3" runat="server" Text="Diagramm darstellen" Icon="chartbar">
             <AjaxEvents>
                  <Click OnEvent="Store1_SubmitData">
                        <ExtraParams>
                              <ext:Parameter Name="Grid1" 
                                                Value="Ext.encode(#{GridPanel1}.getRowsValues(false))" 
                                                Mode="Raw" />
                              </ExtraParams>
                  </Click>
             </AjaxEvents>
</ext:Button>

The second change was the Code-behind ... in my Case it was important to use "Coolite.Ext.Web.AjaxEventArgs"

Protected Sub Store1_SubmitData(ByVal sender As Object, ByVal e As Coolite.Ext.Web.AjaxEventArgs) Handles Button3.Click

      Session("ZeitauswahlStart") = Request.Form(DateField1.ClientID).ToString() & " " & _
                                    Request.Form(TimeField1.ClientID).ToString()
      Session("ZeitauswahlEnde") = Request.Form(DateField2.ClientID).ToString() & " " & _
                                    Request.Form(TimeField2.ClientID).ToString()

      Store1.DataBind()
      Session("GridStr") = e.ExtraParams("Grid1")

End Sub

This works fine, but for each Column-Entries i must split the result. Maybe there is a better way to transfer each Column ...

Marc

[Daniil]

Hi,

In Ext.Net 1.0 it can look like this.
https://examples1.ext.net/#/GridPane...mit_Two_Grids/

The same should (but I'm not sure) work in 0.8.x