PDA

View Full Version : [CLOSED] Sort checked records in GridPanel with CheckboxSelectionModel (CheckColumn)



Leonid_Veriga
Sep 05, 2012, 1:22 PM
Hello,

Is there any way to sort checked records in GridPanel with CheckboxSelectionModel (or at least with CheckColumn).
Also it would be great to keep the CheckAll option in the header.

I found the next solutions (but they both are not perfect):

1) With CheckboxSelectionModel we can handle HeaderClick event and manually set sort icon:

#{GridName}.getView().updateSortIcon(0, 'ASC');
But checkbox click also will be a header click here.

2) Do not use CheckboxSelectionModel, but add CheckColumn.
I've found an example with addition row in the header, where we can place CheckAll option.
But header becomes too big in this case.

Could you please suggest any solution?

Thanks in advance.

Daniil
Sep 05, 2012, 1:35 PM
Hi,

An interesting request. I am curious why I never met such requirement before.

As far as I can see there is no built-in functionality to achieve the requirement. Needs some override and codding.

What about the following?

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[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" },
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var myGetHeaderConfig = function () {
var me = this,
showCheck = me.showHeaderCheckbox !== false;

return {
isCheckerHd: showCheck,
text: "*",
width: 40,
sortable: true,
draggable: false,
resizable: false,
hideable: false,
menuDisabled: false,
dataIndex: "",
cls: showCheck ? Ext.baseCSSPrefix + "column-header-checkbox " : "",
renderer: Ext.Function.bind(me.renderer, me),
editRenderer: me.editRenderer || me.renderEmpty,
locked: me.hasLockedHeader(),
listeners: {
headertriggerclick : {
fn : function () {
alert("Here show any menu you wish");
return false; //to prevent the default menu from appearing
}
}
}
}
};
</script>
</head>
<body>
<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" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server">
<CustomConfig>
<ext:ConfigItem Name="getHeaderConfig" Value="myGetHeaderConfig" Mode="Raw" />
</CustomConfig>
</ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>
</body>
</html>

Leonid_Veriga
Sep 13, 2012, 9:09 AM
Hi Daniil,

Thank you for the solution! I was able to adjust it and make it similar to other columns' menu.
But there is the only problem I can't solve:

Ext.Net 1 had the special function to update sort Icon:

#{Grid}.getView().updateSortIcon(0, 'ASC');

For Ext.Net 2 I found the next way:

#{Grid}.headerCt.getGridColumns()[0].setSortState('DESC');

But it works with the regular columns and does not work with the CheckColumn (using CheckboxSelectionModel).
Could you please help with the way to show the sort direction for that column?

Thank you!

Daniil
Sep 13, 2012, 9:52 AM
Unfortunately, the setSortState method won't work as you need for the CheckboxSelectionModel column.

I can suggest to try applying respective CSS classes for DESC and ASC with respective background images.