Listview with Popup/Window Editing Option

2 posts, 0 answers
  1. Stefan
    Stefan avatar
    1 posts
    Member since:
    Feb 2014

    Posted 29 Mar 2014 Link to this post

    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())
            });
            });
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 02 Apr 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top