Hello.  I'm using Kendo UI ASP.NET.  I have a grid with 2 dropdowns.  The first dropdown is not virtualized, the second one is (and also cascades off the first dropdown).  All of this works.

I need to be able to quickly tab through all columns and rows in the grid using only the keyboard.  If the 2nd dropdown gets focus and the current value isn't yet loaded in the virtualized dropdown, I get stopped with a client-side "This value is required" error message.  I would like to know what the best strategy is to force the 2nd dropdown to navigate to the dropdown entry (in psuedocode, .select() to the virtualized, non-loaded entry) associated with its current value even when that entry is not yet loaded because of virtualization when that 2nd dropdown receives focus.

Thanks,

Richard

Hi,

Instead of having an edit button for each individual button, I want to have 1 Edit button at the bottom of the grid that will fire only after changes have been made to all editable columns. Is there a way to do this in Angular 2? I don't want the user to have to click Edit for each row, make  changes and then move to the next row, click edit and make changes again. This is what my app.component.ts file looks like

import { Observable } from 'rxjs/Rx';
import { Component, OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { GridDataResult } from '@progress/kendo-angular-grid';
import { State, process } from '@progress/kendo-data-query';

import { Product } from './model';
import { EditService } from './edit.service';

@Component({
    selector: 'my-app',
    template: `
      <kendo-grid
          [data]="view | async"
          [height]="533"
          [pageSize]="gridState.take" [skip]="gridState.skip" [sort]="gridState.sort"
          [pageable]="true" [sortable]="true"
          [selectable]="true"
          (dataStateChange)="onStateChange($event)"
          (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
          (save)="saveHandler($event)" (remove)="removeHandler($event)"
          (add)="addHandler($event)"
        >
        <!--<ng-template kendoGridToolbarTemplate>
            <button kendoGridAddCommand>Add new</button>
        </ng-template> -->
        <kendo-grid-column field="ProductName" title="Product Name" [editable]="false"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" editor="numeric" title="Price"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" editor="boolean" title="Discontinued"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" editor="numeric" title="Units In Stock" [editable]="false"></kendo-grid-column>
        <kendo-grid-command-column title="command" width="220">
            <ng-template kendoGridCellTemplate let-isNew="isNew">
                <button kendoGridEditCommand class="k-primary">Edit</button>
                <button kendoGridRemoveCommand>Remove</button>
                <button kendoGridSaveCommand [disabled]="formGroup?.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
                <button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
            </ng-template>
        </kendo-grid-command-column>
      </kendo-grid>
  `
})
export class AppComponent implements OnInit {
    public view: Observable<GridDataResult>;
    public gridState: State = {
        sort: [],
        skip: 0,
        take: 10
    };
    public formGroup: FormGroup;

    private editService: EditService;
    private editedRowIndex: number;

    constructor( @Inject(EditService) editServiceFactory: any) {
        this.editService = editServiceFactory();
    }

    public ngOnInit(): void {
        this.view = this.editService.map(data => process(data, this.gridState));

        this.editService.read();
    }

    public onStateChange(state: State) {
        this.gridState = state;

        this.editService.read();
    }

    protected addHandler({ sender }: any) {
        this.closeEditor(sender);

        this.formGroup = new FormGroup({
            'ProductID': new FormControl(),
            'ProductName': new FormControl("", Validators.required),
            'UnitPrice': new FormControl(0),
            'UnitsInStock': new FormControl("", Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,2}')])),
            'Discontinued': new FormControl(false)
        });

        sender.addRow(this.formGroup);
    }

    protected editHandler({ sender, rowIndex, dataItem }: any) {
        //protected editHandler({ sender, rowIndex, dataItem }){
        this.closeEditor(sender);

        this.formGroup = new FormGroup({
            'ProductID': new FormControl(dataItem.ProductID),
            'ProductName': new FormControl(dataItem.ProductName, Validators.required),
            'UnitPrice': new FormControl(dataItem.UnitPrice),
            'UnitsInStock': new FormControl(dataItem.UnitsInStock, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,2}')])),
            'Discontinued': new FormControl(dataItem.Discontinued)
        });

        this.editedRowIndex = rowIndex;

        sender.editRow(rowIndex, this.formGroup);
    }

    protected cancelHandler({ sender, rowIndex }: any) {
        this.closeEditor(sender, rowIndex);
    }

    private closeEditor(grid: any, rowIndex = this.editedRowIndex) {
        grid.closeRow(rowIndex);
        this.editedRowIndex = undefined;
        this.formGroup = undefined;
    }

    protected saveHandler({ sender, rowIndex, formGroup, isNew }: any) {
        const product: Product = formGroup.value;

        this.editService.save(product, isNew);

        sender.closeRow(rowIndex);
    }

    protected removeHandler({ dataItem }: any) {
        this.editService.remove(dataItem);
    }
}

Hello,

Using the Kendo Menu demo (copied into this dojo: http://dojo.telerik.com/@richm/UgAPe), I observed the following using the latest version of NVDA:

1.  In Chrome, navigating to a submenu doesn't announce the submenu item, but 'list' instead.  E.g. in the dojo example, use the keyboard to navigate to Furniture, then right arrow.  NVDA announces, "list", though the visual focus is on the first sub-menu element ("Tables and Chairs").  Pressing down arrow properly announces the second item, "Sofas".  

The user will not know the first item in the list unless the navigate away and back to it.  It is also a bit confusing that they are now on a submenu.

2.  Same scenario, but in Firefox.  Navigate to Furniture and select right-arrow.  The sub-menu opens, but NVDA's focus remains on "Furniture", and NVDA again announces the furniture item.   Pressing right arrow again closes the entire menu.  If instead down-arrow is pressed, suddenly Sofa is selected.

Please advise if I should open bugs, and if any workarounds are available.

Thank you!

Rich

I am getting below error, I am not sure why this happening. Please help

java.lang.NoSuchMethodError: com.kendoui.taglib.GridTag.setExcel(Lcom/kendoui/taglib/grid/ExcelTag;)V

Currently I'm using Kendo UI 2015 Q1 SP1 in my project. The cascading function is working fine. 

demo with 2015-Q1-SP1

When I update with the latest version it is not working as expected. The 2nd dropdown is rendering only, the user select the first drop down.

demo with latest version

Note: I'll be having sorting operation in the controller, So I've to bind as "k-options". 

Can you assist to fix this bug.

Hello! I have seen that grid in kendo gantt widget has very few features, compared with kendo grid, so my question is:

Is there some way to get at least some features of kendo grid like:
- Pagination
- Column filters
- Column template

If not, is there any plan in the future to add these features?

Thanks for the reply

Hello,

I am using kendo scheduler in my project.  I am using time line view and we have a requirement where I have to set the start time of the scheduler as 12:00 PM on page load.  When I navigate to the next date the time line should start from 12:00AM again and not 12:00PM. Currently once I set the start time, all other days also start with the same start time.

Kindly suggest how can I achieve the same.

Thanks & Regards

Shajina

Hi,

I am using a dropDownList to show some values in order to filter results on a grid.

I have use the 'change' event to see when the grid must be updated

$('#view-mode-selector').kendoDropDownList({
    change: onModeSelectorChange
});

in the method onModeSelectorChange I am trying to show the progress bar with

kendo.ui.progress($("#grid), true);

and at the end of the method when all is done I have

kendo.ui.progress($("#grid), false);

But the data loads and I do not see the progress bar.

If I remove the last statement (the 'false' one) I can see the progress bar, but it never disappears.
If I debug, It appears and disappears when the data is ready.

It is not an issue of the data loading too fast, sometimes the data takes 5 seconds to be ready.
The data is already in the browser, I am just showing or hiding columns.

Kendo version v2016.2.714

Thanks

Hi,

Using non-MVVM the grid has the setOptions function. There is no equivalent in MVVM. I want to create options that are standard on every grid across every one of my pages without having to declare those options every time.

Things like filterable, sortable, etc. need to be the same across all of my grids and declaring data-sortable="true" on every page seems pointless and can lead to mistakes. How do I do this in MVVM? In non-MVVM I could just have a central function like this:

    var setupStandardGridOptions = function(target) {
        if (target) {
            $(target).data("kendoGrid").setOptions({
                navigatable: true,
                filterable: true,
                sortable: true,
                resizable: true,
                selectable: true,
                pageable: {
                    pageSize: 20,
                    pageSizes: [20, 50, 100],
                    numeric: true
                }
            });
        }
    };

If I call this method in the init() of the view model it does not work. I can call it AFTER the view model is bound outside of the view model but any jquery like that for specific controls in the init() of the view model does no work. How do I set the options INSIDE the view model itself in either a single field or in a method during the init()?