Questions on Kendo UI for jQuery Forum

1 answer

107 views

Hi,

I selected the Metro Theme for my application, but I will need the application to responsive (for mobile and tablet).

What is selector CSS should use?

thanks

General Discussions

answered on 09 Feb 2015

1 answer

364 views

Custom Row under column headers

Hello,

Is it possible maybe on the databinding event to add 2 rows to the top of the grid, right under the column headers? I would like these 2 rows to be static, matching the column widths of the header whilst not scrolling with the rest of the data in the grid. We have a requirement to show static Totals and Grand Totals rows right under the grid header(not using aggregate function) so that users may view while scrolling through the data. Hope i explained that well enough. Would appreciate some help in the right direction.

Thanks!

Grid

answered on 09 Feb 2015

3 answers

140 views

Navigation and edit mode is interrupted after selecting a value from a kendoComboBox cell template

Hi, I have taken an existing example, simplified it, and used it to work out how to use a kendoComboBox as a cell template. Looking at various doco, I almost have it working correctly (as in the attached)

I also want to have this grid to be able to stay in edit mode, so the user can tab from cell to cell and edit, tab to the next, select from a combo, tab to the next etc.

When the tab gets to my combo, once I select from this(using Alt-Down arrow, and then tab), the value is set, but the cell goes out of edit mode (as in attached video snip - where I use arrow keys in the combo, and then tab to select) I would like the tab to select the value, and then go to the next cell (staying in edit mode)

Is there a ways of doing this?

