What's New?

[CLOSED] two grids example with VS 2103

  1. #1
    Mar 19, 2015, 1:01 PM

    [CLOSED] two grids example with VS 2103

    I have been trying to get the two grid example to work with Visual Studio 2013.

    The first grid loads with data. When I select a row to move over to the second grid and click the arrow button I keep getting a javascript error "JavaScript runtime error: Unable to get property 'hasSelection' of undefined or null reference"

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TwoGrds.aspx.cs" Inherits="TwoGrds" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title>
  <script type="text/javascript" >    
    var mySelector = {      add: function (source, destination) {
        source = source || GridPanel1;
        destination = destination || GridPanel2;
        if (source.selModel.hasSelection()) {          
         var records = source.selModel.getSelection();
          source.store.remove(records);
          destination.store.add(records);
        }
      },
      addAll: function (source, destination) {
        source = source || GridPanel1;
        destination = destination || GridPanel2;
        var records = source.store.getRange();
        source.store.removeAll();
        destination.store.add(records);
      },
      addByName: function (name) {
        if (!Ext.isEmpty(name)) {
          var result = Store1.queryBy(function (r) {
            return r.get("UserName") === name;
          });
          if (!Ext.isEmpty(result.items)) {
            GridPanel1.store.remove(result.items[0]);
            GridPanel2.store.add(result.items[0]);
          }
        }
      },
      addByNames: function (name) {
        for (var i = 0; i < name.length; i++) {
          this.addByName(name[i]);
        }
      },
      remove: function (source, destination) {
        this.add(destination, source);
      },
      removeAll: function (source, destination) {
        this.addAll(destination, source);
      }
    };
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <ext:ResourceManager runat="server" /> 
       <asp:Panel ID="pnlTop" runat="server">
          <div class="main" style="min-height: 350px">
            <table border="0">
              <tr>
                <td>
                  <ext:Store ID="Store1" runat="server">
                    <Model>
                      <ext:Model runat="server">
                        <Fields>
                          <ext:ModelField Name="UserName" />
                          <ext:ModelField Name="FirstName" />
                          <ext:ModelField Name="LastName" />
                          <ext:ModelField Name="JobCode" />
                          <ext:ModelField Name="JobTitle" />
                          <ext:ModelField Name="myGUID" />
                          <ext:ModelField Name="CampusID" />
                          <ext:ModelField Name="AddedBy" />
                          <ext:ModelField Name="IPAddress" /> 
                       </Fields>
                     </ext:Model>
                   </Model>
                   </ext:Store>
                  <ext:Store ID="Store2" runat="server">
              <Model>
                <ext:Model runat="server">
                  <Fields>
                    <ext:ModelField Name="UserName" />
                    <ext:ModelField Name="FirstName" />
                    <ext:ModelField Name="LastName" />
                    <ext:ModelField Name="JobCode" />
                    <ext:ModelField Name="JobTitle" />
                    <ext:ModelField Name="myGUID" />
                    <ext:ModelField Name="CampusID" />
                    <ext:ModelField Name="AddedBy" />
                    <ext:ModelField Name="IPAddress" />
                  </Fields>
                </ext:Model>
              </Model>
            </ext:Store>
            <ext:Panel ID="PanelTop" runat="server" Width="775" Height="440" Border="false" Layout="HBoxLayout">
              <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
              </LayoutConfig>
              <Items>
                <ext:GridPanel runat="server" ID="GridPanel1" Draggable="false" Flex="1" StoreID="Store1">
                  <ColumnModel runat="server">
                    <Columns>
                      <ext:Column runat="server" DataIndex="UserName" Hidden="true" />
                      <ext:Column runat="server" DataIndex="LastName"  Text="Last Name"  />
                      <ext:Column runat="server" DataIndex="FirstName"  Text="First Name"  />
                     <ext:Column runat="server" DataIndex="JobCode" Hidden="true" />
                      <ext:Column runat="server" DataIndex="JobTitle" Text="Job Title" />
                      <ext:Column runat="server" DataIndex="myGUID" Hidden="true" />
                      <ext:Column runat="server" DataIndex="CampusID" Hidden="true" />
                      <ext:Column runat="server" DataIndex="AddedBy" Hidden="true" />
                      <ext:Column runat="server" DataIndex="IPAddress" Hidden="true" />
                    </Columns>
                  </ColumnModel>
                  <SelectionModel>
                    <ext:CheckboxSelectionModel runat="server" ID="CheckboxSelectionModel1" Mode="Multi"></ext:CheckboxSelectionModel>
                  </SelectionModel>
                </ext:GridPanel>
                <ext:Panel ID="Panel1" runat="server" Width="30" BodyStyle="background-color: transparent;" Border="false" Layout="Anchor">
                  <Items>
                    <ext:Panel ID="Panel2" runat="server" Border="false" BodyStyle="background-color: transparent;" AnchorVertical="40%" />
                    <ext:Panel ID="Panel3" runat="server" Border="false" BodyStyle="background-color: transparent;" Padding="5">
                      <Items>
                        <ext:Button ID="Button2" runat="server" Icon="ResultsetNext" StyleSpec="margin-bottom:2px;">
                          <Listeners>
                            <Click Handler="mySelector.add();" />
                          </Listeners>
                          <ToolTips>
                            <ext:ToolTip ID="ToolTip1" runat="server" Title="Add" Html="Add selected rows" />
                          </ToolTips>
                        </ext:Button>
                        <ext:Button ID="Button3" runat="server" Icon="ResultsetLast" StyleSpec="margin-bottom:2px;">
                          <Listeners>
                            <Click Handler="mySelector.addAll();" />
                          </Listeners>
                          <ToolTips>
                            <ext:ToolTip ID="ToolTip2" runat="server" Title="Add all" Html="Add all rows" />
                          </ToolTips>
                        </ext:Button>
                        <ext:Button ID="Button4" runat="server" Icon="ResultsetPrevious" StyleSpec="margin-bottom:2px;">
                          <Listeners>
                            <Click Handler="mySelector.remove(GridPanel1, GridPanel2);" />
                          </Listeners>
                          <ToolTips>
                            <ext:ToolTip ID="ToolTip3" runat="server" Title="Remove" Html="Remove selected rows" />
                          </ToolTips>
                        </ext:Button>
                        <ext:Button ID="Button5" runat="server" Icon="ResultsetFirst" StyleSpec="margin-bottom:2px;">
                          <Listeners>
                            <Click Handler="mySelector.removeAll(GridPanel1, GridPanel2);" />
                          </Listeners>
                          <ToolTips>
                            <ext:ToolTip ID="ToolTip4" runat="server" Title="Remove all" Html="Remove all rows" />
                          </ToolTips>
                        </ext:Button>
                      </Items>
                    </ext:Panel>
                  </Items>
                </ext:Panel>
                <ext:GridPanel runat="server" ID="GridPanel2" EnableDragDrop="false" StoreID="Store2" Flex="1">
                    <ColumnModel runat="server">
                     <Columns>
                        <ext:Column runat="server" DataIndex="UserName" Hidden="true" />
                        <ext:Column runat="server" DataIndex="LastName" Text="Last Name"  />
                        <ext:Column runat="server" DataIndex="FirstName"  Text="First Name"  />
                       <ext:Column runat="server" DataIndex="JobCode" Hidden="true" />
                        <ext:Column runat="server" DataIndex="JobTitle"  Text="Job Title" />
                        <ext:Column runat="server" DataIndex="myGUID" Hidden="true" />
                        <ext:Column runat="server" DataIndex="CampusID" Hidden="true" />
                        <ext:Column runat="server" DataIndex="AddedBy" Hidden="true" />
                        <ext:Column runat="server" DataIndex="IPAddress" Hidden="true" />
                     </Columns>
                    </ColumnModel>
                    <SelectionModel><ext:RowSelectionModel ID="RowSelectionModel2"  runat="server" Mode="Multi" /></SelectionModel>
                  </ext:GridPanel>
              </Items>
              <BottomBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                  <Items>
                    <ext:Button ID="btnRefreshGrids" runat="server" Text="Reset both grids" Icon="ArrowRefresh" Type="Button">
                      <DirectEvents>
                        <Click OnEvent="btnReset_Click">
                        </Click>
                      </DirectEvents>
                    </ext:Button>
                    <ext:ToolbarSpacer Width="520px">
                    </ext:ToolbarSpacer>
                    <ext:Button ID="btnNotifyStaff" runat="server" Text="Notify Selected Staff" Icon="EmailGo">
                      <Listeners>
                        <Click Handler="#{GridPanel2}.submitData();" />
                      </Listeners>
                    </ext:Button>
                  </Items>
                </ext:Toolbar>
              </BottomBar>
            </ext:Panel>
          </td>
        </tr>
      </table>
    </div>
  </asp:Panel>
  </div>
  </form>
