CODEWITHSUNDEEP
knockout.js
Piotr Perak
Piotr Perak

Reputation: 11088

Selecting row in table and displaying details

When user clicks row I want to display data in inputs so it is editable (don't want editing in table)

Here is the code: http://jsfiddle.net/APzK8/

Like you can see two inputs work and two don't. I'd prefer to have only Selected property in ViewModel. In real code every Config will have 15-20 properties.

Also if you could help me selecting first Config on page load. I can click the row with javascript but it is ugly. I think it should be defined in viewmodel. Tried many things but nothing worked.

Upvotes: 1

Views: 5413

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

Basically, you would need to access the values by doing Selected().Name rather than Selected.Name. So, you want to get the underlying value of selected and then access its Name property.

However, an easier/better way to do this is to use the with control-flow binding, which will protect you against null values (avoid having to write Selected() ? Selected().Name : null kind of statements).

It would look like:

<div data-bind="with: Selected">
        <label for="name">Selected.Name</label>
        <input type="text" id="name" data-bind="value: Name" />
        <label for="value">Selected.Value</label>
        <input type="text" id="value" data-bind="value: Value" />
        <input type="button" data-bind="click: $root.AddConfig" value="Add config" />
</div>

Here is a sample: http://jsfiddle.net/rniemeyer/APzK8/2/

To select the first config, I just initialized Selected to the first value in Configs.

Upvotes: 4

Related Questions