Questions on Kendo UI for jQuery Forum

1 answer

93 views

The data source for my combo box contains 3 fields - the usual text and value, along with an additional one - detail.
Using the combobox template property like so:
template: '${data.detail}'
I am able to display the enhanced item detail info info in the drop down menu, while displaying just the short text in the input field normally. That's good, but the filter only applies to the field specified by dataTextField.

With minor changes to the combobox code, I am able to support this by providing a new config option dataSearchField (which I set to "detail") and then doing
field = options.dataSearchField || options.dataTextField
in the search and _filterSource functions of combobox.

And that kind of works for me. Better version would be to allow the dataSearchField to be a function or a field name. But that would require much deeper changes.

My question is - can/will this ability be added by kendo if requested, and what is the best way to submit such an enhancement request?

Or, is there already some other way to achieve this functionality?

ComboBox

answered on 13 Dec 2012

1 answer

121 views

Binding to dataSource with aggregates and grouping

I'm binding a DropDownList to a datasource with aggregates and grouping. Is that possible?

I'm getting the error:
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

DropDownList

answered on 13 Dec 2012

2 answers

127 views

Tooltip multi-Axis

Hi,

I have a chart with multi-axis, in ie9 the tooltip doesn't show in column only in line

Charts

answered on 13 Dec 2012

3 answers

342 views

KendoUI Grid filter redirecting to another page

Something very strange is happening when I am using the filter of KendoUI Grid. My grid is very simple and the definition is like this:

        var cols = [];
        cols[0] = { field: 'name', title: 'Nome', width: "65%" };
        cols[1] = { field: 'eMail', title: 'eMail', width: "20%" };
        cols[2] = { field: 'city', title: 'Cidade', width: "15%" };
        var cfgGrid = { dataSource: dsPersons, 
                        batch: false, 
                        change: onSelectedRow,
                        selectable: "row", 
                        resizable: true, 
                        scrollable: true, 
                        sortable: { mode: 'multiple', allowUnsort: true }, 
                        filterable: true, 
                        editable: false, 
                        pageable: { numeric: false }, 
                        columns: cols };
        gridPessoas = null;
        gridPessoas = $("#gridElem").kendoGrid(cfgGrid).data("kendoGrid");
The grid is displayed correctly in url:

http://localhost:50409/#/personsView

But when I try to filter any column kendoUI redirects to a page:
http://localhost:50409/undefined?

The Datasource was defined like that:
var ds = { data: persons,
           schema: model,
           filter: {},
           serverPaging: false,
           serverFiltering: false,
           pageSize: 12 };

The grid is ok and the error only occurs when I define a filter value and click on the filter button.

This is an ASP.NET MVC 4 site. I cannot imagine what is going on.

Can you help me ???

Thanks in advance

Grid

answered on 13 Dec 2012

3 answers

279 views

Upload + jquery append issue

