1

I am using Knockout JS. I have list of table columns in a dropdown list, on selecting a column from the list, changing the table column header style = Display:none. I need to make the rows also to be display none on paging/sorting. Once the column header set display:none it persisting on paging/sorting but not the rows. Here is the my table structure.

<table class="mediaTable dataTableExt">
    <thead>
        <tr>
            <th class="essential persist">
                <a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#">@Model.GetLabel("Confirmation #")</a> </th>

            <th class="essential">
                <a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#">@Model.GetLabel("First Name")</a>
            </th>
            <th class="optional">
                <a data-bind="click: function () {sortGrid('cust','LastName')}" href="#">@Model.GetLabel("Last Name")</a>
            </th>

        </tr>
    </thead>
    <!-- ko foreach: customerOrders-->
    <tbody>
        <tr>
            <td class="essential persist" data-bind="text:ConfirmationNumber">
            </td>

            <td class="essential" data-bind="text:CustomerFirstName">
            </td>
            <td class="optional" data-bind="text:CustomerLastName">
            </td>

        </tr>
    </tbody>
    <!-- /ko-->
</table>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
cmayil
  • 21
  • 3
  • Do you mean you also need to hide the *columns*? – woz Jun 22 '15 at 18:57
  • How are you setting the column header style? – Roy J Jun 22 '15 at 19:56
  • Hi Roy, I am using MediaTable.Js/css . $('.mediaTable').mediaTable(); this query will show the column list based on class mediaTable . On page index 0 its works perfectly but not for other pages. – cmayil Jun 23 '15 at 23:19

1 Answers1

0

You can use the visible binding to hide both the headers and the column data.

<table class="mediaTable dataTableExt">
    <thead>
        <tr>
            <th class="essential persist" data-bind="visible: $root.hidden() != 'ConfirmationNumber'">
                <a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#">@Model.GetLabel("Confirmation #")</a> </th>

            <th class="essential" data-bind="visible: $root.hidden() != 'FirstName'">
                <a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#">@Model.GetLabel("First Name")</a>
            </th>
            <th class="optional" data-bind="visible: $root.hidden() != 'LastName'">
                <a data-bind="click: function () {sortGrid('cust','LastName')}" href="#">@Model.GetLabel("Last Name")</a>
            </th>

        </tr>
    </thead>
    <!-- ko foreach: customerOrders-->
    <tbody>
        <tr>
        <th class="essential persist" data-bind="visible: hidden() != 'ConfirmationNumber'"> <a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#">@Model.GetLabel("Confirmation #")</a> 
        </th>
        <th class="essential" data-bind="visible: hidden() != 'FirstName'"> <a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#">@Model.GetLabel("First Name")</a>

        </th>
        <th class="optional" data-bind="visible: hidden() != 'LastName'"> <a data-bind="click: function () {sortGrid('cust','LastName')}" href="#">@Model.GetLabel("Last Name")</a>

        </th>
        </tr>
    </tbody>
    <!-- /ko-->
</table>

Demo: http://jsfiddle.net/knjtov16/1/

Roy J
  • 42,522
  • 10
  • 78
  • 102
  • Hi Roy, Thank you for your help. Can you please help me to get the dropdownlist as multi-selectable & the column based on the selection. Thanks – cmayil Jun 23 '15 at 22:57
  • @cmayil The documentation covers multiselects here: http://knockoutjs.com/documentation/selectedOptions-binding.html. That will give you an observable array of selected items that you can use `indexOf` on, instead of comparing to `hidden`. – Roy J Jun 24 '15 at 00:24