Disable Row Selection in Angular and Angular JS

Posted by: jaganlal.thoppe on 27 September 2018, 5:39 pm EST

    • Post Options:
    • Link

    Posted 27 September 2018, 5:39 pm EST

    Hi,

    I would like to disable the default row selection in Flexgrid. I would like to select/unselect a row only by checking/unchecking a checkbox at each row.

    Something similar to this

    http://jsfiddle.net/mkgupta911/pq58z0yj/6/

    note: BTW wijmo is instantiated from the HTML like below

    
    <wj-flex-grid ... >
        <wj-flex-grid-filter #filter ></wj-flex-grid-filter>
    </wj-flex-grid>
    
    
  • Posted 27 September 2018, 7:02 pm EST

    BTW, on Angular i’m using the following snippet to select and unselect the row

    
    -- this entire condition is within a loop, iterating each row --
    if(--some condition--) {
    	this.flexGrid.rows[i].cssClass = 'row-selected';
    } else {
    	this.flexGrid.rows[i].cssClass = '';
    }
    
    

    The above code selects the row, but when unselected, css class

    row-selected
    gets removed from the cell’s classList; but additional css classes -
    wj-state-selected
    or
    wj-state-multi-selected
    still makes the row selected.

    How to eliminate this default behaviour?

    Thanks for your help,

    Jagan

  • Posted 28 September 2018, 1:44 am EST

    For angular and angularJs, you may use cell-templates to show checkbox and use isSelected property and set selected state of the row.

    Please refer to the following samples:

    Angular: https://stackblitz.com/edit/angular-wctntw?file=app%2Fapp.component.html

    AngularJS: https://jsfiddle.net/yp4sdekf/

    ~Sharad

  • Posted 28 September 2018, 9:40 am EST

    Thanks a lot Sharad, it worked like a charm.

    All i have to do was add

    
    <wj-flex-grid ...
    [selectionMode]="'None'">
    
    

    This makes no selection which is what i wanted.

    Thank you,

    Jagan

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels