Questions on Kendo UI for jQuery Forum

14 answers

1.7K+ views

Grid Widths

We have a grid with variable width columns and the kendo grid seems to be lacking some functionality.

The grid sets all columns with unassigned widths at the same width.
If it could behave a bit more like an HTML table it would be much more useful.

I have several columns which are a static width which work fine.
However I have some wide and some narrow content columns of variable width.
I could fix the width of most of these but this would lose fluidity on larger screens and risk wasting space.
If I leave it to kendo then the short ones would have excess space and the longer ones either wrap excessively or lose content.

What would be great would be if columns narrower than the average available, shrunk to fit - freeing up additional width for the widest columns.
I know performance (which would likely be hit by doing this) is important to the kendo philosophy but so is functionality which would improve a lot.

As much as we all dislike them, html tables do this almost perfectly.

While intelligent column widths would be fantastic, another solution and very useful feature would be user resizable columns.
Easy drag-drop resizing would be an added feature and help out when the kendo widths are not appropriate.

Grid

answered on 20 May 2014

1 answer

113 views

Specifying values for column as well as a custom filter UI

Hi,

I've added a column to my grid that contains foreign key values, which I obviously don't want to show, so I've specified the values using the column.values configuration property. However, there are quite a lot of different options, so I want to change the column filter to have a combo-box rather than a drop down list, but the grid won't allow me to use values and specify a custom filter UI.

I've created a Kendo dojo example here.

Thanks.

Grid

answered on 20 May 2014

3 answers

136 views

Mobile Grid demo doesn't match colour of editable version

http://demos.telerik.com/kendo-ui/mobile/adaptive/grid.html

Click on 'edit this example', the '1' at the bottom is now orange and not blue as it is on the previous page

Also this doesn't have a Asp.Net MVC section, is this for any real reason?

I noticed this as I have the same problem. I have a website which will work on desktop/mobile. I am using a grid for both, the grid looks fine on the desktop but on mobile there are gaps between the cells and the bottom page color is orange

Grid

answered on 20 May 2014

1 answer

168 views

Strange problems with using MVVM bindings with templates

I'm trying to bind a pretty simple model to a template and keep getting an error "Cannot read property 'replace' of undefined". Please see the following fiddle:
http://jsfiddle.net/keithnolan/2EN3m/3/

I've tried to create an even simpler example in the below fiddle
http://jsfiddle.net/keithnolan/2EN3m/1/

This also doesn't work but doesn't give any error. If I remove everything except one single input then it works. I'm guessing I'm missing something pretty obvious in the above examples.

MVVM

answered on 20 May 2014

2 answers

1.1K+ views

Disabling grouping on one column in grid

I am initializing a kendo grid from a pre-populated html table and want to disable grouping on one column (as it is a free text column).

var grid = $(gridElementSelector).kendoGrid({<br> filterable: false,<br> sortable: true,<br> pageable: {<br> refresh: false,<br> pageSize: 10,<br> pageSizes: true,<br> buttonCount: 2,<br> input: false<br> },<br> groupable: true<br> }).data("kendoGrid");

I have tried the following after initialization and the column property "groupable" is set to false but the grid still allows me to drag the column header into the group area.

grid.columns[2].groupable = false;

Any ideas on how to make one column not groupable?

Grid

answered on 19 May 2014

2 answers

173 views

[Solved] Sortable wrapping editable Listview causing issues

Hello,

I am trying to build a UI which is basically an editable version of the Kendo Web Demo for Sortable ==> Handlers. However, attaching the Sortable to the editable Listview seems to disrupt the datasource detection and management of the create and update conditions. I've done a snippet at trykendoui.com but can't figure out how to save/share it. The complete code is below.

Forget the actual actions in the transport specification -- I just want to see that I can trap the events and get the IDs and Names as required -- I will be building up REST call URLs. Everything is fine while the list view is not a Sortable. However, when you remove the comments around the Sortable specification, then the following problems occur.

