How does Kendo UI for ASP.NET MVC and MVVM fit together

[preet]

I am new to MVVM and I am just confused with what Kendo UI for asp.net mvc bring new to the table. I read about Kendo UI and MVVM and it makes sense but how does it benifit .net developer.
Can we actually use MVVM with kendo ui for asp.net mvc extensions. If yes, could someone please provide an example. If not, then how does it make things different from telerik extensions for asp.net mvc. 

[John]

I'd also really appreciate an example on Kendoui, ASP.NET mvc and MVVM. I'm coming from a more traditional asp.net mvc background and trying to get a handle on the new client technologies.

[Tito]

I have the same couriosity, how does it fit with the .Net MVC HTML Helpers?

[johnsk]

A really nice sample to fit it all together will help us all greatly! Come on Kendo guys show us the magic! We are counting on you :-)

[Tito]

Hi,

I successfully tried using the HTMLAttribute from the HTML Helper, it works like I imagined, but I don't know if there is a better way of doing it.

Let's say that you have a grid using Kendo UI MVC.

@( Html.Kendo().Grid(Model)

                  .Name("UsersPermissionsGrid")

                  .DataSource(ds => ds.Ajax()

                                  .PageSize(50)

                                  .Model(m =>

                                  {

                                      m.Id(p => p.UserDetail.UserID);

                                  })

                          .Read(r => r.Action("ReadUsersPermissionGrid", "UserAdministration"))

                  )

                  .Columns(columns =>

                  {

                      columns.Bound(p => p.UserDetail.FirstName);

                      columns.Bound(p => p.UserDetail.LastName);

                      columns.Bound(p => p.UserDetail.CompanyName);

                      columns.Bound(p => p.UserDetail.Email);

                      columns.Bound(p => p.UserDetail.Country);

                  }

                  )

                  .Pageable()

                   .Navigatable()

                   .Sortable()

                   .Events(e => e.Change("onChange"))

                   .Filterable()

                   .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

  )

And you want to bind it to a form. I used the 3rd attribute of the standart HTML Helper HtmlAttribute.

<form class="personal-information-class k-block k-info-colored">

        <div class="k-header k-shadow"> Personal Information </div>

    <table>

        <tr>

            <td> @Html.Label("FirstName")</td>

            <td> @Html.Label("LastName")</td>

            <td> @Html.Label("Company")</td>

              

        </tr>

        <tr>

            <td> 

                @Html.TextBox("FirstName", null, new Dictionary<string, Object> { { "data-bind", "value: UserDetail.FirstName" } })

                @Html.ValidationMessage("FirstName")    

            </td>

            <td>

                @Html.TextBox("LastName", null, new Dictionary<string, Object> { { "data-bind", "value: UserDetail.LastName" } })

                @Html.ValidationMessage("LastName") 

            </td>

             <td>

                @Html.TextBox("Company", null, new Dictionary<string, Object> { { "data-bind", "value: UserDetail.CompanyName" } })

                @Html.ValidationMessage("Company") 

            </td>

               

        </tr>

        <tr>

            <td>  @Html.Label("Tel")   </td>

            <td>@Html.Label("Email") </td>

            <td>@Html.Label("CompanyNumber", "Company's Ref Number") </td>

        </tr>

</form>

And later on you writte the javaScript that will bind the form to the grid using kendo.Observable each time you select a different row on the grid, using the event onChange. This is something that I think can be improved, just binding it once.

<script type="text/javascript">

  

    var viewModel = kendo.observable({

        UserDetail: {

            FirstName: "",

            LastName: "",

            CompanyName: "",

            Email: "",

            Country: "",

            Tel: "",

            Email: "",

            CompanyNumber: "",

            AddressLine1: "",

            AddressLine2: ""

        }

    });

  

    function onChange(e) {

        grid = e.sender;

        var currentDataItem = grid.dataItem(this.select());

        viewModel = grid.dataItem(this.select()).UserDetail;

        kendo.bind($(".personal-information-class"), viewModel);

    }

  

</script>

Best Regards,
Tito

[preet]

Thanks Tito, finally someone is taking initiative. I would much appreciate if Telerik staff could post a full example of how it all fits. I am sure it would be all so easy for front end developers but its all new to someone like me who is from traditional asp.net developer.