[CLOSED] Grid Panel, CheckBoxSelectionModel, Initial Load Scrolling

  1. #1

    [CLOSED] Grid Panel, CheckBoxSelectionModel, Initial Load Scrolling

    Hello-

    I have a Grid Panel and I am using the CheckBoxSelectionModel.

    I load the data in the Grid and then pre-select some data that had already been selected.

    Works fine.

    The only problem I have is that the Grid scrolls to the last "pre-selected" item on the Grid.

    Anyway to prevent this? Meaning, have the grid scroll position be at the top, like I haven't selected anything.

    Also is it possible to sort on the check column so there is an easy way to show everything that is checked.

    Thanks and Happy New Year!

    -Rob
    Last edited by Daniil; Jan 06, 2015 at 3:16 PM. Reason: [CLOSED]
  2. #2
    Set SelectionModel''s select supressEvent parameter to true (Line 6 - third parameter)
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <script type="text/javascript">
            var select = function () {
                App._grd.getSelectionModel().select(20, true, true);
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" ScriptMode="Debug" />
        <ext:Button Text="Select" runat="server">
            <Listeners>
                <Click Handler="select()" />
            </Listeners>
        </ext:Button>
        <ext:GridPanel ID="_grd" AutoScroll="false" Title="Ext.Net" Width="500" Height="500" runat="server">
            <Store>
                <ext:Store AutoLoad="true" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="/Example/LoadFakeRecords/" StartParam="start" LimitParam="limit" PageParam="page">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" />
                                <ext:ModelField Name="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <SelectionModel>
                <ext:CheckboxSelectionModel  runat="server" />
            </SelectionModel>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" DataIndex="Name" runat="server" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar DisplayInfo="true" runat="server" />
            </BottomBar>
        </ext:GridPanel>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public StoreResult LoadFakeRecords(int start, int limit, int page)
            {
                List<Person> lst = new List<Person>();
    
                for (int index = start; index < (page * limit); index++)
                {
                    lst.Add(new Person
                    {
                        ID = index,
                        Name = "Name" + index
                    });
                }
    
                return new StoreResult(lst, (page * limit) + limit);
            }
        }
    
        [Serializable]
        public class Person
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
        }
    }
    Last edited by RaphaelSaldanha; Jan 02, 2015 at 9:45 PM.
  3. #3
    It's also possible to overcome the issue by setting SelectionModel's preventFocus, as shown below:

    var select = function () {
        var selectionModel = App._grd.getSelectionModel();
    
        var preventFocus = selectionModel.preventFocus;
    
        selectionModel.preventFocus = true;
    
        selectionModel.select(20);
    
        selectionModel.preventFocus = preventFocus;
    }
  4. #4
    The grid is being loaded on demand from a user control.

    I am loading and then selecting the records in Code Behind.

    Like so: (Mostly working)
     Public Sub load_data_selected(lDataSelected As List(Of String))
            Dim sm As Ext.Net.RowSelectionModel = gp_code.GetSelectionModel
    
            If Not lDataSelected Is Nothing Then
                'Select Codes that are already selected
                For Each code In lDataSelected
                    sm.SelectedRows.Add(New SelectedRow(code))
                Next
                sm.UpdateSelection()
            End If
        End Sub
    Any way to do this in code behind or by setting something in the markup?

    Thanks for your help.
  5. #5
    It would be easier to help if you post a complete (but simplified) code sample demonstrating how to reproduce the issue.
  6. #6
    .aspx page

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test_grid.aspx.vb" Inherits="blueOcean.test_grid" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" DisableViewState="true" />
    
    
    <ext:GridPanel runat="server" ID="gp_code"  Title="Test Grid" Frame="true" UI="Primary" Width="500" Height="400" >
    <TopBar>
    <ext:Toolbar runat="server">
    <Items>
        <ext:Button runat="server" Text="Load Data" UI="Primary" OnDirectClick="load_data" />
    <ext:Button runat="server" Text="Show Selected Data" UI="Primary" OnDirectClick="show_selected_data" />
    </Items>
    </ext:Toolbar>
    </TopBar>
    	 <Store>
    		<ext:Store ID="str_code" runat="server" PageSize="2000" RemoteFilter="false" RemotePaging="false" RemoteSort="false" AutoLoad="false"   >
    	<Model>
    		<ext:Model ID="mdl_code" runat="server" IDProperty="code">
    		<Fields>
    			<ext:ModelField Name="code" Type="String" />
                <ext:ModelField Name="description" Type="String" />
                <ext:ModelField Name="count" Type="Int" />            
    		</Fields>
    		</ext:Model>
    	</Model>
    	<Sorters>
    		<ext:DataSorter Property="code" Direction="ASC" />
    	</Sorters>
      </ext:Store>
     </Store>
     <ColumnModel>
    	<Columns>
    		<ext:Column runat="server" DataIndex="code" Text="Code"   />
            <ext:NumberColumn runat="server" DataIndex="count" Text="Global Count" Format="0,000"  />
    		<ext:Column runat="server" DataIndex="description" Text="Description" Flex="1" />       
     </Columns>
     </ColumnModel>	
    	<SelectionModel>
    		<ext:CheckboxSelectionModel runat="server" Mode="Simple" ShowHeaderCheckbox="false"  />     
    	</SelectionModel>
    	<BottomBar>
    		<ext:PagingToolbar runat="server" />
    	</BottomBar>
    </ext:GridPanel>
    
    </form>
    </body>
    </html>
    code behind page

    Imports Ext.Net
    
    Public Class test_grid
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        End Sub
    
    
        Protected Sub load_data(sender As Object, e As Ext.Net.DirectEventArgs)
            Dim lData As New List(Of test_code)
    
            For i As Int32 = 0 To 50
                Dim obj As New test_code("code" + i.ToString, i, "desc" + i.ToString)
                lData.Add(obj)
            Next
            str_code.LoadData(lData)
    
            'PreSelect some data
            Dim sm As Ext.Net.RowSelectionModel = DirectCast(gp_code.GetSelectionModel, RowSelectionModel)
            For i As Int32 = 0 To 50 Step 3
                sm.SelectedRows.Add(New SelectedRow("code" + i.ToString))
            Next
            sm.UpdateSelection()
        End Sub
    
        Protected Sub show_selected_data(sender As Object, e As DirectEventArgs)
            Dim sm As RowSelectionModel = DirectCast(gp_code.GetSelectionModel, RowSelectionModel)
            Dim selected_values As String = ""
            For Each row As SelectedRow In sm.SelectedRows
                selected_values += row.RecordID + ","
            Next
            Ext.Net.X.Msg.Alert("Selected Values", selected_values).Show()
        End Sub
    End Class
    
    Public Class test_code
        Protected cpcode As String
        Protected cpcount As Int32
        Protected cpdescription As String
        Public Property code() As String
            Get
                Return cpcode
            End Get
            Set(ByVal value As String)
                cpcode = value
            End Set
        End Property
    
        Public Property count() As Int32
            Get
                Return cpcount
            End Get
            Set(ByVal value As Int32)
                cpcount = value
            End Set
        End Property
    
        Public Property description() As String
            Get
                Return cpdescription
            End Get
            Set(ByVal value As String)
                cpdescription = value
            End Set
        End Property
    
        Public Sub New(code As String, count As Int32, desc As String)
            cpcode = code
            cpcount = count
            cpdescription = desc
        End Sub
    End Class
  7. #7

    Found a bug

    If you change the load_data method to the below:
    Protected Sub load_data(sender As Object, e As Ext.Net.DirectEventArgs)
            Dim lData As New List(Of test_code)
    
            For i As Int32 = 0 To 1200
                Dim obj As New test_code("code" + i.ToString, i, "desc" + i.ToString)
                lData.Add(obj)
            Next
            str_code.LoadData(lData)
    
            'PreSelect some data
            Dim sm As Ext.Net.RowSelectionModel = DirectCast(gp_code.GetSelectionModel, RowSelectionModel)
            'For i As Int32 = 0 To 50 Step 3
            '    sm.SelectedRows.Add(New SelectedRow("code" + i.ToString))
            'Next
    
            sm.SelectedRows.Add(New SelectedRow("code1"))
            sm.SelectedRows.Add(New SelectedRow("code4"))
            sm.SelectedRows.Add(New SelectedRow("code7"))
            sm.SelectedRows.Add(New SelectedRow("code25"))
            sm.SelectedRows.Add(New SelectedRow("code27"))
            sm.SelectedRows.Add(New SelectedRow("code31"))
            sm.SelectedRows.Add(New SelectedRow("code32"))
            sm.SelectedRows.Add(New SelectedRow("code33"))
            sm.SelectedRows.Add(New SelectedRow("code34"))
            sm.SelectedRows.Add(New SelectedRow("code5"))
            sm.SelectedRows.Add(New SelectedRow("code48"))
            sm.SelectedRows.Add(New SelectedRow("code1199"))
    
            sm.UpdateSelection()
        End Sub
    The grid scrolls to code1199 but it is never selected. All the other ones are selected.

    It seems that grids with a larger amount of records have this problem.
  8. #8
    Hi everybody,

    1. The initial problem with "auto" scroll. I can reproduce it with Ext.NET v3.0, but it looks I cannot reproduce it with my local Ext.NET with ExtJS 5.1.0 incorporated. I will be committing my local Ext.NET to SVN soon (later this week or early next week) and let you know.

    2. This issue
    The grid scrolls to code1199 but it is never selected. All the other ones are selected.
    The same situation as with the item #1.

    3. This question
    Also is it possible to sort on the check column so there is an easy way to show everything that is checked.
    Please keep one issue (or tight related ones) per thread. So, please start a new forum thread.
  9. #9
    Daniil-

    Thanks for the reply. I ended up using a check column, adding a boolean field to my class and populating that field based on selected/not selected.

    Sorting (on checked/not checked) works great this way and the grid doesn't auto scroll.

    This thread can be closed.

    Thanks,
    Rob

Similar Threads

  1. Replies: 10
    Last Post: Feb 16, 2015, 7:58 PM
  2. Replies: 1
    Last Post: Nov 25, 2013, 11:43 AM
  3. [CLOSED] MetaConfig Initial Page Load
    By macinator in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 11, 2013, 5:05 AM
  4. [CLOSED] Load Mask Not displaying on Grid Panel data load
    By WHISHWORKS in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 17, 2013, 3:44 PM
  5. Replies: 1
    Last Post: Mar 22, 2013, 12:24 AM

Posting Permissions