Questions on Kendo UI for jQuery Forum

1 answer

454 views

Grid column aggregate count for non empty values only

Hi All,

I have created the grid with aggregate functions and it shows values as expected. Now I want to get the non empty (not null) count of the values in a column. By default aggregate only gives the total count. Appreciate the help.

Thanks,

Luke

Grid

answered on 04 Aug 2016

4 answers

169 views

Grid paging with big groups

Hi, maybe we do not use the grid correctly.

We got a collection of 2000 items. The DataSource is local.
If we what a fast and responsible grid we have to use paging (changing theme, reloading grid take long time when 2000 items are displayed Ethier with scrollbar on the grid). So we set the paging at 50 items/page.

But with paging On, grouping are useless for us. When grouping start, I collapse all groups to let the user open the one he need. But if the first group contain 400 items, all other groups do not show in the list. To show all group I must set the paging to 2000 and then slow the grid process.

Any suggestion?

Grid

answered on 03 Aug 2016

1 answer

250 views

[Solved] Custom background color for event is not filling up the entire time frame

I'm using custom background color codes in my event template as shown below..

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

<div style="background-color: #: kendo.toString(colorId, "hh:mm") #">

<p class="bold">

<span class="bold"> #: kendo.toString(title) # </span>

<span class="bold pull-right"> #: kendo.toString(trip.length) # Trips </<span>

</p>

<h3 style="background-color: #: kendo.toString(colorId, "hh:mm") #"> </h3>

</div>

</script>

But the space is occupied by only a portion in kendo event.Please find the screen shot..

The JSON for binding the event is given below..

[

{

"id": 1,

"name": "Sand",

"start": "/Date(1470024001000)/",

"end": "/Date(1470038400000)/",

"colorId": "#90CAF9",

"status": "Delivered",

"client": "Foyer"

},

{

"id": 1,

"name": "Gravel",

"start": "/Date(1470110401000)/",

"end": "/Date(1470124800000)/",

"colorId": "#CE93D8",

"status": "Dispatched",

"client": "Foyer"

},

{

"id": 1,

"name": "Aggregate 20 mm",

"start": "/Date(1470024001000)/",

"end": "/Date(1470038400000)/",

"colorId": "#9FA8DA",

"status": "Delivered",

"client": "Foyer"

}

]

Please let me know where I'm doing wrong..

Scheduler

answered on 03 Aug 2016

1 answer

486 views

Children of selected parent node

Consider the following example: http://embed.plnkr.co/AZsXtbXTpaswliEoE2fq/

When checking child nodes you can see that the console.log outputs the correct child nodes. When selecting a parent node I get an event for the parent node specifically and the children are programmatically checked as the parent is checked.

Is there an easy way to know which child nodes gets selected. I'm only really interested in the check state of the deepest level.

TreeView

answered on 03 Aug 2016

1 answer

302 views

serverfiltering and parameterMap and navigate

New to kendo ui in general and started working with scheduler. ASP.NET MVC application. Here is what i am trying to do:

1. when user changes view or navigates (via today, fwd, or back buttons or the date picker itself) i want to call out to server to read new data (serverfiltering = true)

2. when user "filters" on people whose tasks i am displaying, i only want it to filter "in place" so to speak (serverFiltering = false) and NOT call out to server again. e.g. i already have the data loaded that i need, i only need to hide/show it. I don't need to call server for it.

it seems like i can only get one or the other.

has anybody dealt with this issue? I looked at telerik's server filtering example, but it calls out for everything.

Scheduler

answered on 03 Aug 2016

1 answer

165 views

Using Bower and Angular

Hi,

I'm building an Angular 1.4.1 application, and I'm looking to integrate KendoUI components into it.

I'm using bower, so I added "kendo-ui" to the bower.json file, and indeed it downloaded.

In all your examples there's a file included: "kendo.all.js", which is not in the bower package.

When I try to add a date picker, for example (<input kendo-date-picker />), the style is scrambled - I get a long input control and a text below it that says "select", that opens a scrambled and not well designed calendar.

