Focus and Press Enter on Rows

[dds]

Hi there,

I would like to see the focus on the rows or just in the Visibility cell when I'm navigating through the grid using the keyboard and if I press enter, make a click on the toggle button to change the visibility. 

Also, I´m adding in the clientSettings 

 

[Doncho]

Hi,

The RadGrid exposes the KeyPress client-side event that can be used to execute some custom logic on enter key for example.

In the current case, as you have the Keyboard Navigation enabled you can use KeyPress event to get access to the currently active row and find the ToggleButton control inside it.

Here is an example you can try:

<script>
    function gridCreated(sender, args) {
        //the get_dataItems() method forces the creation of the GridDataItem client-side objects
        sender.get_masterTableView().get_dataItems();
    }
    function keyPress(sender, args) {
        if (args.get_keyCode() == 13) {
            //prevent the default action on enter key
            args.set_cancel(true);
            //get active row element
            var activeRow = $(sender.MasterTableView.get_element()).find('.rgActiveRow')[0];
            //get the GridDataItem represented by the active row element
            var activeDataItem = activeRow.control;
            //find the toggle button in the respective cell and trigger its click
            var toggleButton = $telerik.findControl(activeDataItem.get_cell("Visibility"), "RadToggleButton1");
            toggleButton.click();
        }
    }
</script>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
    <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="false" AllowKeyboardNavigation="true">
        <Selecting AllowRowSelect="false" EnableDragToSelectRows="false" />
        <ClientEvents OnKeyPress="keyPress" OnGridCreated="gridCreated" />
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="ID">
        <Columns>
            <telerik:GridBoundColumn DataField="ID" DataType="System.Int32"
                FilterControlAltText="Filter ID column" HeaderText="ID"
                ReadOnly="True" SortExpression="ID" UniqueName="ID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Name"
                FilterControlAltText="Filter Name column" HeaderText="Name"
                SortExpression="Name" UniqueName="Name">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="Visibility" DataField="Visibility" UniqueName="Visibility">
                <ItemTemplate>
                    <telerik:RadToggleButton ID="RadToggleButton1" runat="server" SelectedToggleStateIndex='<%# Eval("Visibility").ToString() == "Show" ? 0 : 1 %>' AutoPostBack="false">
                        <ToggleStates>
                            <telerik:ButtonToggleState Text="Show" Value="Show" />
                            <telerik:ButtonToggleState Text="Hide" Value="Hide" />
                        </ToggleStates>
                    </telerik:RadToggleButton>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Some dummy data binding for the RadGrid:

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = Enumerable.Range(1, 6).Select(x => new { ID = x, Name = "Name " + x, Visibility = (x % 3 == 0 ? "Show" : "Hide") });
}

Please give it a try and let me know if any further questions come up.

Kind regards,
Doncho
Progress Telerik

[dds]

Hey Doncho, 

Thanks for your answer and your example. That's grand.

The only thing, my main problem is that I can't access the grid just by the keyboard. Then I can't get an active row, there is not a visual effect like when the mouse is over the rows and I can't focus them.  I was thinking the option AllowKeyboardNavigation="True" could help with that, but I didn't get success. 

That's the whole implementation: 

 <telerik:RadGrid ShowMoveUpAndDown="False" TabIndex="0" runat="server" ID="grdColumnsGrid" LabelText="Manage Columns" ValidationDisabled="True" AutoSizeGridColumns="false">
                                <CommandItemSettings ShowExport="False" ShowFilters="false" ShowColumns="false" ShowGridStates="false"/>
                                <MasterTableView Width="100%" TableLayout="Fixed" DataKeyNames="Id" AutoGenerateColumns="False" PagerStyle-Visible="false">
                                    <Columns>
                                        <telerik:GridBoundColumn HeaderText="Order" DataField="Order" UniqueName="Order" />
                                        <telerik:GridBoundColumn HeaderText="Column Header" DataField="ColumnHeader" UniqueName="ColumnHeader" />
                                        <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Center" HeaderText="Visibility" DataField="Visibility" UniqueName="Visibility">
                                            <ItemTemplate>
                                                    <telerik:RadToggleButton ID="btnVisibility" AutoPostBack="false" runat="server" CssClass="pv-button-secondary" ButtonType="ToggleButton" 
                                                        ToggleType="CustomToggle" SelectedToggleStateIndex='<%# If(String.Compare(Eval("Visibility").ToString(), "Show") = 0, 0, 1) %>'>
                                                        <ToggleStates>
                                                            <telerik:ButtonToggleState Text="Show" Value="Show" CssClass="pv-button-secondary" />
                                                            <telerik:ButtonToggleState Text="Hide" Value="Hide" CssClass="pv-button-secondary" />
                                                        </ToggleStates>
                                                    </telerik:RadToggleButton>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                    </Columns>
                                </MasterTableView>
                                <ClientSettings EnableRowHoverStyle="True" EnablePostBackOnRowClick="False" AllowKeyboardNavigation="True">
                                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />
                                </ClientSettings>
                            </telerikl:RadGrid>

Thanks, 

Alvaro

 

[Doncho]

Hi Alvaro,

You can define a focus key in the RadGrid declaration, see Keyboard support:

<ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="false" AllowKeyboardNavigation="true">
    <KeyboardNavigationSettings FocusKey="B" />

With this definition, pressing Ctrl+B will set the focus on the RadGrid, and then you will be able to navigate through the Grid items with the arrow keys. With the custom JavaScript code, I have suggested in my previous message, you will be able to click the respective toggle button by pressing the enter key.

As to the ActiveRow, by default, most of Telerik skins are applying styles indicating the currently active row. Still, you can apply some custom CSS to highlight the active row in a more visible way. For instance:

html body .RadGrid .rgActiveRow td{
background-color:lightblue
}

Here is how the RadGrid behaves with the suggestions above applied - http://somup.com/cr1TXZqLSN

For your convenience, I have attached a basic sample you can test. To be able to run the project, you will need to copy the Telerik.Web.UI.dll and  Telerik.Web.UI.Skins.dll in the bin folder.

Kind regards,
Doncho
Progress Telerik