What's New?

[CLOSED] GridPanel custom SelectionModel for GridPanel like web email clients

  1. #1
    Aug 05, 2011, 7:26 AM

    [CLOSED] GridPanel custom SelectionModel for GridPanel like web email clients

    I need a selectionmodel for gridpanel like hotmail or yahoo. My requirements are as follows;
    • When I click the gridpanel row then the checkbox of checkboxselectionmodel should not be checked.
    • Checkbox should be checked only click over theirself and row selection event should not be fired.
    • Row selection event should be fired only when the row selected. If checkbox checked then row selection event should not be fired.
    • Only one row can be select and one row selection event should be fired during the selection.
    • One more checkbox can be selected and these selection should not be cause to fire row selection event.

    Current ext.net's checkboxselectionmodel or rowselectionmodel is not meet my requirements. Becase those selection models are not working like web email client's selectionmodels.

    I have found a sample on extjs forum but I couldn't implement it to ext.net gridpanel's selection model.
    http://www.sencha.com/forum/showthre...SelectionModel

    Is it possible to develop that kind of selectionmodel in ext.net or how can I implement that kind of selection model ?

    Thank you.
    Last edited by Daniil; Aug 15, 2011 at 3:58 PM. Reason: [CLOSED]
  2. #2
    Aug 05, 2011, 10:18 AM
    Hi,

    You can use that SmartCheckboxSelectionModel this way:
    <ext:GridPanel ...>
    <CustomConfig>
        <ext:ConfigItem 
            Name="selModel" 
            Value="new Ext.grid.SmartCheckboxSelectionModel({
                        dataIndex : 'checked',
                        email : true // separates checkbox clicking from row selecting
                    })" 
            Mode="Raw" />
    </CustomConfig>
    Don't forget to attach the JavaScript extension script.
  3. #3
    Aug 05, 2011, 4:49 PM
    Hello

    I was wondering Daniil if you could provide an example of a Gridpanel using the SmartCheckboxSelectionModel?

    I tried to use the code you provided with my Gridpanel but I failed miserably.
  4. #4
    Aug 05, 2011, 4:56 PM
    Well, it should look like this.

    But, it seems, it doesn't work. You could report it to the extension's creator.

    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[] { false, "test11", "test12", "test13" },
                new object[] { false, "test21", "test22", "test23" },
                new object[] { false, "test31", "test32", "test33" },
            };
            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" src="Resources/js/Ext.grid.SmartCheckboxSelectionModel.js"></script>

</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <CustomConfig>
                <ext:ConfigItem 
                    Name="selModel" 
                    Value="new Ext.grid.SmartCheckboxSelectionModel({
                                dataIndex : 'checked',
                                email : true // separates checkbox clicking from row selecting
                            })" 
                    Mode="Raw" />
            </CustomConfig>
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="checked" />
                                <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>
        </ext:GridPanel>
    </form>
</body>
</html>
  5. #5
    Aug 09, 2011, 9:15 AM
    You can be also interested in:
    http://forums.ext.net/showthread.php...ll=1#post63151
  6. #6
    Sep 09, 2011, 8:29 AM
    Thank you Daniil.

    I found a way to work with this plugin. You need to add a checkcolumn into the grid columns then it works. However some functionalities are still not working. Plugin needs to tune-up working with ext.net in order to work properly. You can investigate my sample code as follows;

    <%@ 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[] { false, "test11", "test12", "test13" },
                new object[] { false, "test21", "test22", "test23" },
                new object[] { false, "test31", "test32", "test33" },
                new object[] { false, "test41", "test42", "test43" },
                new object[] { false, "test51", "test52", "test53" },
                new object[] { false, "test61", "test62", "test63" },
                new object[] { false, "test71", "test72", "test73" }
            };
            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" src="../Resources/js/Ext.grid.SmartCheckboxSelectionModel.js"></script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <CustomConfig>
            <ext:ConfigItem Name="selModel" Value="new Ext.grid.SmartCheckboxSelectionModel({ 
                                singleSelect : true,
                                dataIndex : 'Selected',
                                email : true
                            })" Mode="Raw" />
        </CustomConfig>
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="Selected" />
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:CheckColumn Width="30" MenuDisabled="true" DataIndex="Selected" Locked="true"
                    Align="Center" Fixed="true" Editable="true" Sortable="false" Hideable="false"
                    Resizable="false" Wrap="false" Header="<div id='ext-gen12' class='x-grid3-hd-checker'> </div>" />
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
        <BottomBar>
            <ext:PagingToolbar runat="server" PageSize="2" DisplayInfo="false" HideRefresh="true" />
        </BottomBar>
        <View>
            <ext:GridView runat="server" MarkDirty="false" />
        </View>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Submit">
        <Listeners>
            <Click Handler="alert(Ext.encode(#{GridPanel1}.getRowsValues({ filterRecord : function (r) { return r.data.Selected; }})));" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>
  7. #7
    Sep 09, 2011, 9:19 AM
    Can you provide more details about whats wrong?
    Also, I read that plugin was tested with ExtJS 3.1.2 but Ext.Net uses ExtJS 3.4
    May be it is better to ask plugin author about is the plugin compatible with ExtJS 3.4

Similar Threads

  1. [CLOSED] PartialExtView and GridPanel SelectionModel
    By Timothy in forum 2.x Legacy Premium Help
    Replies: 15
    Last Post: Aug 30, 2012, 5:20 AM
  2. [CLOSED] GridPanel SelectionModel with Loader
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 17, 2012, 6:45 AM
  3. [CLOSED] GridPanel: selectionModel
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 22, 2010, 2:23 PM
  4. [CLOSED] GridPanel and SelectionModel
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Sep 06, 2009, 2:55 PM
  5. [CLOSED] GridPanel SelectionModel
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 25, 2008, 6:26 PM

Tags for this Thread

Posting Permissions