Questions on Kendo UI for jQuery Forum

4 answers

545 views

filter a grid by entering a value in an input

Can anyone help me how to filter a grid by entering a value in an input.

I want that because when the page loads show me all the records in the grid,

and I just want to show me the rows filtered with the input. That's possible?

I saw this example http://demos.telerik.com/kendo-ui/grid/toolbar-template

but in that example the grid brings me all records and i just want to show me the records only when i put a value on a text field.

I will wait for your answers.

Grid

answered on 17 Oct 2016

5 answers

3.1K+ views

[Solved] Required validation is not working on a DropDownList

Hello,

I'm using templates to display the items and the selected value on a DropDownList.

I assign the optionLabel using a string. I do it this way because I don't know the object structure upfront (it is defined at runtime).

My challenge now is that the required validation is not working on this scenario. Please take a look to this JSBin: http://jsbin.com/eLaQaFaP/2/. It reproduces the issue I'm getting on my app.

Thanks for your help.

DropDownList

answered on 17 Oct 2016

2 answers

100 views

[Solved] Chart display wrong when having only 2 consecutive values

- When I've created a new bar chart with 2 consecutive values. The ratio of bar chart columns are seem to be wrong.

For example: The 2 values is 6 and 7:

var blogComments = [ {
"blog": "My blog",
"day": "1",
"value": 6,
"userColor": "#ffd600"
}, {
"blog": "My blog",
"day": "2",
"value": 7,
"userColor": "#ffd600"
}, ];

You can't see example in the link: http://dojo.telerik.com/@hakm/uRIvU

- In fact, it's happend in case of having 2 consecutive values. Therefore; if you have more than two values but only having 2 consecutive values.

For instance: 7,7,7,8,8 => Having 5 values but only 2 consecutive numbers, namely 6 and 7

var blogComments = [ {
"blog": "My blog",
"day": "1",
"value": 7,
"userColor": "#ffd600"
}, {
"blog": "My blog",
"day": "2",
"value": 7,
"userColor": "#ffd600"
}, {
"blog": "My blog",
"day": "1",
"value": 7,
"userColor": "#ffd600"
}, {
"blog": "My blog",
"day": "2",
"value": 8,
"userColor": "#ffd600"
}, {
"blog": "My blog",
"day": "1",
"value": 8,
"userColor": "#ffd600"
} ];

You can see it in the link: http://dojo.telerik.com/@hakm/evucuG

- It's only happend when having only 2 consecutive values.

- So what is wrong with it? someone can show me a solution? I can't find any solution in the case :(

Charts

answered on 14 Oct 2016

2 answers

549 views

Opening JQuery dialog causes kendoWindow iframe to refresh

I'm using a kendoWindow in an application that also contains several JQuery dialogs. Both the kendoWindow and JQuery dialogs use iframes,similar to the following:

<div id="dialogSearchResults" style="display:none;" >

<iframe id="formviewSearchResults" frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>

</div>

<div id="dialogPatrol" style="display:none;">

<iframe id="formviewPatrol" frameborder="0" scrolling="yes" width="685" height="547"></iframe>

</div>

// kendoWindow

$("#formviewSearchResults").attr('src', "dashboardSearchGrid.html");

var searchResultsWindow = $("#dialogSearchResults");

searchResultsWindow.kendoWindow({

width: "815px",

height: "500px",

title: "Search Results",

actions: [ "Minimize", "Close" ],

});

searchResultsWindow.data("kendoWindow").open();

// JQuery dialog

$("#dialogPatrol").dialog({

dialogClass: 'no-close',

autoOpen: false,

position: 'center',

draggable: true,

width: 685,

height: 557,

resizable: false,

scrolling: true,

modal: false

});

$("#formviewPatrol").attr('src', "patrol.htm");

$("#dialogPatrol").dialog("open");

When I open the JQuery dialog when the kendoWindow is open, it causes the the iframe inside the kendoWindow to refresh. This only happens the first time the JQuery dialog is opened. If I close it, then re-open it, it doesn't cause the behavior. I've tried different configurations of modal versus non-modal, but nothing works. Any idea how to stop this behavior?

Thanks.

Window

answered on 14 Oct 2016

1 answer

249 views

Fixed height of area chart plotArea

Hey guys,

I need to specify the plotArea height of an area chart. chartArea height doesn't really work for me as the legend can be different in height depending on the chart width and number of series on the chart. I checked the API reference, but couldn't find anything.

Are there any workarounds for this issue?

Thanks!

Charts

answered on 14 Oct 2016

1 answer

371 views

[Solved] How to style the detailInit?

I was wondering what CSS is needed to style the detailInit header and its rows?

Grid

answered on 14 Oct 2016

2 answers

120 views

Totally puzzled with virtual scrolling and load more

endlessScroll

Play the dojo at http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/listview#configuration-endlessScroll
With the default pageSize of 100, it works as expected
Use a pageSize of 10, it does not work
Use a pageSize of 60, pull the list and it adds records randomly

loadMore

Play the dojo at http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/listview#configuration-loadMore
With the default pageSize of 100, it works as expected
Use a pageSize of 10, it does not work
Use a pageSize of 60, the load more button does not work but pull the list and it adds records randomly

This is Kendo UI v2016.3.914 in any browser

ListView (Mobile)

answered on 14 Oct 2016

1 answer

3.6K+ views

Adding custom operators to column filter

I've been testing the Grid and have been liking what I've seen so far. There is something that I'm getting caught up on at the moment though.

I'd like to add some custom operators to the column filters for certain fields we use. Things like 'between', 'in list' etc. Is there a way to add these options or will we have to create a completely custom implementation of filtering? Thanks.

Grid

answered on 14 Oct 2016

4 answers

153 views

[Solved] Value TypeScript definition files update

I think you should fix value when getting date value to return Date | null:

class DatePicker extends kendo.ui.Widget {

static fn: DatePicker;

options: DatePickerOptions;

element: JQuery;

wrapper: JQuery;

static extend(proto: Object): DatePicker;

constructor(element: Element, options?: DatePickerOptions);

close(): void;

destroy(): void;

enable(enable: boolean): void;

readonly(readonly: boolean): void;

max(): Date;

max(value: Date): void;

max(value: string): void;

min(): Date;

min(value: Date): void;

min(value: string): void;

open(): void;

setOptions(options: any): void;

value(): Date; //!!! OR null

value(value: Date): void;

value(value: string): void;

}

DatePicker

answered on 14 Oct 2016

3 answers

2.2K+ views

[Solved] Suppress 'change' event within 'select' event?

I am using my autoComplete as a filter. I want to filter a dataSource using the 'eq' operator when the user selects an item in the autoComplete drop down. I want to filter the dataSource using the 'contains' operator when the user presses the enter key when typing in the autoComplete text box.

I am using both the 'change' and the 'select' events.
From the docs:
'change' - Fired when the value of the widget is changed by the user
'select' - Fired when an item from the suggestion popup is selected by the user

So...
I'm using the 'change' event to filter when the user clicks enter (and therefore use 'contains' operator to filter the ds)
I'm using the 'select' event to filter when the user clicks on a menu item (and therefore use 'eq' operator to filter the ds)

It works well, except when the user selects an item in the drop down, the 'select' event gets fired and then the 'change' event gets fired immediately after. How can I suppress the 'change' event whenever the 'select' event gets fired?

Thanks,
--Ed

AutoComplete

answered on 14 Oct 2016