1

Here is the scenario

  1. I want to display data in a kendo grid and on selecting a row on that grid, it should display details of that row in a form with textboxes. User will be able to update the values and it should get reflected in kendo Grid. Am using knockout-kendo.js for this.

    Here is the jsfiddle link - http://jsfiddle.net/saisworld/u7YnY/

    Am able to display and bind data to grid.But on clicking a row in grid. Its not getting reflected in the form. Not sure what am missing. Please advise.

  2. I also want to test the same scenario with Kendo UI mvc wrappers to display the grid(instead of using declarative initilialization as above example) and Knockout-kendo.js framework together and see if they can go together.

Here its able to bind the data to grid, then am able to use knockout-kendo or just knockout to get the data from grid and display in form but its not getting updated back in grid.

<p class="k-block k-header k-shadow"> Kendo Grid - Companies</p>
@(Html.Kendo().Grid(Model)
        .Name("somegrid")
        .DataSource(ds => ds.Ajax().PageSize(10).ServerOperation(false))
        .Columns(c =>
        {
            c.Bound(p => p.CompanyName).Width(2);
            c.Bound(p => p.FullAddress).Width(2);
        })
        .Selectable(s => s.Mode(GridSelectionMode.Single))
        .Events(e=>e.Change("onChange"))
        .Pageable()
        .Sortable()
        .Filterable()
  )

<form class="kCompaniesClass k-block k-info-colored">
<div class="k-header k-shadow">Company Details - using Kendo MVVM</div>
<table>
    <tr>
        <th>Company Name</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>
            @Html.TextBox("CompanyName",null,new Dictionary<string, object>{{"data-bind","value: CompanyName"}})
        </td>
        <td>
            @Html.TextBox("Fulladdress",null,new Dictionary<string, object>{{"data-bind","value: FullAddress"}})
        </td>
    </tr>
</table>

</form>


 <script type="text/javascript">
   var viewModel = {
    CompanyName: ko.observable(""),
    FullAddress: ko.observable("")
 };


function onChange(e) {
    grid = e.sender;
    var koCompanyItem = grid.dataItem(this.select());
    viewModel = koCompanyItem;
   /* ko.cleanNode(document.getElementById("somegrid"));
    ko.applyBindings(viewModel, document.getElementById("somegrid"));*/
    ko.applyBindings(viewModel);
}

ssilas777
  • 9,672
  • 4
  • 45
  • 68
Sai
  • 629
  • 1
  • 8
  • 26
  • For 1. there is a bug in your loadSelectedItem function. Where you have **self.selectedItem = itemsent;** you should have **self.selectedItem(itemsent);**. I'm not sure about 2. (It looks more like kendo and knockout than knockout-kendo) but as it's been a long time since the question was posted I would be interested to find out if/how you ended up combining Kendo MVC with Knockout. – Alan Gee Nov 02 '13 at 15:15
  • I couldnt get the Kendo MVC wrappers and knockout work together. So I ended using kendo mvvm framework without mvc wrappers. – Sai Nov 07 '13 at 15:16

0 Answers0