GridPanel : read Rows and Submit in a global Array

  1. #1

    GridPanel : read Rows and Submit in a global Array

    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
  2. #2
    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
  3. #3
    Hi,

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

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

Similar Threads

  1. Replies: 1
    Last Post: Jul 25, 2012, 9:52 AM
  2. [CLOSED] Submit gridpanel data in form submit
    By jchau in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 14, 2010, 7:25 PM
  3. How to read the rows of a grid panel
    By virus in forum 1.x Help
    Replies: 0
    Last Post: Nov 24, 2009, 7:59 AM
  4. Replies: 4
    Last Post: Sep 17, 2009, 7:45 AM
  5. read gridpanel rows
    By maxdiable in forum 1.x Help
    Replies: 0
    Last Post: Jul 21, 2009, 3:47 AM

Posting Permissions