(1) on edit, the name field is not editable (or on my system, is somewhat editable but when the checkmark is clicked to save, the updated product name isn't available),

(2) on add new, the new product name doesn't appear to be available.

Delete still seems to work.

We're designing this functionality into several places in our UI, so an answer or workaround is really key. Thank you in advance!

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>

</head>

<body>

<div style="width: 600px;">

<div>

<a id="btnAdd" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>

</div>

<div>

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

</div>

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

<div class="item">

<span class="handler"> </span>

<span>#:ProductName#</span>

<a class="k-button k-button-icontext k-edit-button rfm" href="\\#"><span class="k-icon k-edit"></span></a>

<a class="k-button k-button-icontext k-delete-button rfm" href="\\#"><span class="k-icon k-delete"></span></a>

</div>

</script>

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

<div class="item">

<span class="handler"> </span>

<input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />

<span data-for="ProductName" class="k-invalid-msg"></span>

<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>

</div>

</script>

<script>

var products = [{

ProductID : 1,

ProductName : "Chai"

}, {

ProductID : 2,

ProductName : "Chang"

}, {

ProductID : 3,

ProductName : "Aniseed Syrup"

}, {

ProductID : 4,

ProductName : "Chef Anton's Cajun Seasoning"

}];

$(document).ready(function() {

var dataSource = new kendo.data.DataSource({

transport: {

create: function(options) {

console.log("datasource create :: ", options);

console.log("data :: ", options.data);

alert("datasource create: New product name = " + options.data.ProductName );

options.success(products);

},

read: function(options) {

console.log("datasource read", options);

options.success(products);

},

update: function(options) {

console.log("datasource update", options);

console.log("data :: ", options.data);

alert("datasource update: Altered product name = " + options.data.ProductName + " for product id "  + options.data.ProductID );

options.success(products);

},

destroy: function(options) {

console.log("datasource destroy", options);

console.log("data :: ", options.data);

alert("datasource destroy: Deleted product id = " + options.data.ProductID );

options.success(products);

}

},

schema: {

model: {

id: "ProductID",

fields: {

ProductName : { type: "string" },

}

});

var listView = $("#listView").kendoListView({

dataSource: dataSource,

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

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

}).data("kendoListView");

/* REMOVE COMMENT TO SEE ISSUES WITH MAKING THE LISTVIEW SORTABLE

$("#listView").kendoSortable({

cursor: "move",

handler: ".handler",

hint:function(element) {

return element.clone().addClass("hint");

},

placeholder: function(element) {

return element.clone().css("opacity", 0.1);

},

change: function(e) {

console.log("You sorted me!");

}

});

END OF COMMENT */

$("#btnAdd").click(function(e) {

listView.add();

e.preventDefault();

});

</script>

<style scoped>

.rfm {

float:right;

margin-right: 5px;

margin-top: 5px;

}

span.k-invalid-msg

{

position: absolute;

margin-left: 6px;

}

.item {

margin: 15px;

padding: 0 10px 0 0;

min-width: 200px;

background-color: #fff;

border: 1px solid rgba(0,0,0,.1);

border-radius: 3px;

font-size: 1.3em;

line-height: 2.5em;

}

.handler {

display: inline-block;

width: 30px;

margin-right: 10px;

border-radius: 3px 0 0 3px;

background: url('http://demos.telerik.com/kendo-ui/content/web/sortable/handle.png') no-repeat 50% 50% #ccc;

}

.handler:hover {

background-color: #2db245;

}

.placeholder {

width: 298px;

border: 1px solid #2db245;

}

.hint {

border: 2px solid #2db245;

border-radius: 6px;

width: 400px;

}

.hint .handler {

background-color: #2db245;

}

</style>

</body>

</html>

Sortable

answered on 19 May 2014

1 answer

179 views

Line Chart Legend Outside Chart Area

Hi There,

Using Kendo UI v2014.1.416, I have a need to place a legend well outside a chart area. With IE 11, I can set the legend's offsetX and offsetY and see the legend in the position I want. But the legend is not visible with FireFox and Chrome: it appears to be clipped. In this case, if I mess with the svg's width, I can get the legend visible. Is there any kind of workaround for this scenario?

If the only workaround is creating a HTML element that mimics the legend, how would one duplicate the hover and click events that the legend has. That functionality I can't do without.

Thanks

Charts

answered on 19 May 2014

2 answers

573 views

Animation Effect Options?

I'm trying to get my notifications to collapse, rather than just fade out. I've looked all over for a list of possible animations, but all i can find is a few examples (using fade and zoom), and a forum post from 2011 that said the animation types would soon be listed in the documentation for Window.

http://www.telerik.com/forums/list-of-animation-types

I've come across the "collapseVertical" option in the javascript, but that doesn't work for the notification. Here's what i tried:

var staticNotification = $("<span></span>").kendoNotification({
appendTo: $(".topStaticNotification"),
animation: {
close: {
effects: "collapseVertical"
}
},
hide: hideNotification
}).data("kendoNotification");

If i put in "fadeOut", then the notification behaves as normal. But it doesn't look like any other options can work there. Is this possible by just using the built in animation somehow?

My next thought was to just catch the "hide" event and manually collapse it (hence the hideNotification above). But, for whatever reason, this doesn't seem to work either.

Any ideas?

Notification

answered on 19 May 2014

6 answers

218 views

tabStrip in detail template doesn't render correctly with default theme in IE11

Hi Kendo Team,
I'm using something similiar to your Grid /Detail template example and it turns out that that tabstrip is showing a border-bottom line below the active tab.
To reproduce this, follow these steps:
1. Open your sample Grid / Detail template
2. Change the theme to Default
3. collapse/expand the theme dropdown.
I've attached a picture that shows this effect.

You can also check this in your tabStrip samples. Collapse and expand the theme dropdown.

Kind regards,
Oscar.

Grid

answered on 19 May 2014

6 answers

204 views

[Solved] External template being rendered into page?!?

This is driving me nuts. I have a simple list view bound to some external json data. The list view uses an external template. It's working fine. However, the raw template is also rendering to the HTML in the page. WHY?!?!

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

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

Category name: #=categoryName#, GL Code : #=glCode#<br><br>

</script>

<script>

$(function() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "@routes.Assets.at("data/glcodes.json")" ,

dataType: "json"

}