PDA

View Full Version : [CLOSED] Grid Panel, CheckBoxSelectionModel, Initial Load Scrolling



rcombis
Jan 02, 2015, 5:44 PM
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

RaphaelSaldanha
Jan 02, 2015, 9:41 PM
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; }
}
}

RaphaelSaldanha
Jan 02, 2015, 9:55 PM
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;
}

rcombis
Jan 02, 2015, 10:09 PM
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.

RaphaelSaldanha
Jan 02, 2015, 10:17 PM
It would be easier to help if you post a complete (but simplified) code sample demonstrating how to reproduce the issue.

rcombis
Jan 03, 2015, 5:49 PM
.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

rcombis
Jan 03, 2015, 7:48 PM
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.

Daniil
Jan 06, 2015, 11:08 AM
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.

rcombis
Jan 06, 2015, 12:40 PM
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