Kendo Angular Grid - Row selection

Hi Dimiter,

perfect!

Thanks,

Mark

This works although now only displays a basic input checkbox. If I apply the k-checkbox class, the checkbox is hidden by the kendo css and nothing is displayed...

I managed to get a more visually appealing checkbox (like the default) by adding the label for the corresponding checkbox id.

 <kendo-grid-checkbox-column [width]="40"
                                        [minResizableWidth]="40">
              <ng-template kendoGridCellTemplate let-idx="rowIndex" let-dataItem>
                <div class="{{isDisabled(dataItem)}}">
                  <input [kendoGridSelectionCheckbox]="idx" class="k-checkbox" type="checkbox" id="{{'chk'+idx}}" />
                  <label class="k-checkbox-label" for="{{'chk'+idx}}"></label>
                </div>

              </ng-template>
            </kendo-grid-checkbox-column>

Managed to get a better looking checkbox by adding a label for the corresponding checkbox id.

 <kendo-grid-checkbox-column [width]="40"
                                        [minResizableWidth]="40">
              <ng-template kendoGridCellTemplate let-idx="rowIndex" let-dataItem>
                <div class="{{isDisabled(dataItem)}}">
                  <input [kendoGridSelectionCheckbox]="idx" class="k-checkbox" type="checkbox" id="{{'chk'+idx}}" />
                  <label class="k-checkbox-label" for="{{'chk'+idx}}"></label>
                </div>

              </ng-template>
            </kendo-grid-checkbox-column>

Hello,

I am also trying to achieve the same goal. means, I also want to disable the row. I used ur given rowclass method. It is not working for me.

I checked by inspecting element. it add 'k-disabled' class into row. but still when i select row it is selectable and after selecting desabled row. It rows class have 'k-alt k-state-selected k-disabled' value. And it is selected.

<kendo-grid id="gridKendoAngular"
[kendoGridBinding]="gridData" [pageSize]="pageSize"
[scrollable]="'virtual'" [sortable]="true"
[resizable]="true" [reorderable]="true"
[filterable]="{filter: true}"
[columnMenu]="true" [rowHeight]="25"
[height]="550" [selectable]="selectableSettings"
[kendoGridSelectBy]="'Batch_No'"
[selectedKeys]="mySelection" (selectedKeysChange)="onSelectedKeysChange($event)"
[rowClass]="isDisabled">

This is my Kendo grid basic configuration.

public isDisabled(args) {
return {
'k-disabled': args.dataItem.Batch_No === 10423
};
}

This is your given code.

Kindly, suggest me best possible solution resolve it. Thanks in advance.

Sambo

Please Sir Suggest me something. It is very important to me. Today only i have to present this in front my seniors. 

Anyhow i need to get it done and working fine.

we have license of kendo. But, unfortunately the person who holding userid and password. is not present here. so cant take help personally through kendo team.

If it is required, i can give you the ticket which was generated at time of asking question using licensed ID. 

Please Help.

Thanks in Advance.

Sambo

Thank you

It is working fine now

Hello sir,

Today i tried to implement excel like filter in my Kendo grid angular. From your below mention Link of Filter Menu.

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/

I applied it in my project. It is giving me error in 'multicheck-filter.component.ts'. i mention below method which giving error and what error it is giving.

CODE :

public ngAfterViewInit() {
this.currentData = this.data;
this.value = this.currentFilter.filters.map(f => f.value);
this.showFilter = typeof this.textAccessor(this.currentData[0]) === 'string';
}

ERROR :

ERROR in src/app/multicheck-filter.component.ts(72,56): error TS2339: Property 'value' does not exist on type 'FilterDescriptor | CompositeFilterDescriptor'.
  Property 'value' does not exist on type 'CompositeFilterDescriptor'.

Tried to google on this. But Got nothing anywhere. if you can help me this, it would be wonderful.

One more thing to ask, as mention in link. after implementing it. when i click on filter. It Will give me filter like excel directly.  

But i want it in sequence like, Sort ASC, sort DESC, Filter Menu (To show hide column),  Filter option ( In this want it to work like same as excel filter.). I have Implemented all the things only excel Like filter implementation and How to attach it below in filter options (where it will work like, it is working on filter click in your demo). 

If you can give me suggestion on this. it would be great.

Thanks

Sambo

Hello Sir,

Please suggest something. I am stuck due to it.

Hello Team,

Please suggest me something. How to resolve this error. 

If i am doing something wrong in the way of asking question, please let me know. Or want more input from me to resolve this error. Just inform i can give you more info.

Thanks In Advance

Sambo

[/quote]

We use a DataBindingDirective with our grid. It's not clear to me how to make that work with your example. 

which is referring to the data grid property

We don't have that property set when using DataBindingDirective. So, what's the best way to access the grid data? 

Also, as an FYI, your example doesn't work in Plunker. I get the following error in console:

We are using a custom DataBindingDirective so there is no 'gridData' property to get the current grid data from. I've managed to get it working by doing the following. Is there any other way? 

...

Try this sample:

https://stackblitz.com/edit/angular-dnzkqq

Selection key using String , want to select the row programmatically its possible?

i want to default selection first row.

Ex:

 [selectedKeys]="selectedRow"

[kendoGridSelectBy]="custSelectionKey"

protected selectedRow: number[] = [0];

 public custSelectionKey(context: RowArgs): string {
      return context.dataItem.compCd + '#' + context.dataItem.custodianCd;
    }

Hello Thamarai,

It is possible to provide a callback that will determine a custom key, by which the Grid items will be stored:

https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting/#toc-by-a-custom-key

However, when using a custom key, the selectedKeys option needs to be bound to an array that contains the respective keys, in the given example - a string array (instead of a number array containing the row indexes).

Here is an example, demonstrating this approach:

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Thank you Dimiter Topalov reply the post,

First Time not focus any row, if i select that row only focused.

I want to load focus the first row in grid