Need some help (Lists)

[Samuel Grave Silva]

Hello guys!

I have a situation here, and I need some help.

I got a page with a grid. This grid is populate by KnockoutJS.

The first column, is a radio, with the "id" as the bind data.

Below this grid, I have some tabs with texts areas.

Now, I need to put the data from the viewModel on textarea, by the selected radio Id.

My model looks like it;

id,

name,

description.

So, when I select the first item in grid, the textarea should receive the description of that id.

I can do it?

My first idea was to query the "description" and bind it in my view when I click on radio, but I don't know if I'll lose the info on grid.

Thanks, mates!

Cheers!

[Gunnar Liljas]

Something like this?

http://jsfiddle.net/dd6xojz9/

--
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/d/optout.

[Gunnar Liljas]

Sorry...

http://jsfiddle.net/dd6xojz9/1/

[Richard Thomas]

I do this scenario a fair bit (select an item from a grid and edit it.) Here's what I do.

First,  my view model contains the list, it is not the list itself. This allows me to easily add other properties and methods. So, it would look like:

function viewModel() {

    var self = this;

    self.list = ko.observableArray([]);

    self.selectedItem = ko.observable();

}

You could prepopulate the array, or you could use another function to get the items.

So, the grid is bound to the list, like so:

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

The textareas are bound to the selected item using the "with" binding, like so:

<div data-bind="with: selectedItem"><textarea data-bind="textInput: description"></textarea></div>

Finally, you need a method to set the selectedItem from the grid. I use a click event on the TR element, but you could really use anything. So, the HTML is:

<tr data-bind="click: $root.editItem">

Then you need to implement this method in the view model:

function viewModel() {

    var self = this;

    self.list = ko.observableArray([]);

    self.selectedItem = ko.observable();

    self.editItem = function(item) {

        self.selectedItem(item);

    }

}

[Samuel Grave Silva]

Thanks, Gunnar and Richard. It's exactly what I needed

Cheers!