This is a migrated thread and some comments may be shown as answers.

Using Window with MVVM

4 Answers 75 Views
Window
This is a migrated thread and some comments may be shown as answers.
Stacey
Top achievements
Rank 1
Stacey asked on 14 Nov 2013, 09:19 PM
I am attempting to use the Kendo Window system with an MVVM model, where the window pops up to edit data, and then returns it to the opening page, but I am having a difficult time finding any examples of this... Even the documentation seems very unhelpful. Are there any samples of such a thing?

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 15 Nov 2013, 03:01 PM
Hi Stacey,

It is unclear what data you would like to edit and what an "opening page" is. If you are displaying the data in a Grid widget you may use the build-in popup editing. For reference please see this demo.
In case you would like to use an external editor, my suggestion is to check this code library project which demosntrates how to edit dataSource's data via MVVM.

We will also appreciate if you can give us a concrete feedback regarding the documentation - what exactly is missing/unclear and could be improved. Thank you in advance.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stacey
Top achievements
Rank 1
answered on 15 Nov 2013, 07:04 PM
What I am trying to do has nothing to do with a grid.

I am attempting to find an example of having a view model, with some data. That data is somehow written to the page - this is something I can already do. 

But I want to be able to click on certain data elements and open up a Kendo Window with a customized form, to edit the data, and once I am done editing, it
returns it back to the view model on the main page.
0
Stacey
Top achievements
Rank 1
answered on 18 Nov 2013, 06:50 PM
So is this just impossible?

I simply have a ViewModel, and it is drawing to the page, like this ...
{
 Name: "Root",
 Collection: [
  {
     Name: "Item1",
     onEdit: function(e){
        // open window and edit Item1
     }
  },
  {
    Name: "Item2",
    onEdit: function(e){
        // open window and edit Item2
    }
  }
]
}
I am not using a grid. I just want to pass the e data to a Kendo Window, so that it can be edited, and keep it bound. I cannot figure out how to get it there though and work with the data binding.
0
Alexander Valchev
Telerik team
answered on 19 Nov 2013, 12:42 PM
Hi Stacey,

Basically the approach is the same as the one demonstrated in the code library project.

I just want to pass the e data to a Kendo Window, so that it can be edited, and keep it bound. I cannot
figure out how to get it there though and work with the data binding.


The binding process is:
  • create ViewModel field called 'selected' and bind the editor form to it;
  • initially the selected object should have empty value (empty object);
  • when the user marks given record for editing, you should get a reference to that object and set it as a value of the 'selected' field;
  • once the ViewModel has changed, the editor form will automatically update

For your convenience I updated and attached the previous sample. The approach could be used with both DataSource and Observable array as source.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Window
Asked by
Stacey
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Stacey
Top achievements
Rank 1
Share this question
or