Questions on Kendo UI for jQuery Forum

1 answer

146 views

Hi

What is the recommended approach for showing a chart - only when it has data.

By default, the chart draws without any data. This means there's a bit of a flicker when it redraws to show the data loaded from a remote source. All my chart initialization is currently in the jQuery.ready( event...

Is there any easy way to only show the chart when it has data? Ideally, this is a just a property rather than having to wire up this behaviour every time?

Thanks

Charts

answered on 26 Aug 2013

1 answer

105 views

Window Title - font too big

In my Kendo UI [popup] Window the font in the title area is being clipped. I did not change any styling and was wondering what is causing the sizing to be incorrect.

Peter

Window

answered on 26 Aug 2013

1 answer

125 views

Chart Notes cannot change icon type

Hi,

i am trying to get line chart notes style as similar as it can be to 'jqplot.png'.

1. To change shape of each note, i have added .Icon like this:

.Notes(d => d.Position(ChartNotePosition.Top)

.Line(l => l.Width(0))

.Label(m => m.Text("value"). Template("${value}").Position(ChartNoteLabelPosition.Outside))

.Icon(i => i.Border(b=> b.Width(1))

.Visible(true)

.Background("green")

.Type(ChartMarkerShape.Square))

)

But the style of the notes remained the same (as in 'pointsKendoChart.png'). Does .Icon control notes shape? Is there any other way to get the shape from 'jqplot.png'?

2. Is it possible to change background color for each label/shape (different points -> different colors, not all points -> same color)?

3. Is it possible to change position of notes to arbitrary position (top, but closer to point)?

I am using Firefox, Kendo UI Beta v2013.2.716 , jQuery v1.9.1.

Best regards,
Antonija

Charts

answered on 26 Aug 2013

1 answer

51 views

Set of Kendo Windows Centered on page . How to ?

Hi,

I have a set of kendo windows ( for eg 8 ) arranged in a horizontal fashion in two rows, i.e. 4 windows per row. Each window is given a top, left value, such that the windows are arranged similar to the view in Chrome 'Most Visited' page. The window position values are such that the set of windows appears in the center of the page. The issue here is on Zoom Out, the set of windows moves to the left. How do I have the SET of windows centered on zoom in/out ?

Thanks,
VN

Window

answered on 26 Aug 2013

3 answers

214 views

Multiple Kendo Windows

Hi,

I have a set of kendo windows ( for eg 8 ) arranged in a horizontal fashion in two rows, i.e. 4 windows per row. Each window is given a top, left value, such that the windows are arranged similar to the view in Chrome 'Most Visited' page. The window position values are such that the set of windows appears in the center of the page. The issue here is on Zoom Out, the set of windows moves to the left. How do I have the SET of windows centered on zoom in/out ?

Thanks,
VN

Window

answered on 26 Aug 2013

4 answers

1.2K+ views

scale intervals on x-axis of KendoUI Charts

I have an array for categoryAxis data as follows:

categoryAxis: {

categories: ["30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "80", "81", "82", "83", "84", "85", "86", "87", "88"],

title: {

text: "Age"

}

},

and I want the chart to display this data with an interval of 5; such as:

30......35......40......45... and so on.

how is this possible?

Charts

answered on 26 Aug 2013

9 answers

419 views

Drop down list offset in IE when opened in an iFrame

When opening a kendo dropdownlist in IE in an iFrame the list part is offset. I believe IE is not reporting the correct coordinates to the drop down list constructor since it is in an iFrame. If nothing is to the left of the drop down list it works fine.

Code:

<script type="text/javascript">

$("#StatementDate").kendoDropDownList();

</script>

<div class="grid4 inputlabel">Statement Date:</div>

<div class="grid9 inputfield">

<select id="StatementDate" name="statementMonth" style="width:120px;">

<option selected="selected" value="Current">Current</option>

@foreach (KeyValuePair<int, DateTime> item in Model.StatementList)

{

<option value="@item.Key">@item.Value.ToString(Model.CurrentContext.Club.DateFormat)</option>

}

</select>

<input type="button" id="viewPdf" value="View Statement" class="button button3" style="width:120px;" />

</div>

Is there a work around for this? The code works fine outside of the iFrame and inside the iFrame if using another browser such as Chrome.

DropDownList

answered on 26 Aug 2013

1 answer

144 views

Kendo UI Mobile Free Trial

Hi all,

I have a question regarding the Kendo UI Mobile free trial. If I were not to purchase the trial within 30 days, how exactly would the framework stop working, due to its client-side nature? Is this just for the server wrappers?

Thanks!

General Discussions

answered on 26 Aug 2013

3 answers

3.0K+ views

Cannot override CSS styles on dropdownlist

I am trying very hard to get styling to work for the DropDownList. I need to do some VERY specific styles that the Theme Builder does not let me edit.

I already did this fine with the "Menu" widget, but with the "DropDownList" widget, it just ignores styles unless I declare them to be page wide (I cannot put them underneath another tag)

For example, consider the following ...

<div class="grid skinName" style="background-color: #eadca6;">

<div class="row">

<h2>Drop Down List</h2>

<select data-role="dropdownlist"

data-text-field="Name" data-value-field="Id"

data-bind="source: data, value: selected">

</select>

</div>

The select list is nested under the div with a class "skinName", so in my CSS, I do the following...

.skinName {

.k-list-container {

display: block !important;

}

.k-widget,

.k-dropdown,

.k-list-container,

.k-dropdown-wrap,

.k-group,

.k-popup,

.k-reset,

.k-header {

background-color: #f8f5e6;

border-width: 0px;

padding-top: 0px;

color: #000;

.k-input {

font-family: 'Times New Roman', serif;

}

.link {

a, a:link {

font-size: 14px;

color: #fff;

&:hover {

background: #fff;

color: #000;

}

This should style it fine, but Kendo forcefully creates the extra HTML for the widget outside of the bounds of the original DOM element that I intended for it to be in, so these styles never get applied. Is there any way to force kendo to adhere to the toplevel class I specify?

DropDownList

answered on 26 Aug 2013

1 answer

285 views

How to set SplitterPane content?

Hello, I would like to set other content to my splitter pane after i configured it by usig RAZOR syntax, The idea is that i have a treeview and onSelect event where I set the right pane content to a grid or calendar or some other stuff. How can I add thosse widgets to my right-pane using javascript? I can set the text of the field but i can't find a Content option. If you have other ideas how to implement this please feel free to suggest.

@Code
Html.Kendo().Splitter() _
        .Name("Splitter") _
        .HtmlAttributes(New With {.id = "pekasz"}) _
        .Orientation(SplitterOrientation.Horizontal) _
        .Panes(Sub(panes)
       ...
               panes.Add().Scrollable(True) _
                                  .Collapsible(False) _
                                  .HtmlAttributes(New With {.id = "right-pane"}) _
                                  .Content("<div id = 'estifeny'>" & Html.Kendo().Calendar().Name("bar").HtmlAttributes(New With {.id = "kicsicsicsiman"}).ToHtmlString & "</div>")
END Code

<script>
    function onSelect(e) {
       $("#right-pane").text(this.text(e.node)) ;
       $("#right-pane").Content???
        };
</script>

Splitter

answered on 26 Aug 2013