MVVM SPA application

7 posts, 1 answers
  1. Lance
    Lance avatar
    25 posts
    Member since:
    Apr 2013

    Posted 08 Jun 2014 Link to this post

    Hi,

    I am working on an application that uses Kendo SPA and Kendo MVVM. I've looked at the examples for both technologies and have it working mostly how I want but I am having a couple of issues. I want to have a CRUD page that uses a local object. The properties of this object are bound to the various controls and are updated through user input. Once the user is finished, this changed object will be sent to the server to update the database. One of the properties of this object is an array of objects which I want to bind to a Kendo Grid. This is the part I am having trouble with. I don't seem to be able to get the Grid to bind to this property. The grid displays and when I click on the Add button a row is created in the grid, but it never updates its datasource and when you hit Add again the data disappears from the new row and isn't saved.

    I have attached a working example which has this issue. The page in question is in the Menu option "Make a request" and side menu option of "Equipment Loan".
    Another minor issue is the main menu at the top sometimes does render and needs a page refresh.

    Please can you help me with these issues.

    Thanks
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 11 Jun 2014 Link to this post

    Hello Lance,

    We found a few problems in the code. The first was that the kendo scripts were included twice. First by your bundles and second by requirejs. You should only leave the latter by removing the kendo scripts from your bundleconfig.cs. 

    Then you should update your view model like this so the grid saves its changes:

    var viewModel = kendo.observable({
               title: 'Equipment Loan',
               currentRequest: myCurrentRequest,
               equipmentDetailSource: equipmentDataSource, // updated
               addEquipment: function (e)
               {
     
               },
               save: function ()
               {
                   if (this.hasChanges)
                   {
                       try
                       {
                           //viewModel.currentRequest.CreatorBems = CurrentUserBems.value;
                           //viewModel.currentRequest.ChangedByBems = CurrentUserBems.value;
     
                           //var isSuccessful = equipmentrequestdf.saveEquipmentRequest(viewModel.currentRequest);
                                                                                // updated
                           $("#elgrid").data("kendoGrid").saveChanges();


    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Lance
    Lance avatar
    25 posts
    Member since:
    Apr 2013

    Posted 11 Jun 2014 Link to this post

    Hi Atanas,

    Thanks for your reply.  I have made the changes you suggested and attached the project with these changes included, but I still have the same issues:
    1. The grid will create a new row but it will not update the underlying datasource so when you click Add again it replaces the row you just added with a fresh row.  When you hit Save, the viewModel doesn't have any information about the added rows.

    2. The menu doesn't seem to render unless you add kendo.aspnetmvc.min but if you add that then the grid variable in the following line of code "grid = $("#form-container").find("#elgrid").data("kendoGrid");
    " always returns undefined.

    Can you please provide a working version of my attached project with both of these issues resolved?

    Thanks 
  5. Lance
    Lance avatar
    25 posts
    Member since:
    Apr 2013

    Posted 11 Jun 2014 in reply to Lance Link to this post

    In my post when I said 'the grid variable in the following line of code "grid = $("#form-container").find("#elgrid").data("kendoGrid");'

    the line of code in the sample is actually:
    "grid = $("#elgrid").data("kendoGrid");"
  6. Lance
    Lance avatar
    25 posts
    Member since:
    Apr 2013

    Posted 11 Jun 2014 in reply to Lance Link to this post

    I've managed to resolve issue 2. with the menu.

    My html for the menu was:
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul id="nav-links" class="nav navbar-nav k-widget k-header k-menu-horizontal" role="menubar" data-role="menu" tabindex="0" data-bind="source: links" data-template="nav-template"></ul>
    </div><script type="text/x-kendo-template" id="nav-template">   
        <li class="k-item" role=menuitem><a class=k-link href="#: href #"><span class="#: icon #"></span> #: title #</a></li>
    </script>

    I changed it to:
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul id="nav-links" class="nav navbar-nav k-widget k-header k-menu-horizontal" data-template="nav-template" tabindex="0" data-bind="source: links"></ul>
    </div>

    <script type="text/x-kendo-template" id="nav-template">    
        <li class="k-item" role=menuitem><a class=k-link href="#: href #"><span class="#: icon #"></span> #: title #</a></li>
    </script>

    The changes were that I removed the role="menubar" and data-role="menu" attributes from the ul tag.  Now the menu renders and I don't need to reference kendo.aspnetmvc.min.

    I still have issue 1. with the grid.  Can you please provide a working version of my attached project with this issue resolved?

    Thanks
  7. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 12 Jun 2014 Link to this post

    Hello Lance,

    Sure. I had to modify the data source and your model a bit so the model has an "id" field (required for successful editing).

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Lance
    Lance avatar
    25 posts
    Member since:
    Apr 2013

    Posted 12 Jun 2014 Link to this post

    Hi Atanas,

    Those changes to the datasource fixed it although I also had to change "data-editable="{mode: 'inline'}" to "data-editable="{mode: 'incell'}" in the grid definition.

    Thanks so much for you help!
Back to Top
Kendo UI is VS 2017 Ready