How can I select multiple row in wj flex grid?

Posted by: arnoldbendaa on 18 January 2018, 11:34 pm EST

    • Post Options:
    • Link

    Posted 18 January 2018, 11:34 pm EST

    Hello.

    I am a new user of wj flexgrid.

    I am going to select multiple row .

    html is as following .

    	<wj-flex-grid class="grid" items-source="ctx.data" selection-changed="selectionChangedHandler()" control="ctx.flex" resized-column="resizedColumn(s,e)" sorted-column="sortedColumn(s,e)">
    		<wj-flex-grid-column header="#" name="index" binding="mappedModelId"></wj-flex-grid-column>
    		<wj-flex-grid-column header="Name" binding="mappedModelVisId"></wj-flex-grid-column>
    		<wj-flex-grid-column header="Description" binding="mappedModelDescription"></wj-flex-grid-column>
    		<wj-flex-grid-column header="External System" binding="externalSystemVisId"></wj-flex-grid-column>
    		<wj-flex-grid-column header="Companies" binding="companies"></wj-flex-grid-column>
    		<wj-flex-grid-column header="Ledger" binding="ledgerVisId"></wj-flex-grid-column>
    		<wj-flex-grid-column header="Global" binding="global"></wj-flex-grid-column>
    		<wj-flex-grid-column min-width="135" header="Actions" name="buttons"></wj-flex-grid-column>
    	</wj-flex-grid>	
    
    

    js file is as following.

            function itemFormatter(panel, r, c, cell) {
                if (panel.cellType == wijmo.grid.CellType.Cell) {
    
                    var col = panel.columns[c],
                        html = cell.innerHTML;
                    switch (col.name) {
                        case 'index':
                            html = "" + (r + 1);
                            break;
                        case 'buttons':
                            html = '<button type="button" class="btn btn-warning btn-xs" ng-click="open()">Open</button>' +
                                ' <button type="button" class="btn btn-danger btn-xs" ng-click="deleteModelMapping()">Delete</button>';
                            break;
                        case 'checkbox':
                        	html='<input type="checkbox" ng-click="addImport($event,'+r+')"  ng-model="multiImportChk['+r+']"/>';
                    }
    
                    if (html != cell.innerHTML) {
                        cell.innerHTML = html;
                        $compile(cell)($scope);
                    }
                }
            }
    
    

    when I scroll the flex grid, I cannot see checked box.

    I appended the video.

    How can I fix it?

    Please help me.

    Thanks.

  • Posted 18 January 2018, 11:37 pm EST

  • Posted 21 January 2018, 7:07 pm EST

    Hi,

    Please refer to the fiddle that implements multiple row selection using checkbox.

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

    If the issue persists, please let us know.

    ~Manish

Need extra support?

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

Learn More

Forum Channels