Grid and MVVM template

[Leonid]

I have Grid
I want to use MVVM template, at creation of new record and editing of existing record. A template I start from Grid.

At start of the form from a template the data from a line Grid should be loaded. After editing of the form the data remains in a database.

How to obtain the data from row of Grid and to initialize ViewModel?
How to transfer the data in the controller for preservation?

  

 

  $(document).ready(function () {

        ViewModel = kendo.observable({

            Id: null,

            UserType: null,

 

            isSaved: false,

            isDisabled: true,

 

 

 

            edit: function (e) {

                this.set("isDisabled", false);

            },

 

            cancel: function (e) {

                this.set("isDisabled", true);

            },

 

            reset: function (e) {

                this.set("id", null);

                this.set("UserType", null);

 

            },

 

            load: function (e) {

                loadData();

            }

 

        });

 

        kendo.bind($("#form"), ViewModel);

 

var validator = $("#form").kendoValidator().data("kendoValidator");

 

 

//Button Send data to Controller

        $("button").click(function (e) {

            e.preventDefault();

 

            if (validator.validate()) {

              alert("Yes!");

 

             // How to send the data to the controller with dataSourse?

 

                 // Set an example please! 

                   

 

 

            }

            else {

                alert("No!");

            }

        });

 

 

    });

 

 

function loadData() {

    var dataSource = new kendo.data.DataSource({

                transport: {

                    read: {

                        url: '@Url.Action("_Details")',

                        data: { id: $("#type").val() },

                        dataType: "json",

                        type: "POST",

                        contentType: "application/json; charset=utf-8"

                    },

 

             schema: {

                 model: {

                     id: "id",

                       fields: {

                       Usetype: { type: "String" },

                            }

                        }

                    }

                },

 

 change: function() {

 

 //Here loading of the data

 //How here to initialize ViewModel??????????

//

 

 

  ViewModel.set("id ", this.view()[0].id);

  ViewModel.set("UserType ", this.view()[0].UserType);

 

                }

            });

 

        };

    

</script>

 

 

 

 

[Leonid]

And at this forum do not answer?

Some posts without the answer!!!

[Phil]

Hi:

I do not have your answer, but I would not put (scope) the datasource inside of loaddata method.

Phil

[Leonid]

Hi!

Thanks Phil for the answer.
Unfortunately I cannot provide popup editing of the data from Grid.
I had still problems

1. I set width of a window of editing 1000 px. The window increases but the context remains in a window of the same size. Thus I try to change CSS attributes, to write function on event Edit. It turns out Nothing.
2. At occurrence PopUp in a window given Grid data are not displayed
3. Very slowly works.

Unfortunately I only start to work with KendoUI and much for me is not clear.

At this forum almost do not answer. From my 5 questions you the first have answered. Thank you very much!!

But rescue of the rolling - rolling a handwork. I have understood it. I certainly will a little more work with Kendo. Library quite good. 

Good luck!

[Phil]

Hi:

I went with row selection and a window. not popup:

@{

    ViewBag.Title = "GridDetails";

}

<script type="text/javascript">

    $(document).ready(function () {

        //

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

            groupable: true, scrollable: true,

            sortable: true, pageable: true, filterable: true,

            selectable: "row",

            dataSource: {

                transport: { read: { url: "/Grid/GetEmployees"} },

                pageSize: 5

            },

            columns: [

                { title: "Id", field: "EmployeeID", width: 80 },

                { title: "Last", field: "LastName", width: 100 },

                { title: "First", field: "FirstName", width: 100 },

                { title: "Title", field: "Title", width: 200 },

                { title: "City", field: "City", width: 200 },

                { title: "Region", field: "Region"}]

        }).data("kendoGrid");

        // bind to the select event

        grid.bind("change", function (eArg) {

            var id = grid.select().get(0).all[0].innerHTML;

            var kW = $("#kjWindow").kendoWindow({

                title: "Employee Detail",

                width: "750px",

                height: "480px",

                content: "/Grid/EmployeeDetail_View/" + id,

                modal: true,

                actions: ["Close", "Refresh", "Maximize"]

            }).data("kendoWindow");

            kW.open();

        });

    });

</script>

<fieldset><legend>Employees</legend>

    <br />

    <div id="kjWindow"></div>

    <div id="kjsimpleGrid">

 

    </div>

</fieldset>

  

Phil

[Leonid]

Hi!

Thanks Phill
You have offered an interesting way.
I will by all means try.

Yours faithfully, Leonid

[Phil]

Hi:
Once you're in the window if you want to go to another window, I suggest that you get the current window and basically replace yourself.

var win = window.parent.$("#kjWindow").data("kendowWindow");

Phil

[Leonid]

Hi
Thanks Phill