Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/DataGrid/Focused_Row/ below:

Vue DataGrid - Focused Row

The focused row feature allows you to display master-detail relationships and improve navigation through records.

View Demo

To allow users to focus rows, set the focusedRowEnabled property to true.

Users can control the focused row using the following mouse and keyboard commands:

You can specify the initially focused row using the focusedRowKey or focusedRowIndex property. The grid is scrolled down to it. If you also set the focusedColumnIndex property, a specific cell in this row is focused.

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        focusedRowEnabled: true,
        focusedRowIndex: 0, // focus the first row
        // or
        // focusedRowKey: 100,
        focusedColumnIndex: 0 // focus the first cell
    });
});

<dx-data-grid ...
    [focusedRowEnabled]="true"
    [focusedRowIndex]="0" <!-- focus the first row -->
    [focusedColumnIndex]="0"> <!-- focus the first cell -->
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<template>
    <DxDataGrid ...
        :focused-row-enabled="true"
        :focused-row-index="0" <!-- focus the first row -->
        :focused-column-index="0"> <!-- focus the first cell -->
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    // ...
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ...
            focusedRowEnabled={true}
            focusedRowIndex={0} {/* focus the first row */}
            focusedColumnIndex={0}> {/* focus the first cell */}
        </DataGrid>
    );
}

Change the same properties using the option(optionName, optionValue) method to focus a row or cell programmatically. You can also use the navigateToRow(key) method to focus a row.

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.option("focusedRowKey", 100);
// or
dataGrid.navigateToRow(100);

The DataGrid raises events before and after a row or cell is focused. Use the onFocusedRowChanging/onFocusedRowChanged and onFocusedCellChanging/onFocusedCellChanged functions to handle these events. You can perform custom actions in these functions, for instance, customize keyboard navigation, as shown in the onFocusedCellChanging example.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4