Questions on Kendo UI for jQuery Forum

0 answers

57 views

MVC Kendo Grid making AJAX calls when no results are returned from the server side

Hi,

Is there a way to prevent Grid's AJAX call when no results are returned. Looks like this is the default behviour.

Thanks
Ritu

Grid

asked on 13 Aug 2012

0 answers

243 views

Binding grid to object with null complex property

I have an data model for a recursive parent-child relationship like this:

    public class ActivityCategory
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
        public int? ParentCategoryID { get; set; }
        public ActivityCategory Parent { get; set; }

...

    }

The parent may be null.  I'm trying to set my grid up like this:
        @(Html.Kendo().Grid(Model)
                    .Name("ActivityCategoryGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(resource => resource.CategoryName).Title("Name");
                        columns.Bound(r => r.Parent != null ? r.Parent.CategoryName : "");

which fails with
Bound columns require a field or property access expression.
How should I handle this?

Grid

asked on 13 Aug 2012

0 answers

270 views

use custom image instead of SpriteImage for kendoTreeView

HI,

I'm using kendoTreeView and "coloricons-sprite.png" to show images(like folder/pdf... ) . But, i want to show custom image (like close) . Plz suggest me how can i make use of other images (say close button) instead of sprite Image .

Im using code :

<ul id="treeview">

<li data-expanded="true">

<span class="k-sprite folder"></span>

My Web Site

<ul>

<li data-expanded="true">

<span class="k-sprite folder"></span>images

<ul>

<li><span class="k-sprite image"></span>logo.png</li>

<li><span class="k-sprite image"></span>body-back.png</li>

<li><span class="k-sprite image"></span>my-photo.jpg</li>

</ul>

</li>

<li><span class="k-sprite html"></span>about.html</li>

<li><span class="k-sprite html"></span>contacts.html</li>

<li><span class="k-sprite html"></span>index.html</li>

<li><span class="k-sprite html"></span>portfolio.html</li>

</ul>

</li>

</ul>

<style>

#treeview .k-sprite {

background-image: url("../../content/web/treeview/coloricons-sprite.png");

}

.rootfolder { background-position: 0 0; }

.folder { background-position: 0 -16px; }

.pdf { background-position: 0 -32px; }

.html { background-position: 0 -48px; }

.image { background-position: 0 -64px; }

</style>

<script>

$(document).ready(function() {

$("#treeview").kendoTreeView();

});

</script>

TreeView

asked on 13 Aug 2012

4 answers

392 views

close kendoTabStrip when clicked on removeButton

HI ,

I 'm using  "kendoTabStrip" .

I'm trying  to achieve When i click on DeleteImage , the tab should be closed (removed) . But Im unable to get same .
Please suggest me where I'm going  wrong . Following are codes I'm using :

Thanks,
Pawan

<div id="dtabstrip">

<ul>

<li class="k-state-active">First Tab

<img src="images/DeleteIcon.gif" style="padding-left: 10px; z-index: 1111" onclick='DeleteTabs(this);' />

</li>

<li>Second Tab</li>

</ul>

<div>

1111111sdffds</div>

<div>

2222ssadasfas</div>

</div>

var dtabStrip = $("#dtabstrip").kendoTabStrip({

animation: {

open: {

effects: "fadeIn"

},

close: {

duration: 200,

effects: "fadeOut"

}

});

function DeleteTabs(ImgObj) {

var aa = $(ImgObj).closest("li").text() ;

dtabStrip.remove($(obj).closest("li"));

}

TabStrip

answered on 13 Aug 2012

0 answers

114 views

Nested Grid Template Section

I think this was raised previously but I could not find it. Nested grids do not seem to have a way to handle field substition within a template region.

columns.Bound(o => o.Id).ClientTemplate("#=Id#");

If this is used within a nested grid this gets replaced prematurely by the Id of the parent row. Can anyone confirm

If there is a work around for this
If this has been fixed because I am not seeing it working in the latest version

Thanks

Grid

asked on 13 Aug 2012

1 answer

144 views

grid helper column level filter/sort

I am having a problem getting column level filtering and sorting to work when using the html helper.

I assumed the following would be a column level override, yet this doesn't disable either sorting or filtering.
columns.Bound(o => o.Id).Sortable(false).Filterable(false)

If I don't add the filterable method to the grid then filters don't show for any columns.
//.Filterable()

Yet writing the Javascript by hand it seems setting the column level works. It seems like the column level isn't rendering the correct markup through the helper. Is there a way to access an existing grid and change these options I want to try to avoid rewriting the grids in Javascript which would not only be a pain but defeat the usefulness of the html helper.

I have tried accessing the current Javascript value for a given column to no prevail

var grid = $("#grid").data("kendoGrid");
document.write(grid.columns[1].filterable());
grid.columns[1].filterable(false);
grid.refresh();

Grid

answered on 13 Aug 2012

3 answers

398 views

What are the possible types of data transports?

I've seen references to "odata" and "aspnetmvc-ajax", but what are the others? I'm specifically looking for the default type that would be called manually in: kendo.data.transports["somevalue"]

Data Source

answered on 13 Aug 2012

1 answer

155 views

Manipulate selected data point (marker) on line chart

Hello,

I'm using the series.type="line" chart. I was wondering if these are possible?

If someone clicks on a data point (marker), I was wondering if you can manipulate the colour, size, etc. The only way i could do this was by changing the properties in the DOM element itself, but then when i hover to a new point, the selected data point reverts back to the default settings. Is there no way to change colours and sizes of each data point or does it have to be a standard throughout the entire chart.

Thanks.

Charts

answered on 13 Aug 2012

5 answers

462 views

Error thrown when editing data from read-only remote source

I'm fetching data form a remote source using the DataSource transport.

The remote is read-only, so I only specify the read-object in the transport, like so:

transport: {

read: {

data: {

f:'getOrderSuggestion'

}

The data is to be edited locally in a Kendo Grid and then posted manually to another server.

The problem is, as soon as the user finishes editing a row, the Grid tries to persist the changes. The sync()-method of the DataSource is called and crashes when the RemoteTransport object crashes as it tries to fetch for the update method, which does not exists.

The error:

Uncaught TypeError: Cannot read property 'data' of undefined kendo.web.js:5038
1. Class.extend.setupkendo.web.js:5038
2. Class.extend.updatekendo.web.js:5025
3. Observable.extend._promisekendo.web.js:5339
4. f.extend.Deferredjquery.min.js:2
5. Observable.extend._promisekendo.web.js:5338
6. Observable.extend._sendkendo.web.js:5365
7. Observable.extend.synckendo.web.js:5265
8. Widget.extend.saveRowkendo.web.js:17569
9. Widget.extend.editRowkendo.web.js:17411
10. f.event.dispatchjquery.min.js:3
11. f.event.add.h.handle.ijquery.min.js:3

The code (from the GPL-version of Kendo UI):

var Remote Transport = Class.extend({

// ....

// Other stuff

// ....

setup: function(options, type) {

options = options || {};

var that = this,

parameters,

operation = that.options[type], // <<<----- undefined if transport.update isn't defined and update is called

data = isFunction(operation.data) ? operation.data() : operation.data;

options = extend(true, {}, operation, options);

parameters = extend(data, options.data);

options.data = that.parameterMap(parameters, type);

if (isFunction(options.url)) {

options.url = options.url(parameters);

}

return options;

}

});

Is there any way of making the DataSource fetch remote data, but edit only locally?

Data Source

answered on 13 Aug 2012

0 answers

184 views

Populate list view

Hi, I am new to Kendo UI. I want to populate a listview from JSON object. My JSON obj has image and image name. I want to display image and it's name under that. Where should I start ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Applicatios:</title>

<script src="../lib/script/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="../lib/script/jquery-1.7.2.js" type=""></script>

<link href="../styles/kendo.common.min.css" rel="stylesheet" />

<link href="../styles/kendo.default.min.css" rel="stylesheet" />

<link href="../styles/kendo.blueopal.min.css" rel="stylesheet" />

<script src="../js/jquery.min.js" type=""></script>

<script src="../js/kendo.web.min.js" type=""></script>

</head>

<body>

<div id="example" class="k-content">

<div id="listView"></div>

<div id="pager" class="k-pager-wrap">

</div>

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

<div class="product">

<img src="../../${image}.png" alt="" />

<h3>${name}</h3>

</div>

</script>

<script type="">

$(document).ready(function ()

{

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "images_json.txt",

dataType: "json"

}

},

schema: {

data: "results"

}

});

$("#pager").kendoPager({

dataSource: dataSource

});

$("#listView").kendoListView({

dataSource: dataSource,

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

});

</script>

</div>

<style type="">

.product

{

float: left;

width: 270px;

height: 110px;

margin: 10px;

padding: 5px;

}

</style>

</body>

</html>

Appreciate your help.
Thanks.

ListView

asked on 13 Aug 2012