Questions on Kendo UI for jQuery Forum

2 answers

545 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

243 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

365 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

116 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

149 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

3 answers

1.6K+ views

How to get Dynamic series name with respective data(field)

Hi all,

I am very new in kendo UI.

I am trying to create a stacked bar graph using remote connection and my code is as below:

<!doCTYpe html>
<html>
<head>
<link href="kendo.metro.min.css" rel="stylesheet">
<link href="kendo.common.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>

var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost/Project_Demo/Kendobardata.php",
dataType: "json"
}
},
schema: {
data: "data",
model: {

fields: {

wordpress: {type: "number"},
month: {type: "string"}
}
}
}
});

$("#chart").kendoChart({
dataSource: sharedDataSource,
title: {
text: "Charts Rating"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "wordpress",
field: "wordpress",
color: "#3CB371"},
{
name: "codeigniter",
field: "codeigniter",
color: "#FFA500"
},
{
name: "highcharts",
field: "highcharts",
color: "#FF0000"
}],
valueAxis: {

line: {
visible: true
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
field: "month",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});

</script>
</div>

</body>
</html>

I am finding a difficulty to get the series "name" as dynamic which will come from database.

let say example:

There are 10 "appointment owner", their respective "appointment count" values and "months" are in json format.

I want to create a stacked bar graph in that month will be on category axis and in series appointment owner and appointment count should be their.

Kindly please help me to achieve this.

Thanks,

Amit

Charts

answered on 14 Oct 2016

2 answers

332 views

Initializing dropdownlist editor in custom popup window

Hi,

I needed batch edit and popup window at the same time. I just have a question - how is it possible to initialize editor for dropdownlist? Here a small sample:

http://dojo.telerik.com/aSaXe/14

I'm doing this in dynamic way, because I want to wrap everything in function and reuse for more grids.

Grid

answered on 14 Oct 2016

3 answers

596 views

[Solved] How to collapse splitter on document ready?

Hi,

I have a dojo set up where I have a couple splitters, and I been searching online for a couple hours on how to have the splitter panels collapsed when the page loads.

Currently my splitter layout looks like this attachment A.PNG and I want the end result to look like attachment B.PNG ( I hope they got attached)

If the screenshots didn't get attached then what I am looking to do is have the left pane and bottom right pane collapsed

This my dojo

Splitter