[CLOSED] Group Command Icons disappear on row update.

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Group Command Icons disappear on row update.

    Hello,

    I'm using an Ext.Net 2.5 GridPanel with GroupCommands similar to your example https://examples2.ext.net/#/GridPane...Group_Command/

    The problem I'm having is that when I update a row client side the GroupCommands for that particular group disappear. I've included a simplified code snippet so you can verify. I appreciate any help you can offer.

    Thank you.


    <%@ 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)
            {
                GridPanel1.Store.Primary.DataSource = new object[]
                {
                    new object[] { 1, 2011, "Ford", "Mustang", "Red", false },
                    new object[] { 2, 1974, "Dodge", "Dart", "Red", false },
                    new object[] { 3, 1981, "GMC", "Jimmy", "White", false },
                    new object[] { 4, 1985, "Oldsmobile", "Cutlass", "Cream", false },
                    new object[] { 5, 1991, "Dodge", "1500", "White", false },
                    new object[] { 6, 1994, "Dodge", "1500", "Emerald", false },
                    new object[] { 7, 1995, "Dodge", "Dakota", "Pearl Blue", false },
                    new object[] { 8, 1979, "Ford", "Thunderbird", "Blue", false },
                    new object[] { 9, 2004, "Dodge", "Spirit", "Emerald", false },
                    new object[] { 10, 2001, "GMC", "Sierra 1500", "Pewter", false },
                    new object[] { 11, 1991, "Jeep", "Wrangler", "Red", false },
                    new object[] { 12, 1998, "Jeep", "Cherokee", "Silver", false }                
                };
                GridPanel1.Store.Primary.DataBind();
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Group Commands Sample</title>
        
        <style>
            .itemAvailable        { background-image: url(/icons/award_star_silver_3-png/ext.axd); width: 16px; height: 16px; margin-left:auto; margin-right:auto; cursor:pointer; }
            .itemNotAvailable    { background-image: url(/icons/control_blank-png/ext.axd); width:16px; height:16px; margin-left:auto; margin-right:auto; cursor:pointer; }
        </style>
    
    
        <script>        
            var onGroupCommand = function (column, command, group) {
                switch (command)
                {
                    case 'SelectGroup':
                        column.grid.getSelectionModel().select(group.children, true);
                        break;
                    case 'DeselectGroup':
                        column.grid.getSelectionModel().deselect(group.children, true);
                        break;
                }                                     
            };        
    
    
            var renderAvailable = function (value, metaData, record, rowIndex, colIndex, store, view) {
                var tpl = "<div class='{0}' title='{1}' onclick='{2}'>&nbsp;</div>";
                
                var cls = (value == true) ? "itemAvailable" : "itemNotAvailable";
                var ttl = (value == true) ? "IS Available (click to toggle)" : "NOT Available (click to toggle)";
                var fnc = "setAvailable(" + record.get('VehicleId') + ", " + ((value == true) ? false : true) + ");";
    
    
                var val = Ext.String.format(tpl, cls, ttl, fnc);
                return val;
            };
    
    
            var setAvailable = function (vehicleId, isAvailable) {
                var store = App.GridPanel1.getStore();
                var idx = store.findExact('VehicleId', vehicleId);
                if (idx >= 0) {                
                    var rec = store.getAt(idx);
                    rec.set('Available', isAvailable);
                    rec.commit();                                
                }
            };        
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server" 
                Collapsible="true" 
                Width="600" 
                Height="350" 
                RowLines="false" 
                Title="Vehicles" 
                Frame="true"
                ForceFit="true">
                <Store>
                    <ext:Store runat="server" GroupField="Make">                    
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="VehicleId" Type="Int" />
                                    <ext:ModelField Name="Year" Type="Int" />
                                    <ext:ModelField Name="Make" />
                                    <ext:ModelField Name="Model" />
                                    <ext:ModelField Name="Color" />
                                    <ext:ModelField Name="Available" Type="Boolean" />                                
                                </Fields>
                            </ext:Model>
                        </Model>                    
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column 
                            runat="server" 
                            Text="Year" 
                            DataIndex="Year" 
                            Width="80" 
                            />
                        <ext:Column 
                            runat="server" 
                            Text="Make" 
                            DataIndex="Make" 
                            Width="100" 
                            />
                        <ext:Column 
                            runat="server" 
                            Text="Model" 
                            DataIndex="Model" 
                            Width="100"                                                 
                            />                    
                        <ext:Column 
                            runat="server" 
                            Text="Color" 
                            DataIndex="Color" 
                            Width="100" 
                            />
                        <ext:Column
                            runat="server"
                            Text="Available"
                            DataIndex="Available"
                            Width="60"
                            Align="Center">
                            <Renderer Fn="renderAvailable" />
                        </ext:Column>    
                        <ext:CommandColumn runat="server" Hidden="true">
                            <GroupCommands>
                                <ext:GridCommand Icon="TableRow" CommandName="SelectGroup">
                                    <ToolTip Title="Select" Text="Select all rows of the group" />
                                </ext:GridCommand>                            
                                <ext:GridCommand Icon="TableRowDelete" CommandName="DeselectGroup">
                                    <ToolTip Title="Deselect" Text="Deselect all rows of the group" />
                                </ext:GridCommand>
                            </GroupCommands>                        
                            <Listeners>
                                <GroupCommand Fn="onGroupCommand" />
                            </Listeners>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
    
    
                <View>
                    <ext:GridView runat="server" TrackOver="false" StripeRows="false" />
                </View>
                
                <SelectionModel>
                    <ext:CheckboxSelectionModel runat="server" Mode="Multi" />                    
                </SelectionModel>
    
    
                <Features>
                    <ext:Grouping 
                        runat="server" 
                        HideGroupedHeader="true" 
                        GroupHeaderTplString='{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? "Vehicles" : "Vehicle"]})' />                                
                </Features>      
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jan 23, 2015 at 4:10 AM. Reason: [CLOSED]

Similar Threads

  1. Replies: 1
    Last Post: Oct 14, 2013, 1:15 PM
  2. Checkbox with group command.
    By hendry_agust in forum 1.x Help
    Replies: 1
    Last Post: Jun 13, 2012, 9:28 PM
  3. get group command toolbar
    By wp_joju in forum 1.x Help
    Replies: 1
    Last Post: Dec 14, 2010, 6:33 AM
  4. Icons not showing in GridPanel Command Columns
    By Groovepoets in forum 1.x Help
    Replies: 3
    Last Post: Oct 20, 2010, 3:52 PM
  5. Checkbox in Group Command
    By hendry_agust in forum 1.x Help
    Replies: 0
    Last Post: May 04, 2010, 11:06 PM

Posting Permissions