fooplugins / FooTable

jQuery plugin to make HTML tables responsive
https://fooplugins.com/plugins/footable-jquery/
Other
2.13k stars 637 forks source link

How to expand on submit #766

Open mspace23 opened 6 years ago

mspace23 commented 6 years ago

Hello all

In my MVC 5 Web App I use footable. In a table I have fields radio buttons for example that are built the form.

here is the code

`

            <thead>

                <tr>
                    <th></th>
                    @foreach (var labelfreqdep in ViewBag.rbFreqDep)
                    { 

                        <th style="text-align:center;" data-breakpoints="xs sm">

                            <label for="FrequencyID">@labelfreqdep.FrequencyDescription</label>

                        </th>

                    }

                    <th data-breakpoints="xs sm"></th>
                </tr>
         </thead>
            <tbody>

                <tr>
                    <td>First Chooses</td>
                    @foreach (var freqdep in ViewBag.rbFreqDep)
                    {
                        <td class="rd">

                            <input type="radio" name="A3_1" id="A3_1" value="@freqdep.FrequencyDescription" data-val="true" data-val-required="Please select">
                        </td>

                    }
                    <td class="rd">@Html.ValidationMessageFor(model => model.A3_1, "", new { @class = "text-danger" })</td>

                </tr>

`

I also use validation for empty fields with data-val="true". The problem is that doesn't display the "Please select" message in mobile view. It works ok for large resolutions. When I have expanded the tr with the plus icon the message appears. Can we just expand the rows that dont have been selected on submit?

Any idea? thank you

mspace23 commented 6 years ago

For anyone who has the same issue, I solved it by giving an id to the button and then handle it through jquery

 `<script type="text/javascript">

  jQuery(function($){
   $('.surveytable').footable()

     $("#survey_btn").click(function (event) {
       $('.surveytable').footable({
        "expandAll": true

                   });

           });

         });
 </script>`