Kendo Angular Grid - Row selection

34 posts, 0 answers
  1. Mark
    Mark avatar
    2 posts
    Member since:
    Nov 2017

    Posted 05 Jan 2018 Link to this post

    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.
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1282 posts

    Posted 08 Jan 2018 Link to this post

    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.
  3. Mark
    Mark avatar
    2 posts
    Member since:
    Nov 2017

    Posted 08 Jan 2018 Link to this post

    Hi Dimiter,

    perfect!

    Thanks,

    Mark

  4. Oli
    Oli avatar
    8 posts
    Member since:
    Oct 2015

    Posted 04 May 2018 in reply to Dimiter Topalov Link to this post

    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.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 07 May 2018 Link to this post

    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.
  6. Oli
    Oli avatar
    8 posts
    Member since:
    Oct 2015

    Posted 07 May 2018 in reply to Dimiter Madjarov Link to this post

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

  7. Oli
    Oli avatar
    8 posts
    Member since:
    Oct 2015

    Posted 07 May 2018 in reply to Oli Link to this post

    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>

  8. Oli
    Oli avatar
    8 posts
    Member since:
    Oct 2015

    Posted 07 May 2018 in reply to Oli Link to this post

    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>

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 07 May 2018 Link to this post

    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.
  10. Sambo
    Sambo avatar
    6 posts
    Member since:
    Apr 2018

    Posted 26 May 2018 Link to this post

    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

     

     

  11. Sambo
    Sambo avatar
    6 posts
    Member since:
    Apr 2018

    Posted 28 May 2018 in reply to Sambo Link to this post

    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

     

     

     

     

  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 28 May 2018 Link to this post

    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.
  13. Sambo
    Sambo avatar
    6 posts
    Member since:
    Apr 2018

    Posted 28 May 2018 in reply to Dimiter Madjarov Link to this post

    Thank you

    It is working fine now

  14. Sambo
    Sambo avatar
    6 posts
    Member since:
    Apr 2018

    Posted 28 May 2018 Link to this post

    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

     

  15. Sambo
    Sambo avatar
    6 posts
    Member since:
    Apr 2018

    Posted 29 May 2018 in reply to Sambo Link to this post

    Hello Sir,

    Please suggest something. I am stuck due to it.

  16. Sambo
    Sambo avatar
    6 posts
    Member since:
    Apr 2018

    Posted 29 May 2018 in reply to Sambo Link to this post

    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

     

  17. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1282 posts

    Posted 30 May 2018 Link to this post

    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.
  18. Brad
    Brad avatar
    6 posts
    Member since:
    Nov 2017

    Posted 16 Jul 2018 in reply to Dimiter Madjarov Link to this post

    The disabled rows still get selected when using the 'showSelectAll' option. Is there a way to stop this?
  19. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 18 Jul 2018 Link to this post

    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.
  20. Brad
    Brad avatar
    6 posts
    Member since:
    Nov 2017

    Posted 26 Sep 2018 in reply to Dimiter Madjarov Link to this post

    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.

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

  21. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 27 Sep 2018 Link to this post

    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.
  22. Brad
    Brad avatar
    6 posts
    Member since:
    Nov 2017

    Posted 27 Sep 2018 in reply to Dimiter Madjarov Link to this post

    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? 

  23. Brad
    Brad avatar
    6 posts
    Member since:
    Nov 2017

    Posted 27 Sep 2018 in reply to Dimiter Madjarov Link to this post

    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
  24. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 01 Oct 2018 Link to this post

    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.
  25. Brad
    Brad avatar
    6 posts
    Member since:
    Nov 2017

    Posted 01 Oct 2018 in reply to Dimiter Madjarov Link to this post

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

     

    ...

    }

  26. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 02 Oct 2018 Link to this post

    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.
  27. D
    D avatar
    1 posts
    Member since:
    Apr 2018

    Posted 26 Mar 2019 in reply to Dimiter Topalov Link to this post

    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.
  28. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 26 Mar 2019 Link to this post

    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.
  29. Leandro
    Leandro avatar
    2 posts
    Member since:
    Oct 2010

    Posted 02 Apr 2019 Link to this post

    Try this sample:

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

     

  30. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1282 posts

    Posted 04 Apr 2019 Link to this post

    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.
Back to Top