I am having an issue at work right now (in fact it's not just this control) I think that I am doing something wrong, as no one else seems to have this issue..

basically put I am using a jquery click event from an HTML button, then what happens in that area is code gets append (with .append()) but any code in that area I cannot seem to actually access via the kendo upload initializer thing

$('#upload_content').click(function () { $('#sideRight').append('<div class="fileupload" style="position:absolute;left:5%; top:35%;"><input id="file_upload" name="file_upload" type="file"></div>'

so would I actually initialize a proper upload control with that input field. I don't get any errors in Firefox, but any time I dynamically append any content (say on successful return of an ajax request) with the append function I cannot use any kendo controls (uploadify actually)

i know the code does work if I add an input control in just plain HTML in the body (without appending it with jquery) it works fine.

what am I DNA wrong? It's not like I am trying to use multiple upload controls, I will actually be using at least 3 on the page however, appended to 3 different click events, so in theory there will be multiple ones on the page..lol any help would be greatly appreciated

Upload

answered on 13 Dec 2012

1 answer

95 views

App samples

Hi.
Do you have any additional app samples besides the Sushi app?

thx

General Discussions

answered on 13 Dec 2012

3 answers

1.1K+ views

look and feel change of kendo dropdown selected value and text

Hi team,

i am pleases to use this kendo UI .. i am customizing the kendo UI drop downlist.

i want to make color picker using Kedo Dropdown.

i am able to append new elements to the dropdown, want to change the Hover color for selected Item and after selecting i want to show color pallet and Text side by side.Can any one help me in this context.

i am attaching a screen shot that will explains much better...

DropDownList

answered on 13 Dec 2012

2 answers

1.0K+ views

Filterable not working when grid is Sortable (MVC)

I'm working on a MVC 4 project and bumped in to a problem with the Kendo Grid.

I try to use both the Sortable() and Filterable() properties of the grid, but only sorting is applied. The filter icons are visible in the columns but only triggers sorting. The Filterable() property works fine when Sortable() is removed though.

Below is the code for the grid (slightly edited for cleaner presentation)

@(Html.Kendo().Grid<TaskViewModel>()

.Name("UserTasksGrid")

.Columns(column =>

{

column.Bound(task => task.Title);

column.Bound(task => task.IsCompleted)

.ClientTemplate("<input type=\"checkbox\" #= (IsCompleted === true) ? checked='checked' : '' # disabled=\"true\"")

column.Bound(task => task.TaskType)

column.Bound(task => task.DueDate).Format("{0:yyyy-MM-dd}")

column.Bound(task => task.CompletedOn)

.ClientTemplate("#= (IsCompleted == false) ? '' : kendo.toString(CompletedOn, 'yyyy-MM-dd') #")

column.Template(model => model).ClientTemplate("<a href='/production/index?productionId=#=ProductionId#' style=\"width:\">Gå till produktionssida</a>");

})

.Filterable()

.Sortable()

.Scrollable(scroll => scroll.Height(300))

.Pageable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.ServerOperation(false)

.Model(model => model.Id(m=> m.Id))

.Sort(sort => sort.Add(task => task.IsCompleted))

.Read(read => read.Action("UserTasks_Read", "Task"))

)

I've also tried with the ColumnMenu() property based on your demo http://demos.kendoui.com/web/grid/column-menu.html
but the problem remains (ie the column menu icon can not be clicked).

Furthermore, when I set sortable in the ColumnMenu (like below), the options for "Sort ascending" and "Sort descending" are not displayed in the menu.

.ColumnMenu(menu => menu.Sortable(true))

It would be great if I could get both filtering and sorting working on the grid.

Thanks,
Andreas

Grid

answered on 13 Dec 2012

2 answers

620 views

Id of node when clicked on tree and pass it as parameter to grid!

How do I get the ID of a node in a Kendo treeview from a remote JSON and put it as a variable to use in a grid's remote datasource url as parameter?

Here is the code for tree:

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

#: item.Name #

</script>

<script>

var meterid = 1179;

var treeurl = 'treeview_remote_url';

var datatree = new kendo.data.HierarchicalDataSource({

transport: {

read: {

url: treeurl,

dataType: "json",

cache: true

}

},

schema:

{

model:

{

children: "Children",

fields:

{

id: { type: "number" },

Name: { type: "string" }

}

});

function onSelect(e) {

var treeview = $("#treeview").kendoTreeView({

select: function () {

meterid = ($(this).text());

}

});

$("#grid").data("kendoGrid").dataSource.read();

}

$(document).ready(function () {

$("#treeview").kendoTreeView(

{

template: kendo.template($("#treeview-template").html()),

dataSource: datatree,

dataTextField: "id"

});

var treeview = $("#treeview"),

kendoTreeView = treeview.data("kendoTreeView");

treeview.on("click", ".k-in", function (e) {

kendoTreeView.toggle($(e.target).closest(".k-item"));

onSelect();

});

... and here is the code for grid:

<script>

var dateRegExp = /^\/Date$(.*?)$\/$/;

function toDate(value) {

var date = dateRegExp.exec(value);

return new Date(parseInt(date[1]));

}

sourceUrl = "grid_remote_url... &id=" + meterid;

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: {

type: "json",

transport: {

read: sourceUrl

},

refresh: true,

serverSorting: true,

scrollable: true

},

height: '100%',

scrollable: {

virtual: false

},

columns: [

{ field: "data", title: "Date/Time", template: '#= kendo.toString(toDate(data), "dd/MM/yyyy HH:ss")#', width: '10%' },

{ field: "valoare", title: "Energy (MWh)", template: '#= kendo.toString(valoare, "n5")#' },

{ field: "valoare", title: "Energy (MWh)", template: '#= kendo.toString(valoare, "n5")#' }

]

});

</script>

Any help will be apreciated. Thanks!

TreeView

answered on 13 Dec 2012

2 answers

74 views

Problem with Selectable rows behavior on iOS

When I turn on the "selectable" property of a Kendo grid, I get an interesting (undesirable) behavior on iOS browsers. When you use a single swipe gesture to scroll the content of the grid, all the rows in the entire grid become selected.

So far I have confirmed this happens on Safari on iOS 5 and 6 as well as Chrome 23.0.1271.91 also on iOS 6. I have published a standalone file to demonstrate this issue:

http://hst11.homeschooltracker.com/demo/grid.html

I look forward to any recommendations that will make it so that scrolling on these platforms does not select rows the user did not mean to select.

Grid

answered on 13 Dec 2012