MVVM GRID POPUP EDITING

[FRANCOIS]

Hi,

I would like to see a working example of a MVVM Grid with 'popup editing' (edit button for each grid row that will trigger a popup containing a prefilled form representing the grid row that was selected/edited). I've been searching and searching but didn't find any clues or working example. Looks like Kendo MVVM solution is not ready for this...

Basically, I would like to see a MVVM equivalent to the following example:
http://demos.kendoui.com/web/grid/editing-popup.html


Thanks,
Frank

[OnaBai]

Hi Frank,

Not sure I understand your question but lets see if I can help you.

You say that you want an edit button for each row but you then say that you want to edit the selected row. Are you trying to define a single "edit" button in the grid toolbar or one per each row and edit the row that contains that button.

For the latter I do not understand how it differs from the demo example.
For the former you need to define an edit button in the toolbar:

var grid = $("#grid").kendoGrid({

    toolbar:[ "create", "edit" ],

    editable:"popup",

    selectable:"row",

    navigatable:true,

    columns:[

        { field:"field1", title:"Field 1" },

        { field:"field2", title:"Field 2" },

        { field:"field3", title:"Field 3" }

    ],

    dataSource:yourDataSourceDefinition

}).data("kendoGrid");

and then the following code:

// Edit implementation

$(".k-grid-edit").click(function (e) {

    var selected = grid.select();

    if (selected && selected.length > 0) {

        $.each(selected, function (idx, elem) {

            grid.editRow(grid.select());

        });

    }

});

I have written a tutorial on here.

[FRANCOIS]

OnaBai, first, thanks for trying to help, appreciated.

Your answer doesn't solve my problem, and sorry if my question might have confused you, I shouldn't have used the word 'selected' row. I really meant to have an edit button in an action/command column for every single record of the grid, and on-click, a popup appears and displays a form to edit the record (exactly like in the demo example link I've provided).

However, the 'key' word here is MVVM (Model-View-ViewModel, a different flavor of MVC approach), this is what will make the solution (in terms of coding / approach) completely different from the example I've linked. If you don't know yet about Kendo' new MVVM coding approach, I invite you to go and read about it on their website (MVVM Overview), and  there's even a demo section about it (MVVM Demo), but sadly lacking an example of what I am currently asking in this thread...

I really think that this MVVM approach is very promising for the future of Kendo UI, and that's why I currently want to explore this avenue by building a web app using this approach, but not sure it is mature enough for me if I can't resolve this issue.

Thanks

[OnaBai]

Yes, I know about MVVM but I actually didn't realize that it was the "key" word of your question and I though that key was edit+popup.
But still not sure about the question since it seems that you don't really care about edit + popup but about being able of using "bind" to bind the DataSource to the grid, is this correct?

[FRANCOIS]

No, my question is really about using MVVM + Grid + Edit row in a popup.

(but yes, at the end, I will also need to bind the grid to a datasource, but looking at the MVVM Demo examples, loading data into the grid with a mvvm approach shouldn't be a problem, the challenge is more on binding the edit button for every record of the grid, and then bind the save button on the popup form, the mvvm way!)