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

6 posts, 0 answers
  1. preet
    preet avatar
    6 posts
    Member since:
    Jan 2011

    Posted 24 Jun 2012 Link to this post

    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. 
  2. John
    John avatar
    1 posts
    Member since:
    May 2012

    Posted 07 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Tito
    Tito avatar
    2 posts
    Member since:
    Sep 2012

    Posted 29 Oct 2012 Link to this post

    I have the same couriosity, how does it fit with the .Net MVC HTML Helpers?
  5. johnsk
    johnsk avatar
    8 posts
    Member since:
    Sep 2012

    Posted 31 Oct 2012 Link to this post

    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 :-)
  6. Tito
    Tito avatar
    2 posts
    Member since:
    Sep 2012

    Posted 01 Nov 2012 Link to this post

    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
  7. preet
    preet avatar
    6 posts
    Member since:
    Jan 2011

    Posted 01 Nov 2012 Link to this post

    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.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready