[CLOSED] select multiple rows on gridpanel by using keymap(Ctrl+Space)

  1. #1

    [CLOSED] select multiple rows on gridpanel by using keymap(Ctrl+Space)

    hi team,

    we are using coolite gridpanel( V 0.8).User should be able to select multiple rows on grid by using keyboard shortcut key CTRL+Space.selected rows should be highlighted.this feature is possible with ctrl+mouse click.but we want similar behavior with keyboard keys.

    Could you please suggest us how we can achieve this.

    thanks in advance

    YOBNet Team
  2. #2

    RE: [CLOSED] select multiple rows on gridpanel by using keymap(Ctrl+Space)

    Hi,

    Please provide more details. I am not sure how to select multiple rows with keys only (please provide steps how it should works)
    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: [CLOSED] select multiple rows on gridpanel by using keymap(Ctrl+Space)



    Hi,

    User should be able to navigate through records by using up and down arrow key. On any record, He/She will use key " Ctrl + Space" It should get selected(or font should get changed). Even if he scrolls to nect record it should remain selected. User can deselect it by using "Ctrl + Select"

    Even if user goes to another page and come back, selection should remain as it is

    Our Users extensively use keyboards.

    Regrds
    yobnet
  4. #4

    RE: [CLOSED] select multiple rows on gridpanel by using keymap(Ctrl+Space)

    Hi,

    Navigation in the Grid is possible by changing selection only because selection is indicates navigation cursor. Therefore navigate and select/deselect (custom rows, not group) at same time is not possible (navigation cursor always select only one current row)


    What about to use Shift+Up/Dow (RowSelectionModel)? It allows to select rows group using keyboard
    Vladimir Shcheglov
    Sr. Developer
  5. #5

    RE: [CLOSED] select multiple rows on gridpanel by using keymap(Ctrl+Space)

    Hi,

    Shift Up /down allows adjacent records to be selected. Can there be any facility where user can select non countinous records using (only) keyboard

    Regards
    yobnet
  6. #6

    RE: [CLOSED] select multiple rows on gridpanel by using keymap(Ctrl+Space)

    Hi,

    Try the following sample (navigate cursor inside grid, press Ctrl+Space for toggle marker)
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new List<object> 
                 { 
                     new {Company = "3m Co"},
                     new {Company = "Alcoa Inc"},
                     new {Company = "Altria Group Inc"},
                     new {Company = "American Express Company"},
                     new {Company = "American International Group, Inc."},
                     new {Company = "AT&amp;T Inc."},
                     new {Company = "Boeing Co."},
                     new {Company = "Caterpillar Inc."},
                     new {Company = "Citigroup, Inc."},
                     new {Company = "E.I. du Pont de Nemours and Company"},
                     new {Company = "Exxon Mobil Corp"},
                     new {Company = "General Electric Company"},
                     new {Company = "General Motors Corporation"},
                     new {Company = "Hewlett-Packard Co."},
                     new {Company = "Honeywell Intl Inc"},
                     new {Company = "Intel Corporation"},
                     new {Company = "International Business Machines"},
                     new {Company = "Johnson &amp; Johnson"},
                     new {Company = "JP Morgan &amp; Chase &amp; Co"},
                     new {Company = "McDonald\"s Corporation"},
                     new {Company = "Merck &amp; Co., Inc."},
                     new {Company = "Microsoft Corporation"},
                     new {Company = "Pfizer Inc"},
                     new {Company = "The Coca-Cola Company"},
                     new {Company = "The Home Depot, Inc."},
                     new {Company = "The Procter &amp; Gamble Company"},
                     new {Company = "United Technologies Corporation"},
                     new {Company = "Verizon Communications"},
                     new {Company = "Wal-Mart Stores, Inc."}
                 };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Row Selection Model</title>
        
        <style type="text/css">
            .marked-row {
                background: #FFFDD8;
            }
            
            .green-text{
                color: Green;
            }
        </style>
        
        <script type="text/javascript">
            function toggleMarker(grid){
                var record = grid.getSelectionModel().getSelected();
                if(record){
                    record.set('Marker', !record.get('Marker'));
                }
            }
            
            function showMarked(grid){
                var message = [];
                grid.store.query('Marker', true).each(function(record){
                    message.push(record.data.Company + '<br/>');
                });
                
                Ext.Msg.alert('Marked companies', message.join(''));
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="Company" />
                            <ext:RecordField Name="Marker" Type="Boolean" DefaultValue="false" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
                Title="Company List" AutoExpandColumn="Company" Collapsible="true" Width="600"
                Height="350">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="Company" />
                        <ext:Column DataIndex="Marker">
                            <Renderer Handler="metadata.css = 'green-text'; return value ? 'Marked' : '';" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" />
                </SelectionModel>
                <View>
                    <ext:GridView runat="server" MarkDirty="false">
                        <GetRowClass Handler="if(record.data.Marker){return 'marked-row';}" />                       
                    </ext:GridView>
                </View>
    
                <KeyMap>
                    <ext:KeyBinding Ctrl="true" StopEvent="true">
                        <Keys>
                            <ext:Key Code="SPACE" />
                        </Keys>
                        
                        <Listeners>
                            <Event Handler="toggleMarker(#{GridPanel1});" />
                        </Listeners>
                    </ext:KeyBinding>
                </KeyMap>
            </ext:GridPanel>
            
            <ext:Button runat="server" Text="Show selected records">
                <Listeners>
                    <Click Handler="showMarked(#{GridPanel1});" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. Multiple Row Selection Grid Panel with out ctrl key
    By AnandVishnu in forum 1.x Help
    Replies: 2
    Last Post: Oct 03, 2011, 10:08 AM
  2. Replies: 1
    Last Post: Feb 24, 2011, 12:29 AM
  3. Replies: 1
    Last Post: Sep 07, 2010, 6:39 PM
  4. [CLOSED] Help with checkbox in gridpanel header to select all rows
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 24, 2010, 7:41 PM
  5. [CLOSED] Select rows All in GridPanel
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 09, 2010, 1:58 PM

Posting Permissions