PDA

View Full Version : [CLOSED] CheckboxSelectionModel - checkbox deselect not fired on group deselect



ATLAS
Jul 30, 2013, 11:02 AM
Continuing work on my grid, I've hit an issue with CheckboxSelectionModel checkbox selection/deselection functions. Using the following code as an example, if I use the group select, I will get 'n' alerts from the fnCheckboxSelect function. If I use the group deselect, the fnCheckboxDeselect is not called. Both functions are correctly called if I individually select/deselect a checkbox and also if I use the CheckboxSelectionModel "master" select/deselect checkbox. I've used your MVC example code to reproduce. I suspect that it may be an ExtJS issue though!

Controller action code :-



public StoreResult GetData()
{
var data = new List<object>();
for (int i = 0; i < 10; i++)
{

data.Add( new { group = "Group 1", test = "Test " + i.ToString(), selected = (i % 2 == 0) ? true : false });
}

for (int i = 0; i < 8; i++)
{

data.Add(new { group = "Group 2", test = "Test " + i.ToString(), selected = (i % 2 == 0) ? true : false });
}

var responsive = new StoreResult();
responsive.Total = data.Count;
responsive.Data = data;
return responsive;
}




View code is :-




<script>
var onLoad = function(store, records, successful) {
var grid = App.GridPanel1,
view = grid.getView(),
sm = grid.getSelectionModel(),
recordsToSelect = Ext.Array.filter(records, function (r) { return r.data.selected; });
if (view.viewReady) {
sm.select(recordsToSelect);
} else {
view.on("viewready", function () { sm.select(recordsToSelect); });
}
};


function fnCheckboxSelect(e, record) {

alert("fnCheckboxSelect");
}

function fnCheckboxDeselect(e, record) {
alert("fnCheckboxDeselect");
}


var onGroupCommand = function (column, command, group) {
if (command === 'SelectGroup') {
column.grid.getSelectionModel().select(group.child ren, true);
return;
}
else if (command === 'DeselectGroup') {
column.grid.getSelectionModel().deselect(group.chi ldren, true);
return;
}

Ext.Msg.alert(command, 'Group name: ' + group.name + '<br/>Count - ' + group.children.length);
};


</script>




@(Html.X().GridPanel()
.ID("GridPanel1")
.Height(500)
.Store(Html.X().Store()
.GroupField("group")

.Model(model => model.Add(Html.X().Model()
.Fields(f =>
{
f.Add(Html.X().ModelField().Name("group"));
f.Add(Html.X().ModelField().Name("test"));
f.Add(Html.X().ModelField().Name("selected").Type(ModelFieldType.Boolean));
})))



.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(Html.X().JsonReader().Root("data"))
)
.Listeners(events => events.Load.Fn = "onLoad")
)

.SelectionModel(
Html.X().CheckboxSelectionModel()
.CheckOnly(true)
.Listeners(l =>
{
l.Select.Fn = "fnCheckboxSelect";
l.Deselect.Fn = "fnCheckboxDeselect";
})

)

.ColumnModel(
Html.X().Column()
.Text("Test")
.DataIndex("test"),

Html.X().CheckColumn()
.Text("Selected")
.DataIndex("selected"),

Html.X().CommandColumn()
.Hidden(true)
.GroupCommands(
Html.X().CommandFill(),

Html.X().GridCommand()
.Icon(Icon.TableRowInsert)
.CommandName("SelectGroup"),

Html.X().GridCommand()
.Icon(Icon.TableRowDelete)
.CommandName("DeselectGroup")
)
.Listeners(ls =>
ls.GroupCommand.Fn = "onGroupCommand"
)
)

.Features(
Html.X().Grouping()
.ID("TestGrouping")
.GroupHeaderTplString("{name} ({rows.length} Element{[values.rows.length > 1 ? 's' : '']})")
.HideGroupedHeader(true)
.EnableGroupingMenu(false)
.StartCollapsed(true),

Html.X().RowWrap()
)

)

Daniil
Jul 30, 2013, 2:35 PM
Hi @ATLAS.

The select and deselect method don't suppress events by default. It is why the Select event does fire in your select call.

However, you pass true as the second argument of your deselect call, it suppresses the event.

Please look at:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-select (http://docs.sencha.com/extjs/4.2.1/#%21/api/Ext.selection.Model-method-select)
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-deselect (http://docs.sencha.com/extjs/4.2.1/#%21/api/Ext.selection.Model-method-deselect)

ATLAS
Jul 30, 2013, 2:44 PM
Hi @ATLAS.

The select and deselect method don't suppress events by default. It is why the Select event does fire in your select call.

However, you pass true as the second argument of your deselect call, it suppresses the event.

Please look at:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-select (http://docs.sencha.com/extjs/4.2.1/#%21/api/Ext.selection.Model-method-select)
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-deselect (http://docs.sencha.com/extjs/4.2.1/#%21/api/Ext.selection.Model-method-deselect)

Thanks Daniil. Please close thread.