Questions on Kendo UI for jQuery Forum

4 answers

196 views

Hello,
Is it possible to allow the user to resize the columns by dragging the edges of their header cells (this feature works with a grid)?

Thanks,
Luc

TreeList

answered on 16 Feb 2015

4 answers

178 views

Server side binding for initial load, but ajax binding for page changes

Hi
I want to load the initial first page of a grid using the first page of data bound from a server side collection. Subsequent page changes should be loaded using ajax.

My problem is how to set the total records of the collection to a number so that the correct number of pages are displayed.

So in the example below, Model.Calls may only contain 20 records, but the full collection count could be 100. How can I tell the grid there are in fact 100 records, not 20?

@(Html.Kendo().Grid<CallsViewData>(Model.Calls)
      .Name("CallsGrid")
      .Columns(c => {
                        c.Bound(m => m.TestResultId).Groupable(false).Title(@Html.Resource("HeadTestResultId"));
                        c.Bound(m => m.RunType).Title(@Html.Resource("HeadType"));
                        c.Bound(m => m.CallFlow).Title(@Html.Resource("HeadDirection"));
                        c.Bound(m => m.PhoneNo).Title(@Html.Resource("HeadCalledNo"));
                        c.Bound(m => m.ActualStart).Title(@Html.Resource("HeadStartDate"));
                        c.Bound(m => m.Connected).Title(@Html.Resource("HeadConnectedDate"));
                        c.Bound(m => m.Disconnected).Title(@Html.Resource("HeadDisconnectedDate"));
                        c.Bound(m => m.Duration).Title(@Html.Resource("HeadDuration"));
                        c.Bound(m => m.Duration).Title(@Html.Resource("HeadMinutes"));
      })
      .Resizable(s => s.Columns(true))
      .Pageable()
      .DataSource(ds => ds.Server().Total(100))
      .BindTo(Model.Calls)
      .Sortable()
      .Scrollable()
      .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Read(read => read.Action("calls", "report").Data("tt").Type(HttpVerbs.Post   ))
                                    .PageSize(20)
      ))

Grid

answered on 13 Feb 2015

3 answers

317 views

[Solved] how to add tooltips for countries programly ?

According to this demo. http://demos.telerik.com/kendo-ui/map/geojson
Is there any method I can call to display the numbers in the tooltips for each countries area program?

The requirements of my project is like when end user selected row in the grid, it should highlight the country area and show the number in the tool tip on map.
See the attachment.

Thanks.

Map

answered on 13 Feb 2015

1 answer

111 views

[Solved] Typescript defs are incorrect for kendo.bind

kendo.bind has an optional namespace 3rd param. However the typescript bindings in kendo.web.d.ts declare this 3rd param as required.

This means when using Typescript kendo.bind you always have to provide a namespace param, which is annoying.

General Discussions

answered on 13 Feb 2015

4 answers

200 views

Can't get listview edit mode to work in AngularJS

I have the following data structure:

{
"Id": "568124DB-8702-4717-A4C5-CF069A4B0491",
"Hive": "global",
"HiveQualifier": null,
"Name": "OpenCycle OSM",
"Description": "OpenStreetMap layer from opencyclemap.org",
"Type": "OSM",
"IsBaseLayer": true,
"Params": {
"url": [
"http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
]
}
}

I'm editing it with the following template (in a grid if it matters):

The array of URLs displays just fine, but when I click the edit button I get an error in the console:

Uncaught TypeError: Cannot read property 'uid' of undefinedkendo.all.js:57092
kendo.ui.DataBoundWidget.extend.editkendo.all.js:57175
(anonymous function)jquery-2.1.1.min.js:3
n.event.dispatchjquery-2.1.1.min.js:3
n.event.add.r.handle

I have no idea how to troubleshoot this.

ListView

answered on 13 Feb 2015

1 answer

559 views

Add css class to shapes on diagram

I have the following code which adds a diagram and a couple of shapes. Is there anyway to apply a class to the underlying svg?

