Questions on Kendo UI for jQuery Forum

1 answer

838 views

Listview with Popup/Window Editing Option

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>

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())

});

ListView

answered on 02 Apr 2014

2 answers

236 views

[Solved] Template binding syntax

Can someone explain why this method of style binding works in the following example.

http://trykendoui.telerik.com/@InternetSavage/UVaL

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image"
              style="width: #: thumbnailWidth #px; height: #: thumbnailHeight #px;" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>

But doesn't work in this example?

http://trykendoui.telerik.com/@InternetSavage/ijUw

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image"
              data-bind="style: { width: thumbnailWidth, height: thumbnailHeight }" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>

I have a similar template that I'm working on and can only get the style bindings to work with the former syntax but not the latter.

<script id="photoThumbnailTemplate" type="text/x-kendo-template">
    <div class="photo-thumbnail" data-bind="events: { mouseover: showEdit, mouseout: hideEdit }" style="width: #: thumbnailWidth #px; height: #: thumbnailHeight #px;">
        <a data-bind="click: showPhoto">
            <img data-bind="attr: { src: thumbnailUrl }" style="width: #: thumbnailWidth #px; height: #: thumbnailHeight #px;" />
        </a>
        <div class="thumbnailOverlay photo-thumbnail-overlay" data-bind="click: showPhoto" style="width: #: thumbnailWidth #px; height: #: thumbnailHeight #px;"></div>
    </div>
</script>

MVVM

answered on 01 Apr 2014

1 answer

119 views

Local Data Virtualization and Show/Hide Rows

Hello Kendo Masters,

We have a need to show/hide rows in a grid that is virtualized via local data.
We believe this is possible, as we see the grid adjust correctly when one a page is swapped out, after performing a show/hide of a row on the previous page.

However, if we perform a similar action on the last page...we do notice issues - namely we can't get to newly visible rows or hidden rows will cause permanent over-scroll.

What is the correct method, or set of methods for us to call in order to simulate a page change/update in this scenario?

Apologies if I am using the wrong terminology here...but, we simply want the scroll bar calculations to adjust after a row show/hide.

Regards!

Grid

answered on 01 Apr 2014

10 answers

371 views

[Solved] Initialization of two kendo widgets in different pages

I'm trying to set up two pages: 1 with a listview and another with a grid. The problem is that the grid isn't being initialized and isn't shown...

Important parts of the code:

<div id="app" class="contentPages">

<button data-bind="click: gotopage1">Page 1</button>

<button data-bind="click: gotopage2">Page 2</button>

</div>

<script id="page1" type="text/x-kendo-template">

<ul id="listView1" data-bind="source: photossource"></ul>

</script>

<script id="page2" type="text/x-kendo-template">

<div id="grid">

</div>

</script>

<script id="layout" type="text/x-kendo-template">

<header>Header</header><section id=content></section>

</script>

<script type="text/x-kendo-template" id="templatelistitem">

<div class="item">

<img data-bind="attr: { src: src }" />

<p data-bind="text: description" style="text-align: center"></p>

</div>

</script>

<script>

var

set1 = new Array();

for (var i = 0; i <= 71; i++) {

//fill set1

}

var appViewModel = new kendo.observable({

gotopage1: function () {

router.navigate("/");

},

gotopage2: function () {

router.navigate("/page2");

}

});

kendo.bind($("#app"), appViewModel);

var pageViewModel = new kendo.observable({

photossource: set1

});

var page1 = new kendo.View("#page1", { model: pageViewModel });

var page2 = new kendo.View("#page2", { model: pageViewModel });

var layout = new kendo.Layout("#layout");

var router = new kendo.Router();

router.route("/", function () {

layout.showIn("#content", page1);

});

router.route("/page2", function () {

layout.showIn("#content", page2);

});

$(function () {

router.start();

layout.render($("#app"));

layout.showIn("#content", page1);

});

kendo.bind($("#listView1"), pageViewModel);

var listview1, grid;

$(document).ready(function () {

listview1 = $("#listView1").kendoListView({

template: kendo.template($("#templatelistitem").html()),

change: onChange,

selectable: true

}).data("kendoListView");

grid = $("#grid").kendoGrid({

columns: [

{

field: "FirstName",

title: "First Name"

},

{

field: "LastName",

title: "Last Name"

}],

dataSource: {

data: [

{

FirstName: "Joe",

LastName: "Smith"

},

{

FirstName: "Jane",

LastName: "Smith"

}]

}

});

});

</script>

With the debugger I can see that the listview and the grid have different types after running the ready() method (see attachment).

Why this happen?

SPA

answered on 01 Apr 2014

2 answers

315 views

Kendo Ui with Emberjs.

I want to use kendoui with emberjs. Please suggest me if this will be the good option or not and how much active you support can be with emberjs?

Grid

answered on 01 Apr 2014

1 answer

113 views

Local Data Virtualization with Item Insert/Remove

Hello Kendo Masters,

We have a need to use local data virtualization with manipulation to the data source - namely record inserts and removals.

Is there a good sequence of function calls to make these operations appear as seamless as possible? (i.e. - add/remove occurs, grid refreshes, maintains scroll position, and virtual scroll bar has re-calculated).

Any input/advice is appreciated, and we don't mind writing code as long as the goal is achieved.

Regards!

Grid

answered on 01 Apr 2014

1 answer

236 views

Preload for smoother scrolling

Is there any way to preload more than one page in the datasource? My client has been complaining about the scrolling not being very smooth. It is noticeable that when all the records have been retrieved this slowness is gone. It would be nice to be caching results of the next (n) number of pages when you get to the next page.

Grid

answered on 01 Apr 2014

1 answer

138 views

Grid height

Hello,
I am wondering if it is possible to have a grid (inside a splitter) that spans the whole height of the page with just css?

I have attached a sample project, and what I would like to have happen is for the header to be right at the top of the page and the footer at the bottom regardless of the size of the browser window.

Thanks,

Grid

answered on 01 Apr 2014

6 answers

92 views

ToolTip Color 2014 Q1

It looks like the tooltip color behaviour may have changed between Q3 2013 and Q1 2014.

I have many column charts that use series.colorField to set the color of each column. The series color for these charts is irrelevant since each colorField is set for each column/point. The tooltips have always matched the column color, but since I upgraded the tooltips are all the same color now and match the series.

How can I have the tooltip colors for each column match the column/point again? Basically, how can I have my tooltips match the colorField value?

Kevin

Charts

answered on 01 Apr 2014

9 answers

900 views

[Solved] Grid event: Sort, Group

Hi there,

I looked through the docs and the forums, but is unable to find any hint about this... for KendoUI Grid, are we able to listen to sort and group events? If so, how could we do this?

Thank you!

Grid

answered on 01 Apr 2014