[CLOSED] "Itemclick" event is also firing while deselecting Check box column. How to prevent it from firing?

[alscg]

Hi,

I am loading dynamic grid as below and for brevity I have deleted some other code. whenever I am selecting record using check box column "Item Click event is not firing'...good even I want that. but when I deselect check box "ItemClick event is firing". How to prevent this? I am also using "deselectLock" property. Please help me in this regrad. Let me know if you want full view page code.

function LoadGrid(orgID, levelID, levelName, levelNumber, region) {
        var grid = Ext.create("Ext.grid.Panel", {
            store: {
                model: Ext.define("App.LevelModel" + levelID, {
                    extend: "Ext.data.Model",
                    fields: [{
                        name: "Organization_Id",
                        mapping: "Organization_Id",
                        type: "int"
                    }, {
                        name: "Organization_Desc",
                        mapping: "Organization_Desc",
                        type: "string"
                    }, {
                        name: "Parent_Organization_Id",
                        mapping: "Parent_Organization_Id",
                        type: "int"
                    }
                        , {
                            name: "Org_Level_Id",
                            mapping: "Org_Level_Id",
                            type: "string"
                        }, {
                            name: "Level_Number",
                            mapping: "Level_Number",
                            type: "int"
                        }, {
                            name: "Org_Level_Desc",
                            mapping: "Org_Level_Desc",
                            type: "string"
                        }, {
                            name: "Operating_Group_Id",
                            mapping: "Operating_Group_Id",
                            type: "int"
                        }, {
                            name: "Next_LevelID",
                            mapping: "Next_LevelID",
                            type: "int"
                        }, {
                            name: "Next_LevelName",
                            mapping: "Next_LevelName",
                            type: "string"
                        }
                    ],
                    idProperty: "Organization_Id"
                }),
                storeId: "LevelStore" + levelID,
                autoLoad: false,
                readParameters: function (operation) {
                    return {
                        apply: {
                            "regionCSV": region,
                            "level": levelNumber,
                            "orgCSV": orgID
                        }
                    };
                },
                proxy: {
                    type: "ajax",
                    reader: {
                        type: "json",
                        root: "data"
                    },
                    url: '@(Url.Action("GetOrgsWithLevelInfo", "Talent"))'
                }
            },

            id: "grdLevel_" + region + "_" + levelID,
            border: false,
            cls: "grd-existing-goals",
            height: 280,
            renderTo: "div_" + region + "_" + levelID + '_' + levelNumber,
            columns: {
                items: [{
                    dataIndex: "Organization_Desc",
                    text: levelName
                }
                ]
            },
            emptyText: "No records found.",
            listeners: {
                itemclick: function (dataview, record, item, index, e) {
                    OrganizationClick(dataview, record, item, index, e);
                }
            },
            selModel: window.App.chkLevelSelect = Ext.create("Ext.selection.CheckboxModel", {
                proxyId: "chkOrgsSelect" + levelID,
                selType: "checkboxmodel",
                listeners: {
                    deselect: {
                        fn: function (item, record, index) {
                            if (!this.deselectLock) {
                                OrgDeselect(this, record, index);
                            }
                        }
                    },
                    select: {
                        fn: function (item, record, index) {
                            if (!this.selectLock) {
                                OrgSelect(this, record, index);
                            }
                        }
                    }
                },
                checkOnly: true
            }),
            selectionMemory: false
        });

        grid.getStore().on("load", function (store, records, successful) {
            SelectGoalOrg(this, store, records, successful);
        }, grid);

        grid.getStore().load();
    }

[Daniil]

Hi @alscg,

ItemClick fires for me on each click.

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" }
            };
        }
    }
</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" />
                                <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>
            <Listeners>
                <ItemClick Handler="console.log('ItemClick');" />
            </Listeners>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" />
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>

[alscg]

Hi @alscg,

ItemClick fires for me on each click.

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" }
            };
        }
    }
</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" />
                                <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>
            <Listeners>
                <ItemClick Handler="console.log('ItemClick');" />
            </Listeners>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" />
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>

Is there way to avoid Item Click event from firing when I deselect a CheckBox column?

[Daniil]

I can suggest the following solution.

<ItemClick Handler="if (!e.getTarget('.x-grid-cell-row-checker')) {
                        console.log('ItemClick');
                    }" />

[alscg]

I can suggest the following solution.

<ItemClick Handler="if (!e.getTarget('.x-grid-cell-row-checker')) {
                        console.log('ItemClick');
                    }" />

Thank you very much. I am able to prevent Item click event from firing using above code.
This thread can be closed.