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

Grid and MVVM template

7 Answers 187 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Leonid
Top achievements
Rank 1
Leonid asked on 10 Oct 2012, 03:31 PM

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>

 

 

 

 

7 Answers, 1 is accepted

Sort by
0
Leonid
Top achievements
Rank 1
answered on 11 Oct 2012, 09:04 AM

And at this forum do not answer?

Some posts without the answer!!!

0
Phil
Top achievements
Rank 2
answered on 28 Oct 2012, 04:22 PM
Hi:

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

Phil
0
Leonid
Top achievements
Rank 1
answered on 29 Oct 2012, 08:31 AM

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!

0
Phil
Top achievements
Rank 2
answered on 31 Oct 2012, 11:34 PM
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
0
Leonid
Top achievements
Rank 1
answered on 01 Nov 2012, 07:27 AM

Hi!

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

Yours faithfully, Leonid

0
Phil
Top achievements
Rank 2
answered on 02 Nov 2012, 12:28 PM
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
0
Leonid
Top achievements
Rank 1
answered on 02 Nov 2012, 12:50 PM

Hi
Thanks Phill



Tags
MVVM
Asked by
Leonid
Top achievements
Rank 1
Answers by
Leonid
Top achievements
Rank 1
Phil
Top achievements
Rank 2
Share this question
or