Home/ Questions/Q 8998233
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T23:59:47+00:00

I’m trying to build javascript editable grid with kendoui, I want edit popup that

  • 0

I’m trying to build javascript editable grid with kendoui,
I want edit popup that will only edit javascript data (no server)
The popup must apper after user click “edit” button on each row,
on the popup i want to display inputs with selected user last and first names.
my problem is :how can i access the databound data of row (since i there is no $data variable as far as i know)?

here is my HMTL

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>


  <script src="https://raw.github.com/rniemeyer/knockout-kendo/master/build/knockout-kendo.min.js"></script>  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div data-bind="kendoGrid: {data:users, sortable:true, columns:[
{ field: 'firstname', width: '100px' },
{ field: 'lastname', width: '100px' },
{ field: 'lastname', width: '100px' },
{ template: '<button>edit</button>', title: ''}
]}"> </div>
</body>
</html>

and here JS:

var userVM=function(nm,lnm){
var self=this;  

  this.firstname= ko.observable(nm);
  this.lastname= ko.observable(lnm);
  this.EditUser=function(u){


    selectedUser(u);
    $("#dialog").dialog();
  };


};
var users=ko.observableArray([new userVM('Shimon','Rapaport'),new userVM('Ahmed','ElChalil')]) ;

var selectedUser=ko.observable();



ko.applyBindings();

here is working demo (without edit popup)
http://jsbin.com/iwevek/1/edit

And here is working demo where i do the same thing without kendoui very simple
http://jsbin.com/epocov/9/edit

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am currently working on adding the ability to render Knockout templates within the grid (and list view) widgets. This would allow you to write normal KO bindings against your view model items.

    Without that support, you need a way to go from your button to the view model data. Here is a sample where the user’s have ids, the id is part of the button (data-id), and I use $.on to attach a delegated handler.

    From there you can use the id to find an appropriate user and update your selectedUser observable accordingly.

    $(".k-grid").on("click", ".editBtn",function() {
  var id = this.getAttribute("data-id"),
      match = ko.utils.arrayFirst(users(), function(user) {
          return user.id === id;
      });

  selectedUser(match);
});

    http://jsbin.com/ixewud/2/edit

    Once, you have selectedUser updated, then you could use your modal popup or whatever you want for editing.

    • 0