BTW - I use gulp to aggregate all JS files to a single JS file, and CSS files also to a single CSS file - file names are taken from each bower.json in each package.

What am I doing wrong?

Thank you.

General Discussions

answered on 03 Aug 2016

4 answers

505 views

Cannot Set Slider Value(s)

I am currently unable to set the values of a slider and rangeslider on a page. There are no Javascript errors, it appears the sliders are just not redrawing with the new values. Sliders:

<div>

@{

Html.Kendo().RangeSlider<double>()

.Name("theRangeSlider")

.Min(0).Max(100)

.SmallStep(1)

.LargeStep(10)

.Values(new double[] { Model.LowLimit, Model.HighLimit })

.Events(e => e.Slide("onRangeSliderChanged"))

.HtmlAttributes(new { style = "width: 425px;" })

.Render();

}

</div>

<div>

@{

Html.Kendo().Slider<double>()

.Name("theSlider")

.Min(0).Max(1)

.SmallStep(.01)

.LargeStep(0.1)

.Tooltip(t => t.Format("{0:P0}"))

.Value(Model.SliderValue)

.ShowButtons(false)

.Events(e => e.Slide("onSliderChanged"))

.HtmlAttributes(new { style = "width: 425px;" })

.Render();

}

</div>

How I am setting the values:

$("#theSlider").data("kendoSlider").value(sliderValue);

$("#theRangeSlider").data("kendoRangeSlider").value([lowerValue, higherValue]);

//Have also tried:

$("#theRangeSlider").data("kendoRangeSlider").values([lowerValue, higherValue]);

$("#theRangeSlider").data("kendoRangeSlider").value(lowerValue, higherValue);

$("#theRangeSlider").data("kendoRangeSlider").values(lowerValue, higherValue);

The strange thing is the values appear to be "sticking" for the sliders, as in if you reference $("#theRangeSlider").data("kendoRangeSlider").values() the values are exactly as I set them. The slider just does not change.

Slider

answered on 03 Aug 2016

1 answer

118 views

get only relevant css

hi. in kendo UI i see there is a way to load only the relevant js files for a component (e.g. datepicker).

is there any way to take only the relevant css for the datepicker? (instead of loading the whole kendo.common.css...)

DatePicker

answered on 03 Aug 2016

5 answers

320 views

Issues with angular directives and scheduler templates

Hi,

I have trouble with angular events such as ng-click when using scheduler groupHeaderTemplate and eventTemplate.
The ng-click event is not fired.

Samples:

//Loading templates

this.groupHeaderTemplate = <string>$templateCache.get(SchedulerPageController.groupHeaderTemplatePath);

this.eventTemplate = <string>$templateCache.get(SchedulerPageController.eventTemplatePath);

let options: kendo.ui.SchedulerOptions = kendo.ui.Scheduler.fn.options;

options.groupHeaderTemplate = kendo.template(this.groupHeaderTemplate);

options.eventTemplate = kendo.template(this.eventTemplate);

Group Header template

<div class="row" k-template>

<div class="col-sm-7">

<span><strong style="color: #=color#">#=text#</strong></span>

</div>

<div class="col-sm-4 text-right">

<button class="btn btn-danger" ng-click="alert('test')"><i class="fa fa-times"></i></button>

</div>

Event template

<div class="movie-template">

<img src="#= image #">

<p>

#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #

</p>

<h3>#: title #</h3>

<a href="#= imdb #" ng-click="console.log('test')">Movie in IMDB</a>

</div>

Scheduler

answered on 03 Aug 2016

1 answer

152 views

Fill in a second grid by selecting a row on first grid

I need to fill in a second grid based on the selected row of the top grid. Second grid is a vertical layout grid, not the regular grid.

I am having problem on line 211 (3rd page) on options.success(appItem). I get that javascript don't have the property or method slice when getting the data back.

I had included on the 4th page what's being returned.

Grid

answered on 02 Aug 2016