Questions on Kendo UI for jQuery Forum

1 answer

67 views

StatusBar overlay view - need fix for Cordova 3.0

In my Cordova 3.0 project (I want to use 3.0 instead of 3.2) the view in iOS7 appears below the status bar. I tried the margin-top:20px solution, but when I click a text box and the view goes up to focus on the input field and I click done, the view stays at 0px from the top most part.

Any code that solves this issue for iOS7 and Cordova 3.0. I know that the StatusBar plugin fixes this, but no for Cordova 3.0.

General Discussions

answered on 02 Apr 2014

1 answer

416 views

Upload file store in database as binary

Hi,

I wanted to know if it was possible to save the posted file in a database table as binary. I am using asp.net and an web service (asmx). My database table is

ID (int),
Filename varchar,
Filedata (varbinary).,
title (varchar),
Description (varchar)

A user uploads a document and gives it a title and description. I know I can use a separate web form page as the saveurl and get the posted file, but I am struggling with returning the ID to store the title and description.

Any help greatly appreciated.

Upload

answered on 02 Apr 2014

1 answer

185 views

Force always load the content of a div

Hi friends,

I have a simple html+css+js app .

I use a structure of tabs linked with divs for the sections menu.

My problem is that i have in a section ( on a div ) only a reference of a img that is on a remote url , but this img maybe will change, but have always the same name. I want to know if there is some method to force always i click on the tab ( div ) of this section to reload the content of this div, or reload always this img, because in this moment only load when the app is launched the first time.

Thx you very much.

<div id="tabstrip-3" data-role="view" data-title="3">

<div class="test" id="offers">

<img src="http://www.remoteurl.com/test/image.jpg" height="100%" width="100%"/>

</div>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#/" data-icon="home">1</a>

<a href="#tabstrip-2" data-icon="organize">2</a>

<a href="#tabstrip-3" data-icon="favorites">3</a>

<a href="#tabstrip-4" data-icon="about">4</a>

</div>

TabStrip (Mobile)

answered on 02 Apr 2014

1 answer

800 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

202 views

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

107 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

284 views

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

273 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

91 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

203 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