Marking Rows as Selected Before Table Render

Question

I am using Bootstrap-Table Cn

I have a table. I want to pre-check certain rows. However when I add class="selected" to my or table row, upon loading the table in, Bootstrap-Table removes the class selected and unchecks it. How can I preserve the initial checkbox selected, before the table loads?

Update: I am not creating checkbox inputs. I am using BootStrap Tables CN to generate the checkboxes for me.

Here is the code.

<table id="storeTable" class="table table-bordered table-hover" style="width:100%" data-toggle="table" data-search="true" data-toolbar="#toolbar" data-pagination="true" data-side-pagination="client" data-show-pagination-switch="true" data-page-list="[10, 25, 50, ALL]" data-click-to-select="true" data-filter>
                        <thead>
                            <tr>
                                <th data-sortable="true" data-checkbox="true">
                                </th>
                                <th data-field="cg" data-sortable="true">
                                    @Html.DisplayNameFor(model => model.dealeradminstore[0].cg)
                                </th>
                                <th data-field="sn" data-sortable="true">
                                    @Html.DisplayNameFor(model => model.dealeradminstore[0].serial_number)
                                </th>
                                <th data-field="name" data-sortable="true">
                                    @Html.DisplayNameFor(model => model.dealeradminstore[0].Name)
                                </th>
                                <th data-sortable="true">
                                    WebReports
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.dealeradminstore)
                            {
                                <tr id="@test.NullRefExcl(item.serial_number.ToString())" checked>
                                    <td></td>
                                    <td>
                                        @test.NullRefExcl(item.cg.ToString())
                                    </td>
                                    <td>
                                        @test.NullRefExcl(item.serial_number.ToString())
                                    </td>
                                    <td>
                                        @test.NullRefExcl(item.Name)
                                    </td>
                                    <td>
                                        @{string reportsCheck = "";
                                            if (test.NullRefExcl(item.base_xtags).Contains("RPT"))
                                            {
                                                reportsCheck = "Yes";
                                            }
                                            if (!test.NullRefExcl(item.base_xtags).Contains("RPT"))
                                            {
                                                reportsCheck = "No";
                                            }
                                        }
                                        @test.NullRefExcl(reportsCheck)
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>

DrollDread · Answer 1 · 2018-09-25T08:40:14.270

0

To create a dynamically generated checkbox with it's value already set to checked:

@Html.CheckBoxFor(m => m.SomeBooleanProperty, new { @checked = "checked" });

Source: Proper usage of .net MVC Html.CheckBoxFor

edited Sep 25 '18 at 08:40

answered Sep 24 '18 at 14:51

DrollDread

321
4
22

I cannot use that method, I am not creating checkbox inputs. I am letting Bootstrap Tables CN generate the checkbox input boxes for me. I posted my code to show you what I mean. My header for first column in table has data-checkbox="true" which makes the first row all checkbox inputs. – AcaciaGalagr Sep 24 '18 at 15:50
1

Thank you for the help. Your solution actually helped me stumble upon the answer I needed. I was able to find some lost documentation on setting row status within the Bootstrap Tables CN extensions by row. I will post my solution and close this ticket. I appreciate the help. – AcaciaGalagr Sep 25 '18 at 14:20

score 0 · Answer 2 · answered Sep 25 '18 at 14:22

Finally with a point in the right direction from Richard0096 I was able to figure it out. Here is the solution that uses the Bootstrap Tables Extensions CN.

  var checkSum = 0;
function checkedFormatter(value, row, index) {
    var snList = [];
    snList = document.getElementById("inputsn").value.split("|");
    snList.forEach(function (element) {
        var checkSN = ((row.sn).toString()).trim();
        if (checkSN == element) {
            checkSum = 1;
        }
    })
    if (checkSum == 1) {
        checkSum = 0;
        return {
            checked: true
        }
    }
    return value;


}

Marking Rows as Selected Before Table Render

2 Answers2