Kendo Angular Grid - Row selection

5 Answers 1697 Views
General Discussions
Mark
Top achievements
Rank 1
Mark asked on 05 Jan 2018, 05:12 PM
Is it possible to disable the selection of specific rows based on the row data? Disable would mean that the selection checkbox would not appear (or would be disabled) and selection by mouse click would be disabled.

5 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 08 Jan 2018, 09:08 AM
Hello Mark,

You can use the Grid rowClass input and provide a function that will return the "k-disabled" class (or any other custom class that would prevent the user from interacting with the given row), for all data items that pass some condition, e.g.:

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

https://plnkr.co/edit/htBCLhx8f8ZyenYJzAQB?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Mark
Top achievements
Rank 1
commented on 08 Jan 2018, 04:06 PM

Hi Dimiter,

perfect!

Thanks,

Mark

Oli
Top achievements
Rank 1
commented on 04 May 2018, 09:12 AM

Is it possible to just apply the k-disabled class to the checkbox-column cell rather than the entire row? I have a button in the row that I wouldn't want to disable but I would want to limit selection of the row.
Oli
Top achievements
Rank 1
commented on 07 May 2018, 09:38 AM

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...

Oli
Top achievements
Rank 1
commented on 07 May 2018, 09:52 AM

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>

Oli
Top achievements
Rank 1
commented on 07 May 2018, 09:53 AM

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>

Dimiter Madjarov
Telerik team
commented on 07 May 2018, 10:09 AM

Hello Oli,


Yes, I did not add the additional styles for simplicity. Thanks for the update.

Regards,
Dimiter Madjarov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Sambo
Top achievements
Rank 1
commented on 26 May 2018, 06:56 AM

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

 

 

Sambo
Top achievements
Rank 1
commented on 28 May 2018, 06:27 AM

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

 

 

 

 

Dimiter Madjarov
Telerik team
commented on 28 May 2018, 07:33 AM

Hello Sambo,


The example code looks correct. The reason for the issue is that the name of this CSS class was changed from k-disabled to k-state-disabled in recent Kendo UI theme versions. Here is the updated version of the example.


Regards,
Dimiter Madjarov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Sambo
Top achievements
Rank 1
commented on 28 May 2018, 03:29 PM

Thank you

It is working fine now

Sambo
Top achievements
Rank 1
commented on 28 May 2018, 03:42 PM

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

 

Sambo
Top achievements
Rank 1
commented on 29 May 2018, 09:05 AM

Hello Sir,

Please suggest something. I am stuck due to it.

Sambo
Top achievements
Rank 1
commented on 29 May 2018, 01:07 PM

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

 

Dimiter Topalov
Telerik team
commented on 30 May 2018, 07:48 AM

Hello Sambo,

This is a TypeScript error caused by the fact that the filter can be of type either FilterDescriptor or CompositeFilterDescriptor. The CompositeFilterDescriptor does not have a "value" property, thus the TypeScript issue.

we can avoid the error by using array notation to access the value property as follows:

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

or by setting the type of f to be FilterDescriptor as follows:

import { CompositeFilterDescriptor, distinct, filterBy, FilterDescriptor } from '@progress/kendo-data-query';
...
public ngAfterViewInit() {
    this.currentData = this.data;
    this.value = this.currentFilter.filters.map((f:FilterDescriptor) => f.value);
    
    this.showFilter = typeof this.textAccessor(this.currentData[0]) === 'string';
  }

As for the second part of the question, you can utilize the Grid ColumnMenu functionality:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/menu/

The reusable custom Filter menu will be available when the Filter option is selected from the ColumnMenu:

https://plnkr.co/edit/LIT4yvn7LAnZ2bqMJLYK?p=preview

I hope this helps.

You are doing nothing wrong in asking the questions, but the standard response time for forum threads is 48 hours. You can benefit from the standard 24-hour response time in private support threads (tickets).

On a side note, please open separate threads for questions and issues that are not directly related to the thread's initial topic or to one another. This will facilitate a tidier support history of your account and better support service. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Brad
Top achievements
Rank 1
commented on 16 Jul 2018, 10:39 PM

The disabled rows still get selected when using the 'showSelectAll' option. Is there a way to stop this?
Dimiter Madjarov
Telerik team
commented on 18 Jul 2018, 08:13 AM

Hello Brad,


Yes, this is the default behavior of the "Select all" checkbox. In order to filter the disabled items when clicking the checkbox, you could manually handle the selectAllChange event and set the selectedKeys collection. Here is the updated version of the previous example:

https://plnkr.co/edit/nrE2TR3wXmHycdl2gB7o?p=preview

Regards,
Dimiter Madjarov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Brad
Top achievements
Rank 1
commented on 26 Sep 2018, 02:31 PM

[quote]Dimiter Madjarov said:Hello Brad,


Yes, this is the default behavior of the "Select all" checkbox. In order to filter the disabled items when clicking the checkbox, you could manually handle the selectAllChange event and set the selectedKeys collection. Here is the updated version of the previous example:

https://plnkr.co/edit/nrE2TR3wXmHycdl2gB7o?p=preview

Regards,
Dimiter Madjarov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

[/quote]

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

Dimiter Madjarov
Telerik team
commented on 27 Sep 2018, 01:11 PM

Hello Brad,


