Focus and Press Enter on Rows

3 Answers 34 Views
Grid ToggleButton
dds
Top achievements
Rank 1
Iron
Iron
dds asked on 22 Jun 2021, 07:56 AM | edited on 24 Jun 2021, 10:30 AM

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 

 

3 Answers, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 24 Jun 2021, 11:55 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
dds
Top achievements
Rank 1
Iron
Iron
answered on 25 Jun 2021, 08:31 AM

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

 

0
Doncho
Telerik team
answered on 25 Jun 2021, 11:30 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid ToggleButton
Asked by
dds
Top achievements
Rank 1
Iron
Iron
Answers by
Doncho
Telerik team
dds
Top achievements
Rank 1
Iron
Iron
Share this question
or