MVVM SPA application

[Lance]

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

[Atanas Korchev]

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

 

 

[Lance]

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 

[Lance]

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");"

[Lance]

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

[Atanas Korchev]

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

 

 

[Lance]

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!