Listview with Popup/Window Editing Option

[Stefan]

Hello,

Im new to Kendo UI and just created my first listview as shown below.
Now when someone clicks one if the pictures,  I want to show the editing template inside a Kendo Window.
Would be great if someone could help, im pretty much lost... since I did not find any concrete example for that.

Thanks in advance!

block head
  title #{application} · Inventory
  link(rel='stylesheet', href='/lib/custom/custom.css')
  link(rel='stylesheet', href='/lib/kendo/styles/kendo.default.min.css')
  link(rel='stylesheet', href='/lib/kendo/styles/kendo.common.min.css')
  script(src='/lib/jquery/dist/jquery.min.js')
  script(src='/lib/kendo/js/kendo.web.min.js')

block content
  .container
    #example.k-content
      .demo-section
        #listView
        #pager.k-pager-wrap
      div#detailWindow

      script#template(type='text/x-kendo-template')
        <div class="product">
        <img src="https://mybucket12345.s3.amazonaws.com/#= image #" alt="#: name # image" />
        <h3>#:name#</h3>
        <p>#:description#</p>
        <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
        <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
        </div>
      script#editTemplate(type='text/x-kendo-tmpl')
        <div>
        <dl>
        <dt>Name</dt>
        <dd><input type="text" data-bind="value:name" name="name" required="required" /></dd>
        <dt>Tags</dt>
        <dd><input type="text" data-bind="value:tags" name="tags" /></dd>
        </dl>
        <dt>Description</dt>
        <dd><input type="text" data-bind="value:description" name="description" /></dd>
        </dl>
        <div>
        <a class="k-button k-update-button" href="\\\#"><span class="k-icon k-update"></span></a>
        <a class="k-button k-cancel-button" href="\\\#"><span class="k-icon k-cancel"></span></a>
        </div>
        </div>
      script.
        $(function() {
        var dataSource = new kendo.data.DataSource({
        transport: {
         read: {
          url: "/inventory/meshes/data/",
          dataType: "json",
          type: "GET",
          beforeSend: function (req) {
            req.setRequestHeader('X-CSRF-Token', '#{token}');
          }
        },
          update: {
            url: function (e) {
              return "/inventory/meshes/data/" + e._id;
          },
          dataType: "json",
          type: "POST",
          beforeSend: function (req) {
            req.setRequestHeader('X-CSRF-Token', '#{token}');
          }
          },
         create: {
          url: '/inventory/meshes/data/")',
          dataType: "json",
          type: "POST",
          beforeSend: function (req) {
            req.setRequestHeader('X-CSRF-Token', '#{token}');
          }
         },
         destroy: {
          url: function (e) {
              return "/inventory/meshes/data/" + e._id;
          },
          dataType: "json",
          type: "DELETE",
          beforeSend: function (req) {
            req.setRequestHeader('X-CSRF-Token', '#{token}');
          }
         }

        },
        pageSize: 15,
        batch: false,
        autoSync: true,
        schema: {
          parse : function(d) {
            for (var i = 0; i < d.length; i++) {
              if (d[i].meshes) {
                return d[i].meshes;
              }
            }
            return [];
            },
          model: {
              id: "_id",
              fields: {
                name: { type: "string" },
                tags: { type: "string" },
                description: { type: "string" },
                image: { type: "string" },
                size: { type: "string" },
                creator: { type: "string" }
              }
          }
        },
        parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
                return kendo.stringify(options.models);
            }
        }

        });
        $("#pager").kendoPager({
        dataSource: dataSource
        });
        $("#listView").kendoListView({
        dataSource: dataSource,
        pageable: true,
        navigatable: true,
        editable: true,
        selectable: true,
        autoBind: true,
        editTemplate: kendo.template($("#editTemplate").html()),
        template: kendo.template($("#template").html())
        });
        });

[Petur Subev]

Hello Stefan,

Basically the ListView does not support popup editing functionality like this Grid does. So with the built-in editing, the closest you can achieve is to enter editing mode when the image is clicked. To do so you should attach a click handler to the ListView and use the edit method.

Here is a small example:

http://trykendoui.telerik.com/@pesho/OYOk

In case you want to stick with the popup editing, you can check the following Grid example and apply the same approach with the Window to the ListView widget.

http://www.telerik.com/support/code-library/external-editing-container-for-batch-editable-grid

Kind Regards,
Petur Subev
Telerik