This is a migrated thread and some comments may be shown as answers.

Listview with Popup/Window Editing Option

1 Answer 353 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 1
Stefan asked on 30 Mar 2014, 01:40 AM
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())
        });
        });

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 02 Apr 2014, 06:30 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ListView
Asked by
Stefan
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or