CODEWITHSUNDEEP
jqueryknockout.js
Philip Loyer
Philip Loyer

Reputation: 768

Knockout.js table and Drop Down List on demand

I have a knockout table that displays some data in my code, its looks something like this.

<tbody data-bind="foreach: currentList">
    <tr>
        <td data-bind="text: someString, click: getDetails"></td>
        <td data-bind="text: someOtherString, click: getList"></td>
    </tr>
</tbody>

Now this displays two columns, and in the second column I want it to display initially as plain text with no drop down. I want to be able to click the field in the second column and create a drop down on the fly with a list of data i have stored. I have absolutely no idea how to accomplish this with jquery and knockout, any help would be appreciated!

Upvotes: 0

Views: 403

Answers (1)

Tomas Kirda
Tomas Kirda

Reputation: 8413

You may have more stuff in a cell and use "if" binding to show when flag is set to true:

<tbody data-bind="foreach: currentList">
    <tr>
        <td data-bind="text: someString, click: getDetails"></td>
        <td data-bind="text: someOtherString, click: getList">
            <div data-bind="if: showDropdown, template: { name: 'options-template', data: $root.options}">
            </div>
        </td>
    </tr>
</tbody>

So getList function would just set showDropdown property to true. It's just probably not very good idea to bind this click event on a cell itself, because every click inside this cell will fire this event.

And for dropdown options you can use template and data on view models root as options property. This is just a sample.

Upvotes: 1

Related Questions