Using Window with MVVM

5 posts, 0 answers
  1. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 14 Nov 2013 Link to this post

    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?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 15 Nov 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 15 Nov 2013 Link to this post

    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.
  5. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 18 Nov 2013 Link to this post

    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.
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 19 Nov 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready