Accordion within table rows

Question

I am using Twitter Bootstrap. Currently I am working on Master Details looks alike table, which I am planning to place an accordion into each table's row and if it is expanded, the partial view will be reload and displayed.

Somehow it does not work as expected but if I change it to Modal, the partial view loaded perfectly.

This is the controller that process and returning the values:

 public ActionResult Index(int id,int? page)
    {
        List<CustomerProduct> customerProducts =
        (from c in RepositoryProduct.Reload(id)
        select c).ToList<CustomerProduct>();
        return PartialView("_CustomerProducts", customerProducts);
    }

and this is the table in the view :

<table id="tbl" class="table table-condensed" style="border-collapse:collapse;">
            <thead>
                <tr>    
                        <th>
                           @Html.ActionLink("Customer Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
                        </th>

                        <th>
                            @Html.DisplayNameFor(model => model.First().CustLocalName)
                        </th>

                        <th>                            
                             @Html.ActionLink("Country", "Index", new { sortOrder = ViewBag.CountrySortParm, currentFilter = ViewBag.CurrentFilter })
                        </th>

                        <th>
                           @Html.DisplayNameFor(model => model.First().City)
                        </th>

                    </tr>
            </thead>

            <tbody>
                @foreach (var item in Model)
                {  
                    <tr data-toggle="collapse">

                        <td style="display:none;">
                            @Html.DisplayFor(modelItem => item.CustID)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.CustName)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.CustLocalName)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.Country.CountryName)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.City)
                        </td>

                        <td>
                            <a class="btn btn-small btn-info" type="button" href="@Url.Action("Index", "CustomerProduct", new { id = item.CustID })"  data-toggle="collapse" data-target="#@item.CustID" >Products</a>                            
                        </td>

                    </tr>

                     <tr>

                        <td colspan="6" class="hiddenRow">
                            <div id="@item.CustID" class="accordian-body collapse" tabindex="-1">
                                <div class="accordion-header">

                                    <label>
                                        <strong>@item.CustName product(s)</strong>
                                    </label>
                                </div>
                                <div class="accordion-body">TEST</div>
                            </div>
                        </td>

                    </tr>
                }

            </tbody>
    </table>

this is part of the code that calling the controller Index function :

<a class="btn btn-small btn-info" type="button" href="@Url.Action("Index", "CustomerProduct", new { id = item.CustID })"  data-toggle="collapse" data-target="#@item.CustID" >Products</a>

Actually I would like to load the partialview(_CustomerProduct) in the div class="accordion-body" as what I did in div class="modal-body" but no success. May I know if it is possible to do it and if yes, may I know how?

Any help will be appreciated.

yrthilian · Accepted Answer · 2013-10-14 11:29:13Z

1

for me to get the view to work i used

<td colspan="6" class="hiddenRow">
                            <div id="@item.CustID" class="accordian-body collapse" tabindex="-1">
                                <div class="accordion-header">

                                    <label>
                                        <strong>@item.CustName product(s)</strong>
                                    </label>
                                </div>
                                 <div class="accordion-body">
                                    @Html.Partial("_CustomerProduct")
                                </div>
                            </div>
                        </td>

answered Oct 14, 2013 at 11:29

yrthilian

6310 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accordion within table rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related