The one other thing I would like is to when we land in the combo cell, to have the text selected (as in the combo under the grid, which uses the following block...

combobox.input.on("keydown", function (e) {

var filter = combobox.dataSource.filter() || { filters: [] };

if (e.keyCode === 9 && filter.filters[0]) { //TAB

combobox.select(combobox.current().index());

}

});

I have tried to do this in my cell template (as is in the commented out code), but I just cannot get it to work..

function categoryDropDownEditor(container, options) {

var input = $('<input name="' + options.field + '"/>');

input.appendTo(container);

input.attr("name", options.field);

var combo = input.kendoComboBox({

autoBind: true,

filter: "contains",

placeholder: "select...",

suggest: true,

dataSource: combo2Data,

dataTextField: "description",

dataValueField: "code"

});

//input.on("keydown", function (e) {

// var filter = combo.dataSource.filter() || { filters: [] };

// if (e.keyCode === 9 && filter.filters[0]) { //TAB

// combo.select(combo.current().index());

// }

//});

}

Is there a way I can get these 2 features working?

Thanks in advance for any help!

Grid

answered on 07 Feb 2015

1 answer

296 views

ComboBox Initial Value with Angular

Hello,

I am really stuck for some hours now...
Is there any example available how to bind a ComboBox with an initial value to a MVC backend in an Angular frontend?

I have tried so many ways. Sometimes the ID is displayed instead of the name. Or the ComboBox shows only the placeholder value.

Here, test.companyId is predefined in the controller with an existing ID.

<select kendo-combo-box="kendoObject" name="test" ng-model="test.companyId" k-options="companyOptions" />

Here is my Angular controller:

$scope.companyDataSource = {

type: 'aspnetmvc-ajax', // I think I need the DataSourceRequest object for serverside filtering

serverFiltering: true,

transport: {

read: {

url: '/Company/Autocomplete',

data: function() { return { id: $scope.test.companyId } } // server needs to know initial value so that it is surely included in the response

}

},

schema: {

data: "Data",

total: "Total",

errors: "Errors",

model: {

id: "id",

fields: {

id: { "editable": false, "type": "number" },

name: { "type": "string" }

}

$scope.companyDataSourceOld = { // other variant with plain json

type: 'json',

serverFiltering: true,

transport: {

read: {

url: '/Company/AutocompleteOld',

data: function() { return { id: $scope.test.companyId } }

}

},

}

$scope.companyOptions = {

dataTextField: 'name',

dataValueVield: 'id',

filter: 'contains',

placeholder: 'Select company...',

dataSource: $scope.companyDataSourceOld,

}

The server request is always performed without any errors. The element with the predefined ID is contained in the response.

when I query kendoObject.value() in the browser console, I get an empty string....

What am I missing here? hmmm....

Thank you!
Chris

ComboBox

answered on 06 Feb 2015

3 answers

1.4K+ views

[Solved] asp.mvc css minification breaks kendo bootstrap

In a asp.net mvc 4.5 web app using kendo bootstrap I get an 404 error when my css bundle is minified.

Setup
Bootstrap v3.1.1
Kendo UI Complete v2013.3.1424

Web.config: <system.web><compilation debug="false" targetFramework="4.5" />

BundleConfig.cs

public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
bundles.Add(new StyleBundle("~/Content/allcss").Include(
"~/Content/bootstrap.min.css",
"~/Content/kendo/kendo.common-bootstrap.min.css",
"~/Content/kendo/kendo.bootstrap.min.css",
"~/Content/kendo/kendo.dataviz.min.css",
"~/Content/kendo/kendo.dataviz.bootstrap.min.css",
"~/Content/site.css"));

Error:
"NetworkError: 404 Not Found - http://localhost:58709/Content/Bootstrap/sprite.png"

Solution: If I copy/move the Bootstrap folder from Content/kendo to Content it works (in compilation debug="false"), however produces error in compilation debug="false".

For now I can live with having the kendo/Bootstrap folder in two places.

General Discussions

answered on 06 Feb 2015

7 answers

1.9K+ views

Dynamically Size Height of ModalView to Content

I want to create a message dialog with a message, optional title and an OK button at the bottom that will dynamically size to the height of the message content given an expressly set height. Is there a way to do this?

Best,

BX

ModalView

answered on 06 Feb 2015

10 answers

487 views

Menu icons when initializing from a UL

I have an existing menu that is initialized from a UL element. I would like to be able to add icons to some of the menu items - but don't see a way to code that in the UL/LI items. I've tried several different methods - but no luck. Basically - I was hoping something like this would work:

<ul>
<li><span class="k-icon k-i-custom"></span>One</li>
<li>Two</li>
</ul>

Menu

answered on 06 Feb 2015

1 answer

107 views

New items are not droppable

Hi,

I'm trying to drag iteams from a ListView to a TreeView. I made ".k-item" as a kendoDropTarget and I'm finding the text of the drop target and appending the new node to it. This way I'm able to drop elements from the ListView. However, these newly dropped elements are not droppable themselves, and if I try to drop new elements its not going inside the node I desired to. Please help.

The original <li> elements have a data-role="drop-target" attribute, but new ones are missing this.

TreeView

answered on 06 Feb 2015

1 answer

135 views

Radar Chart issue: Ring type object and center() method

Hi.

We have a problem with Radar Chart component from Kendo UI Professional 2014.3.1316 package using via kendo.all.js script.
When mouse hover chart area exception "Uncaught TypeError: undefined is not a function" occures inside moveLine() function.
It seems that the problem is in these lines:
slot = axis.getSlot(axis.pointCategoryIndex(point));
lineStart[dim] = lineEnd[dim] = slot.center()[dim];
getSlot function returnes an object of Ring type but it has no extension method center() for it.

Actually we can not see any side affects of this bug but it is no so good to have any errors in browser console.
Could you help us with this issue? probably we need to include some additional script where center() method for Ring type is implemented?
Thank you in advance.

Charts

answered on 06 Feb 2015

1 answer

1.0K+ views

Remove trailing zeros when formatting decimals

Hi.

I have decimal values in my grid output and use "{0:N}" for column formatting. As a result it truncates everything after two decimal digits. This is good when it has those digits I do not need, for example 1.45286 -> 1.45. But when the value has less than two decimal digits it adds trailing zeros: 2 -> 2.00; 3.5 -> 3.50, and this is not what I want. Instead, I would prefer to keep them 2 & 3.5 respectively. The only thing I can change is to specify how many decimal digits I want to leave, but it will still keep those zeros if there are less digits in the value.

Is there a way to do it in Kendo?

Grid

answered on 06 Feb 2015