var element = $("#paper").kendoDiagram({
shapeDefaults: {
width: 85,
height: 110,
editable: false,
content: {
align: 'center'
},
hover: {
fill: "lightgrey"
},
stroke: {
width: 1,
color: 'black'
}
},
connectionDefaults: {
type: "polyline",
endCap: "ArrowEnd"
}
});
var diagram = element.data("kendoDiagram");
var operand = diagram.addShape({
width: 85,
height: 110,
x: 20,
y: 187,
editable: { connect: false },
fill: {
color: '#00CC00'
},
content: {
text: 'Quarter',
}
});

var operator = diagram.addShape({
width: 85,
height: 110,
x: 203,
y: 20,
fill: {
color: '#00CC00'
},
content: {
text: 'Target %'
}
});

Diagram

answered on 13 Feb 2015

1 answer

567 views

how to hide/remove null column

I'm getting this null thing in the chart and I wonder if I can hide or remove it. Please note that I can't change the data..

Charts

answered on 13 Feb 2015

3 answers

169 views

Kendo Scheduler default edit template

Hi

I want to extend the default edit template with only one field.

I have read through the documentation and it seems I have to replace the whole edit window - and recreating the default template to then add my custom field.

http://dojo.telerik.com/IqIYI

Can you please provide me (I did not find it) with the html code for the default edit popup so that I can add my field?

Many thanks

Grid

answered on 13 Feb 2015

1 answer

534 views

Multiselect dropdown filter

So I'm working with the Kendo Grid in MVC and my customer needs a grid in which he can filter columns on certain sets of choices. And he needs to see which filters are currently active.
I'm using a grid with the row filtermode set and I'm setting the template on the filter (through the FilterableSettings.CellSettings.Template.HandlerName property of the GridBoundColumn). I'm showing a dropdown with the choices the customer can check. Basically what I want to accomplish is this but it doesn't work with the row filtermode set. I found this example and I'm using it with the template to show a dropdown in every column, except it has side-effects I don't want. The effects are:

It shows the dropdown with empty rows in between the actual options, see the dropdown screenshot. Why does this happen?
It filters the wrong way (on objects, see the filter screenshot) on closing of the dropdown. I want to override the way of filtering, but where can I hook in to override this? I don't know which event is thrown when closing the dropdown nor do I know on which element the element is hooked.

Below shows the code I'm having so far for the filtertemplate:

function filterMenu(container) {

debugger;

// Determine which field this is and get the appropriate choices

var currentColumnIndex = $(".k-filter-row").children().length - 1;

var headers = $($(".k-grid-header").children()[0]).children();

var currentHeader = headers[currentColumnIndex];

var customField = currentHeader.getAttribute("data-customfield"); // Use for support in < IE 11, otherwise could have use .dataset.customfield

var choices = specialFilterFields[customField];

var dropDown = container.element.kendoDropDownList({

dataTextField: "Choice",

dataValueField: "Choice",

template: '<li unselectable="off" class="k-item nowrap check-item">' +

'<input type="checkbox" name="#= Choice #" value="#= Choice #" class="check-input" />' +

'<span>#= Choice #</span>' +

'</li>',

placeholder: "Filter...",

select: function(e) {

e.preventDefault();

},

dataSource: choices,

valuePrimitive: false

}).data("kendoDropDownList");

dropDown.list.find(".check-input,.check-item").bind("click", function (e) {

var $item = $(this);

var $input;

if ($item.hasClass("check-item")) {

$input = $item.find("input");

$input.prop("checked", !$input.is(":checked"));

} else {

$input = $item;

}

// Update the style of the checkboxes

$.uniform.update($input);

// Update the text of the dropdown

updateDropDown(dropDown);

e.stopImmediatePropagation();

});

updateDropDown(dropDown);

}

function updateDropDown(dropdown) {

var items = [];

dropdown.list.find(".check-input").each(function () {

var $input = $(this);

if ($input.val() != "" && $input.is(':checked'))

items.push($input.val());

});

dropdown.text(items.toString());

}

Grid

answered on 13 Feb 2015

1 answer

63 views

Filter question for Dates

Hi I am trying to recreate the example of the filter row.

http://dojo.telerik.com/iYUPU/2

After creating data myself the filter does not work anymore.

On my local test environment I am using
transport: {
read: {
url: "partials/tasks.json",
dataType: "json"
}
},

...which also does not seem to kick off the filter when I type anything or press enter.

What is wrong with this example? http://dojo.telerik.com/iYUPU/2

Thanks

Grid

answered on 13 Feb 2015