Setting button visibility in knockout binding

[Chathuranganie Pathirage]

How can I show/hide a button in a page depending on a condition? Following is the html script for my UI:

   <tbody data-bind="foreach: DailyItemList">

                                <tr>

                                    <td data-bind="text:Day"></td>

                                    <td><input id="Text2" data-bind="value: Required"/></td>

                                    <td><input id="Text3" data-bind="value: Setup"/></td>

                                    <td><input id="Text4" data-bind="value: Close"/></td>

                                  <%--  <td><select id="combobox" data-bind="options:$parent.Vehicles, value:OwnerVehicle, optionsText: 'Name', optionsValue: 'ID' ">

                                   

                                </select></td>--%>

                                <td>

                                <table>

                                    <tbody data-bind="foreach: Items">

                                        <tr>

                                            <td><input id="Text5" data-bind="value: Location"/></td>

                                            <td><input id="Text6" data-bind="value: Role"/></td>

                                            <td><input id="Button2" type="button" value="X" data-bind="click: function() { $parent.Delete($data); }" /></td>     

                                           <td><input id="Button1" type="button" value="+" data-bind="click: Add" /></td>  

                                        </tr>

                                    </tbody>

                                    </table>

                                    </td>                       

                                   

                                           

                                </tr>   

                            </tbody>

Here I have two buttons - Add and Delete. I want to show the add button in the first row of the table and the delete button in the others. How to accomplish that?

Thanks in advance

[Michael Latta]

You can use an if binding along with the $index value for the foreach.

Michael

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Chathuranganie Pathirage]

Hi,

Thanks for your quick feedback. I've thought of the same approach, but what property should I use for button? (visibility, style.display)?. Should I user attr binding ?

I know you can use the following for a div visibility, but this doesnt work for button.

<div data-bind="visible: myValues().length > 0">

Please help!

[Michael Latta]

As I suggested use an if binding to select which button to display.  I think you want the containerless binding with <!-- ko if: ... -->

Look at the bottom of the if binding documentation for an example.

Michael

[Chathuranganie Pathirage]

Thanks, it worked nicely :)

 <tbody data-bind="foreach: WorkSegments">

                                                <tr>

                                                    <td class="formFields">

                                                       <!-- ko if: $index() == 0 -->

                                                        <button id="btnAdd5" value="Add" style="width:30px" data-bind="click: function() { $parent.Add(); }">

                                                            +</button>

                                                    <!--/ko-->

                                                    <!-- ko if: $index() > 0 -->

                                                         <button id="btnDelete5" value="Add" style="width:30px" data-bind="click: function() { $parent.Delete($data); }">

                                                            x</button>

                                                    <!--/ko-->

                                             

                                                    </td>

                                                </tr>

                                            </tbody>