PDA

View Full Version : [CLOSED] Suspend events when selecting gridpanel items using checkboxselectionmodel



mohan.bizbites
Dec 05, 2013, 11:00 AM
Hi all,
We have selection change event in checkboxselectionmodel, In another button event we are selecting gridpanel items using checkboxselectionmodel, At this time selection change event is fired. We used suspendEvents and ResumeEvents but they are not worked.
My question is, how to suspend the events of checkboxselectionmodel while selected items ?

Here is a sample to reproduce the issue



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SelectionModel.aspx.cs" Inherits="EXT2._2.SelectionModel" %>


<%@ Register Namespace="Ext.Net" Assembly="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>SelectionModel</title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridPanel1.Store.Primary.DataSource = new object[]
{
new object[] { 11, "test_11"},
new object[] { 12,"test_12"},
new object[] { 13,"test_13"},
new object[] { 14,"test_14"},
new object[] { 15,"test_15"},
new object[] { 16,"test_16"},
new object[] { 17,"test_17"},
new object[] { 18,"test_18"},
new object[] { 19,"test_19"},
new object[] { 20,"test_20"}
};


this.GridPanel1.Store.Primary.DataBind();
}
}
protected void chkModelTest_SelectionChangeEvent(object sender, DirectEventArgs e)
{
//do
}
protected void btnSelct_OnEvent(object sender, DirectEventArgs e)
{
object[] ids = new object[2];
ids[0] = 11;
ids[1] = 15;
CheckboxSelectionModel chkSelModle = this.GridPanel1.GetSelectionModel() as CheckboxSelectionModel;
//ToDo:: suspend events
chkSelModle.Select(ids);
// Resume events


}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Column Variations"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="clId" DataIndex="Id" runat="server" Text="Id" Flex="1"></ext:Column>
<ext:Column ID="clName" DataIndex="Name" runat="server" Text="Name" Flex="1"></ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="chkModelTest" runat="server" CheckOnly="true" ShowHeaderCheckbox="false">
<DirectEvents>
<SelectionChange OnEvent="chkModelTest_SelectionChangeEvent"></SelectionChange>
</DirectEvents>
</ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>
<ext:Button ID="btnSelct" runat="server" Text="Select 11 & 15">
<DirectEvents>
<Click OnEvent="btnSelct_OnEvent"></Click>
</DirectEvents>
</ext:Button>
</form>
</body>
</html>

Daniil
Dec 05, 2013, 2:11 PM
Hi @mohan.bizbites,

Pass "true" as the third parameter to suppress the events.

chkSelModle.Select(ids, true, true);

mohan.bizbites
Dec 06, 2013, 6:10 AM
Pass "true" as the third parameter to suppress the events.

chkSelModle.Select(ids, true, true);


Thank you Daniil,
It worked to suspend the selection change event.
But my requirement is, on each click event we need select different items of grid, and I want to clear the previous selection.To do this I used ClearSelection and UpdateSelection methods but SelectionChange event is fired.
And another problem is
If I use chkSelModle.Select(ids) then it is returning the selectedrows in save button click. But your solution does not return selectedrows in save click.

To try this please add the following code to above example



protected void btnSelectNew_OnEvent(object sender, DirectEventArgs e)
{
object[] ids = new object[2];
ids[0] = 18;
ids[1] = 19;
CheckboxSelectionModel chkSelModle = this.GridPanel1.GetSelectionModel() as CheckboxSelectionModel;
chkSelModle.Select(ids, true, true);
}
protected void btnSave_OnEvent(object sender, DirectEventArgs e)
{
CheckboxSelectionModel chkSelModle = this.GridPanel1.GetSelectionModel() as CheckboxSelectionModel;
foreach (SelectedRow eachSelected in chkSelModle.SelectedRows)
{
//Do ----
}
}

<ext:Button ID="btnSelectNew" runat="server" Text="Select 18 & 19">
<DirectEvents>
<Click OnEvent="btnSelectNew_OnEvent"></Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnSave" runat="server" Text="Save">
<DirectEvents>
<Click OnEvent="btnSave_OnEvent"></Click>
</DirectEvents>
</ext:Button>


Thank you
Mohan

Daniil
Dec 06, 2013, 7:01 AM
Thank you Daniil,
It worked to suspend the selection change event.
But my requirement is, on each click event we need select different items of grid, and I want to clear the previous selection.To do this I used ClearSelection and UpdateSelection methods but SelectionChange event is fired.


Then you should pass "false" as the second parameter.

chkSelModle.Select(ids, false, true);

mohan.bizbites
Dec 06, 2013, 9:29 AM
pass "false" as the second parameter.

chkSelModle.Select(ids, false, true);


Thank you for response, The selection problem is solved but my second issue in the above post is not solved
I am getting selectedrows count as zero in save click.


CheckboxSelectionModel chkSelModle = this.GridPanel1.GetSelectionModel() as CheckboxSelectionModel;
foreach (SelectedRow eachSelected in chkSelModle.SelectedRows)
{
//Do ----
}


Thank you
Mohan

