[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
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)
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
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
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
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)
Code:
<%@ 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&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 & Johnson"},
new {Company = "JP Morgan & Chase & Co"},
new {Company = "McDonald\"s Corporation"},
new {Company = "Merck & 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 & 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>
