PDA

View Full Version : [CLOSED] Toggle CheckboxSelectionModel's Header Check Visibility



RCN
Jan 20, 2015, 7:44 PM
On version 2.x, as suggested by Baidaly (http://forums.ext.net/showthread.php?22657-Hide-the-first-CheckboxSelectionModel&p=98687&viewfull=1#post98687), it was possible to toggle header check visibility. But on version 3.1, header check click has a different behaviour.



<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var ToggleHeaderCheckBox = function () {
var grid = App._grd;

var selectionModel = grid.getSelectionModel();

var header = selectionModel.view.headerCt;

if (header.child('gridcolumn[isCheckerHd]') != null) {

var checkBox = header.child('gridcolumn[isCheckerHd]').el.child('.x-column-header-inner');

if (selectionModel.selectionMode == "MULTI") {
checkBox.show();
header.on('headerclick', selectionModel.onHeaderClick, selectionModel);
}
else {
checkBox.hide();
header.un('headerclick', selectionModel.onHeaderClick, selectionModel);
}
}
grid.getView().refresh();
};

var SetSelectionMode = function (mode) {
App._grd.getSelectionModel().setSelectionMode(mode );

ToggleHeaderCheckBox();
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" ScriptMode="Debug" />
<ext:GridPanel ID="_grd" Title="Records" Frame="false" Width="500" Height="500" runat="server">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:SegmentedButton runat="server" AllowToggle="true">
<Items>
<ext:Button Text="Set Selection Mode to SINGLE" Pressed="true" runat="server">
<Listeners>
<Click Handler="SetSelectionMode('SINGLE');" />
</Listeners>
</ext:Button>
<ext:Button Text="Set Selection Mode to MULTI" runat="server">
<Listeners>
<Click Handler="SetSelectionMode('MULTI');" />
</Listeners>
</ext:Button>
</Items>
</ext:SegmentedButton>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store AutoLoad="true" ID="_str" runat="server">
<Proxy>
<ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader RootProperty="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model IDProperty="ID" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Name" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Text="ID" DataIndex="ID" runat="server" />
<ext:Column Text="Name" DataIndex="Name" runat="server" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ShowHeaderCheckbox="true" Mode="Single" runat="server" />
</SelectionModel>
<Listeners>
<ViewReady Handler="ToggleHeaderCheckBox();" />
</Listeners>
</ext:GridPanel>
</body>
</html>




namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}

public StoreResult LoadFakeRecords()
{
List<Entity> lst = new List<Entity>();

for (int index = 0; index < 15; index++)
{
lst.Add(new Entity
{
ID = index,
Name = string.Format("Name - {0}", index)
});
}

return new StoreResult(lst, lst.Count());
}
}

[Serializable]
public class Entity
{
public int ID { get; set; }

public string Name { get; set; }
}
}

Daniil
Jan 21, 2015, 10:11 AM
Hi Raphael,

Could you, please, clarify you just share a solution for v3 or you are looking for some help to get it working in v3?

RCN
Jan 21, 2015, 12:12 PM
I am looking for some help to get it working in v3.

Daniil
Jan 21, 2015, 2:26 PM
Here you are.

Example

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

<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" }
};
}
}
</script>

<!DOCTYPE html>

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

<script>
Ext.override(Ext.selection.CheckboxModel, {
onHeaderClick: function () {
if (!this.preventHeaderClick) {
this.callParent(arguments);;
}
},

toggleHeaderCheckbox: function (visible) {
var checker = this.view.headerCt.child('gridcolumn[isCheckerHd]'),
checkbox,
visible;

if (checker) {
checkbox = checker.getEl().child('.x-column-header-inner');
visible = visible === undefined ? !checkbox.isVisible() : visible;

checkbox[visible ? "show" : "hide"]();
this.preventHeaderClick = !visible;
}
}
});
</script>
</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 runat="server" />
</SelectionModel>
</ext:GridPanel>

<ext:Button
runat="server"
Text="Toggle"
Handler="App.GridPanel1.getSelectionModel().toggleHeaderChe ckbox();" />
</form>
</body>
</html>

RCN
Jan 21, 2015, 3:16 PM
Thank you Daniil. Please mark this thread as closed.