Could you clarify what is the exact issue that you are experiencing with the provided example, when using the DataBindingDirective? In general, there is no difference in the way we would handle the selectedKeysChange and selectAllChange events in both cases.

Regards,
Dimiter Madjarov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Brad
Top achievements
Rank 1
commented on 27 Sep 2018, 01:50 PM

In both event handlers you are accessing the grid data like this: 
this.gridData

which is referring to the data grid property

[data]="gridData"

 

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

Brad
Top achievements
Rank 1
commented on 27 Sep 2018, 01:58 PM

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

previewer.41a48d826afff4888855.js:14
Error: Error: XHR error (404) loading https://unpkg.com/@angular/core@5.0.0//bundles/core.umd.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (https://unpkg.com/zone.js@0.8.12/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (https://unpkg.com/zone.js@0.8.12/dist/zone.js:424:31)
        at Zone.runTask (https://unpkg.com/zone.js@0.8.12/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (https://unpkg.com/zone.js@0.8.12/dist/zone.js:486:38)
    Error loading https://unpkg.com/@angular/core@5.0.0//bundles/core.umd.js as "@angular/core" from https://run.plnkr.co/preview/cjmkn6dw600093b61g130are1/app/main.ts
Dimiter Madjarov
Telerik team
commented on 01 Oct 2018, 07:09 AM

Hello Brad,


The Grid DataBindingDirective also receives the required data items as an input property, so it could be accessed the same way as in the current example.
E.g.
https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-built-in-directive


For convenience I updated the example with the kendoGridBinding directive
https://stackblitz.com/edit/angular-bzvb5c?file=app/app.component.ts

Regards,
Dimiter Madjarov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Brad
Top achievements
Rank 1
commented on 01 Oct 2018, 08:43 PM

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? 

@ViewChild('grid') gridComponent: GridComponent;

...

public onSelectAllChange(checkedState: SelectAllCheckboxState) {

...

    this.selectedPrimaryKeys = (<GridDataResult>this.gridComponent.data).data.filter((row) =>             !this.rowDisabled(row)).map((item) => item.studentTestId);

 

...

}

Dimiter Madjarov
Telerik team
commented on 02 Oct 2018, 08:13 AM

Hello Brad,

Since the data is not directly accessible outside the directive, the current implementation looks correct.

Regards,
Dimiter Madjarov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
D
Top achievements
Rank 1
commented on 26 Mar 2019, 05:47 AM

Hi, The above code is working fine, However I have a Select All check box as one of the columns and the select all check box is still "selecting"  the disabled row check box, How can I avoid the disabled row from being selected with the select all functionality.
Dimiter Madjarov
Telerik team
commented on 26 Mar 2019, 07:04 AM

Hello,


I am unable to reproduce the behavior in the last example, discussed in this thread

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

Please check it again and let me know if I am missing something here.

Regards,
Dimiter Madjarov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Leandro
Top achievements
Rank 1
commented on 02 Apr 2019, 07:18 PM

Try this sample:

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

 

Dimiter Topalov
Telerik team
commented on 04 Apr 2019, 11:12 AM

Hello Leandro,

Thank you for sharing the runnable demo. Both in it, and the one, previously shared by Dimiter Madjarov, checking the Select All checkbox does not select the "disabled" rows. If someone still faces some issues or has additional questions, please provide further details, and a similar runnable projects where the undesired behavior can be observed, so we can discuss further.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Thamarai
Top achievements
Rank 1
Veteran
commented on 26 Sep 2020, 09:39 AM

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;
    }

Dimiter Topalov
Telerik team
commented on 29 Sep 2020, 07:24 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Thamarai
Top achievements
Rank 1
Veteran
commented on 13 Oct 2020, 06:15 AM

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

Thamarai
Top achievements
Rank 1
Veteran
commented on 14 Oct 2020, 07:22 AM

Thank You Dimiter Topaloy its working thanks
0
Dimiter Madjarov
Telerik team
answered on 07 May 2018, 08:41 AM
Hi Oli,


You could achieve this by specifying a template for the checkbox selection column and add the k-disabled class there. Here is a sample one:

<kendo-grid-checkbox-column>
  <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" >
    <div class="{{dataItem.UnitsOnOrder === 0 ? 'k-disabled' : ''}}">
      <input [kendoGridSelectionCheckbox]="rowIndex" />
    </div>
  </ng-template>
</kendo-grid-checkbox-column>

Regards,
Dimiter Madjarov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Thamarai
Top achievements
Rank 1
Veteran
answered on 03 Mar 2021, 05:48 AM

Hi Sir,

I want to moved focused pagination page, in kendo grid , how to i move focused pagination page.

 

0
Ivan
Telerik team
answered on 05 Mar 2021, 06:11 AM

Hi ,

Sorry for late response we have heavy support load those days.

If I understood your demand correctly, it is possible to control selected page of a grid, by using "skip" property, which is part of pagination settings. Full example can be observed in this stackblitz sample, initial page is set to 3 using skip = 20;

I hope this will help you.

Regards,
Ivan
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
Thamarai
Top achievements
Rank 1
Veteran
answered on 05 Mar 2021, 06:45 AM

Hi Ivan,

Thanks for your reply, it is very very useful us.

Tags
General Discussions
Asked by
Mark
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Dimiter Madjarov
Telerik team
Thamarai
Top achievements
Rank 1
Veteran
Ivan
Telerik team
Share this question
or