Daniil
Dec 06, 2013, 3:37 PM
Ah, I forgot that the SelectionChange event is used to update a set of selected rows to submit.

So, yes, suppressing events is not a solution.

I can suggest to lock the SelectionChange DirectEvent this way.
Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
}
}

protected void Get(object sender, DirectEventArgs e)
{
X.Msg.Alert("Get", this.CheckboxSelectionModel1.SelectedRows.Count).S how();
}

protected void Set(object sender, DirectEventArgs e)
{
this.CheckboxSelectionModel1.Set("selectionChangeLock", true);
this.CheckboxSelectionModel1.Select(1);
this.CheckboxSelectionModel1.Set("selectionChangeLock", false);
}

protected void CheckboxSelectionModel1_SelectionChange(object sender, DirectEventArgs e)
{
X.Msg.Alert("CheckboxSelectionModel1_SelectionChange", "Hello!").Show();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
<DirectEvents>
<SelectionChange
OnEvent="CheckboxSelectionModel1_SelectionChange"
Before="return !this.selectionChangeLock;"
Delay="0" />
</DirectEvents>
</ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>

<ext:Button runat="server" Text="Get" OnDirectClick="Get" />

<ext:Button runat="server" Text="Set" OnDirectClick="Set" />
</form>
</body>
</html>

mohan.bizbites
Dec 07, 2013, 6:40 AM
lock the SelectionChange DirectEvent

Thank you Daniil,
For sample example to post, I have written/asked you to get selected rows in save button click.
But my actual requirement is to get selectedrows in selection change event.
But with your code I am not getting selectedrows properly, means if I select first record it showing count 0 and when I deselect it then it is showing count as 1.

Thank you
Mohan

Baidaly
Dec 08, 2013, 12:00 AM
Hello!

I don't quite follow your scenario. I've tried the code below and it works fine, could you provide a your sample to clarify your requirements?


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
}
}

protected void Get(object sender, DirectEventArgs e)
{
X.Msg.Alert("Get", this.CheckboxSelectionModel1.SelectedRows.Count).S how();
}

protected void Set(object sender, DirectEventArgs e)
{
this.CheckboxSelectionModel1.Set("selectionChangeLock", true);
this.CheckboxSelectionModel1.Select(1);
this.CheckboxSelectionModel1.Set("selectionChangeLock", false);
}

protected void CheckboxSelectionModel1_SelectionChange(object sender, DirectEventArgs e)
{
X.Msg.Alert("CheckboxSelectionModel1_SelectionChange", "Selected " + e.ExtraParams["selected"]).Show();
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column ID="Column2" runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
<DirectEvents>
<SelectionChange
OnEvent="CheckboxSelectionModel1_SelectionChange"
Before="return !this.selectionChangeLock;"
Delay="0">
<ExtraParams>
<ext:Parameter Name="selected" Value="App.CheckboxSelectionModel1.getSelection().length" Mode="Raw" />
</ExtraParams>
</SelectionChange>
</DirectEvents>
</ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>

<ext:Button ID="Button1" runat="server" Text="Get" OnDirectClick="Get" />

<ext:Button ID="Button2" runat="server" Text="Set" OnDirectClick="Set" />
</form>
</body>
</html>

mohan.bizbites
Dec 09, 2013, 11:21 AM
<ExtraParams>
<ext:Parameter Name="selected" Value="App.CheckboxSelectionModel1.getSelection().length" Mode="Raw" />
</ExtraParams>



Thank you Baidaly,
In selection change event If we use extraparams to get selected rows then it is working. But in code behind it is not returning selectedrows.
Try this by following line of code in selection change event

X.Msg.Alert("Get", this.CheckboxSelectionModel1.SelectedRows.Count).S how();

You can mark it as closed.

Thank you
Mohan

Daniil
Dec 09, 2013, 12:56 PM
Delay="0" breaks it. A small delay is required to get updated the selection to submit.

OK, I can suggest you the following solution.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
}
}

protected void Get(object sender, DirectEventArgs e)
{
X.Msg.Alert("Get", this.CheckboxSelectionModel1.SelectedRows.Count).S how();
}

protected void Set(object sender, DirectEventArgs e)
{
this.CheckboxSelectionModel1.Select(1, false, true);
this.GridPanel1.Call("getSelectionSubmit().updateSelection");
}

protected void CheckboxSelectionModel1_SelectionChange(object sender, DirectEventArgs e)
{
X.Msg.Alert("CheckboxSelectionModel1_SelectionChange", this.CheckboxSelectionModel1.SelectedRows.Count).S how();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
<DirectEvents>
<SelectionChange OnEvent="CheckboxSelectionModel1_SelectionChange" />
</DirectEvents>
</ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>

<ext:Button runat="server" Text="Get" OnDirectClick="Get" />

<ext:Button runat="server" Text="Set" OnDirectClick="Set" />
</form>
</body>
</html>

A key point is:

this.CheckboxSelectionModel1.Select(1, false, true);
this.GridPanel1.Call("getSelectionSubmit().updateSelection");