Radio buttons in mdbTable


Topic: Radio buttons in mdbTable

lalithkx asked 2 years ago

Insert a Radio button in a mdbTable. Radio button should be visible and selectable for individual rows one at a time.

Actual behavior When I add a simple Angular Radio button as input to a row, it is not visible. I tried mdb Radio buttons, same result or they are visible but the paging gets distorted. I was using check boxes for each row before as suggested in the MDB examples. But wanted to use Radio buttons as we should be able to select only one row at a time. Will be greatful if you can provide a working example for using Radio buttons in a table.

Resources (screenshots, code snippets etc.)

<div class="table-wrapper table-responsive">
                <table mdbTable #tableEl="mdbTable" class="mb-0 table-editable" small="true" hover="true" striped="true">
                    <thead class="deep-purple lighten-3">
                        <tr>
                            <th style="width:20px"></th>
                            <th class="th-lg" colspan="5" style="text-align:left">
                                <a (click)="sortBy('category')">
                                    Categories
                                    <mdb-icon fas icon="sort" class="ml-1"></mdb-icon>
                                </a>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr *ngFor="let item of categories;let i = index" (click)="selectRow($event, item)"
                            [class.rowselected]="item.selected">

                            <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                                    scope="item" style="width: 20px">
                                <!--<mdb-checkbox (change)="updateSelectedStatus(item)"></mdb-checkbox>-->
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="i"
                                            mdbInput (change)="updateSelectedStatus(item)">
                                    <label class="custom-control-label" for="i"></label>
                                </div>-->
                            </th>
                            <!--<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                                scope="item" style="width: 20px">
                                <input type="radio" name="radiogroup">
                            </td>-->
                            <td colspan="6" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                                {{item.category}}  
                            </td>
                        </tr>
                    </tbody>
                    <tfoot class="deep-purple lighten-3">
                        <tr>
                            <td colspan="2" style="" align-content="left">
                                <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="codeCategories">
                                </mdb-table-pagination>
                            </td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                </table>

lalithkx commented 2 years ago

Sorry Guys. Finally got it working. Sorry for the false alarm.


Konrad Stępień staff commented 2 years ago

Good job! I will change the status of the problem for resolved

Best, Konrad.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: Desktop
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No