This is a migrated thread and some comments may be shown as answers.

Kendo Grid Focus on filter column and Add row kendo-combobox

1 Answer 441 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Bharat
Top achievements
Rank 1
Veteran
Bharat asked on 16 May 2020, 06:10 PM

Hi,

I have implemented Kendo grid with filter columns but my requirement is that,

1. when page loads focus should be on Jurisdiction column input box so that user can type and search without using mouse. Shown in image-1

2. When add button is clicked, default focus should be on kendo-combobox as shown in image 2 attached

Grid has default filter implementation. Please find attached files

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 19 May 2020, 02:32 PM

Hi Bharat,

Thank you for the provided screenshots.

Straight to the questions.

1. Since there is no built-in option to focus the first filter input when the Grid is initialized, the desired behavior can be achieved by using some custom JavaScript code. A possible approach is to target the input and focus the element manually in ngAfterViewInit hook. Please check the following example demonstrating the approach:

https://stackblitz.com/edit/angular-grdm7n?file=app/app.component.ts

2. The same is valid for the second question. The Combobox can be focused with custom JavaScript code in add event handler. In order to capture the element correctly, we need to wait for the element to be rendered on the page:

 

public addHandler({ sender }) {
    this.closeEditor(sender);
    this.formGroup = createFormGroup({
      ProductName: "",
      UnitPrice: 0,
      UnitsInStock: "",
      CategoryID: 1
    });
    sender.addRow(this.formGroup);

    this.zone.onStable.pipe(take(1)).subscribe(() => {
      const el = document.querySelector(
        ".k-grid-add-row td:nth-child(2) .k-dropdown-wrap"
      ) as HTMLElement;
      el.focus();
    });
  }

Please check the following StackBlitz. The example utilizes the DropDownList but the logic is the same:

https://stackblitz.com/edit/angular-l2drk8?file=app/app.component.ts

 

As a second approach that I could suggest is to get the ComboBox from the code with ViewChild decorator and use the built-in focus in add event handler:

https://stackblitz.com/edit/angular-l2drk8-esw8up?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Bharat
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Share this question
or