</body>
</html>
    Last edited by Daniil; Mar 20, 2015 at 4:50 PM. Reason: [CLOSED]
  2. #2
    Mar 19, 2015, 3:10 PM
    Hi @jmilton,

    Comparing with this example you missed Namespace="" which is quite essential in this example since there are GridPanel1 and GridPanel2 used.

    By default, there is the App namespace and App.GridPanel1 should be used.

    Please note that if you use #{}, e.g. #{GridPanel1}, then the namespace might be omitted. Personally, I avoid using #{} to avoid extra server processing internally.
  3. #3
    Mar 20, 2015, 2:52 PM

    Sorry, I didn't include the cs

    Sorry, I didn't include the cs...

    using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Xml;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;


public partial class TwoGrds : System.Web.UI.Page
{
   
  protected void Page_Load(object sender, EventArgs e)
  {
     //Bind the data from the database to Store1
  }
}
    I put the Namespace = "" into the Resource Manager and now my example works.

    I have another sample (in an app that I'm upgrading) from a previous version of ext.net using ext:XScript for the javascript. The control is embedded in an asp.net multiview on a page with a MasterPage. The script cannot go into the MasterPage (in side the head tag). How do I add the script to my page?
    Last edited by jmilton; Mar 20, 2015 at 3:12 PM.
  4. #4
    Mar 20, 2015, 4:50 PM
    I have another sample (in an app that I'm upgrading) from a previous version of ext.net using ext:XScript for the javascript. The control is embedded in an asp.net multiview on a page with a MasterPage. The script cannot go into the MasterPage (in side the head tag). How do I add the script to my page?
    Please start a new forum thread.

Similar Threads

  1. Error on Two Grids example
    By ivanp in forum 2.x Help
    Replies: 1
    Last Post: Nov 15, 2012, 9:11 AM
  2. two grids rows
    By cbu in forum 1.x Help
    Replies: 8
    Last Post: Dec 15, 2011, 4:44 PM
  3. Query about Two grids example
    By Nagaraj K Hebbar in forum 1.x Help
    Replies: 1
    Last Post: Oct 13, 2009, 3:35 AM
  4. Two Grids get value
    By JsonTerre in forum 1.x Help
    Replies: 0
    Last Post: Mar 09, 2009, 11:04 PM
  5. DnD Between 2 Grids
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 13, 2009, 2:02 AM

Tags for this Thread

Posting Permissions