Hi Bogdan,
There is no such functionality in CheckboxSelectionModel.
But you can implement it manually. I can suggest to override the CheckboxSelectionModel onMouseDown function adding the following piece of code:
//start of selecting range with shift functionality
if (e.shiftKey && !this.singleSelect && this.last !== false){
var last = this.last;
this.selectRange(last, index, e.ctrlKey);
this.last = last; // reset the last
return;
}
//end of selecting range with shift functionality
Here is the full example.
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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET Example</title>
<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.grid.CheckboxSelectionModel.override({
onMouseDown: function (e, t) {
/*
If you want make selections only by checking the checkbox,
add "&& t.className == 'x-grid3-row-checker'" to next if statement
If you want to make selection only with Ctrl key pressed, add
"&& e.ctrlKey" to next if statement
*/
if (e.button !== 0 || this.isLocked()) {
return;
}
if (this.checkOnly && t.className !== "x-grid3-row-checker") {
return;
}
if (this.ignoreTargets) {
var i = 0;
for (i; i < this.ignoreTargets.length; i++) {
if (e.getTarget(this.ignoreTargets[i])) {
return;
}
}
}
if (e.button === 0 &&
(this.keepSelectionOnClick === "always" || t.className === "x-grid3-row-checker") &&
t.className !== "x-grid3-row-expander" &&
!Ext.fly(t).hasClass("x-grid3-td-expander")) {
e.stopEvent();
var row = e.getTarget(".x-grid3-row"),
index;
if (!row) {
return;
}
index = row.rowIndex;
//start of selecting range with shift functionality
if (e.shiftKey && !this.singleSelect && this.last !== false){
var last = this.last;
this.selectRange(last, index, e.ctrlKey);
this.last = last; // reset the last
return;
}
//end of selecting range with shift functionality
if (this.keepSelectionOnClick === "withctrlkey") {
if (this.isSelected(index)) {
this.deselectRow(index);
} else {
this.selectRow(index, true);
}
} else {
if (this.isSelected(index)) {
if (!this.grid.enableDragDrop) {
if (this.allowDeselect === false) {
return;
}
this.deselectRow(index);
} else {
this.deselectingFlag = true;
}
} else {
if (this.grid.enableDragDrop) {
this.deselectingFlag = false;
}
this.selectRow(index, true);
}
}
}
}
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" />
</SelectionModel>
</ext:GridPanel>
</body>
</html>