Questions on Kendo UI for jQuery Forum

7 answers

963 views

I'm trying to show the "kendo.ui.progress" or just an image over the div before the chart loads the data. I have up too 10 charts on my dashboard at one time so there is a lag between each of them loading and it looks werid with just a blank graph. I'm getting the data from a webservice and I've tried adding an loading-image class to the charts div but nothing I have tried has worked. Can anyone help me out.

this is an example of one of my charts:

var dsOrderHis = null;

$(document).ready(function()

{

args.startDate = startDate;

args.endDate = endDate;

args.filterBy = filterBy;

args.userIds = userIds;

dsOrderHis = new kendo.data.DataSource(

{ transport: { read: { cache: false,

url: appUrl + "/Services/ArgosyDashBoardService.svc/orderHistory",

dataType: "json", contentType: "application/json; charset=utf-8", type: "POST" },

parameterMap: function(options, operation) { return JSON.stringify(args) } },

schema: { data: "OrderHistoryResult" },

change: function() {

var dataCount = $("#LoadOrderHistoryDiv").data("kendoChart").dataSource.view().length;

if (dataCount <= 0) { setTimeout("LoadOrderHistoryHideSvg();", 400) }

else

$("#LoadOrderHistoryDiv svg").each(function() { $(this).fadeIn() });

setTimeout("LoadOrderHistoryAddIcon();", 100) } }

});

$('#LoadOrderHistoryDiv').kendoChart({

theme: currentTheme,

title: { text: 'Order: History' },

dataSource: dsOrderHis, legend: { position: "bottom" },

series: [{ type: "line", field: "YAxis"}],

categoryAxis: { field: "XAxisLabel", labels: { rotation: 42} },

tooltip: { visible: true, template: " #= value # orders placed in #= category # .", padding: 9 },

legend: { visible: false} })

});

//used for data changes

function LoadOrderHistory()

{

var chart = $("#LoadOrderHistoryDiv").data("kendoChart");

args.startDate = startDate;

args.endDate = endDate;

args.filterBy = filterBy;

args.userIds = userIds;

kendo.ui.progress($("#LoadOrderHistoryDiv"), true);

chart.dataSource.read()

}

Charts

answered on 27 Sep 2013

3 answers

195 views

[Solved] MVC DataSource

Having trouble getting the sytax right to call a controller and populate a dropdownlist usising a DataSource. getting error:0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'Read'
HTML:
<div id="divyear">
        <select id="cboYear">
        </select>

    </div>

  <script>
        $(document).ready(function () {
            var yearsSource = new kendo.data.DataSource()
            .Read()
            .Action("getYears", "Glass");

            $("#cboYear").kendoDropDownList({
                AutoBind: false,
                BindTo: Model.YearsList,
                DataValueField: "Value",
                DataTextField: "Text",
                Change: yearChange,
                DataSource: yearsSource,
                ServerFiltering: true
             })

         });
...
Controller:
      [HttpGet]
        public JsonResult getYears()
        {
            GlassModel gm = new GlassModel();
    //gm.YearsList is a SelectList
            return Json(gm.YearsList, JsonRequestBehavior.AllowGet);
        }
Thanks

Data Source

answered on 27 Sep 2013

1 answer

179 views

How to select time range in a line chart

Hi I am trying to understand how to allow user to select a range of dates for a time series based chart - similar to the navigator in the stock chart. I cannot make sense of the documentation and could find an example of this. Appreciate if some one can show me an example.

Thanks,

Jason

Charts

answered on 27 Sep 2013

2 answers

235 views

[Solved] Issues using MVVM and calling setOptions...

I have a chart built using MVVM, and am trying to programmatically set the select to and from on the categoryAxis.

I can get this to work using a non-mvvm chart (http://jsbin.com/OXESAyi/2/edit),
but on an MVVM chart the chart just craps out with no console error (http://jsbin.com/ifeZAZU/3/edit).
Even following the sample from http://docs.kendoui.com/api/dataviz/chart#methods-setOptions and just trying to change the theme, does the same thing.

Is there some better way of programmatically setting the select than using the setOptions method ?

Thanks.

Robin

Charts

answered on 27 Sep 2013

3 answers

171 views

Activating a ModalView from Tabstrip

I've noticed that when I try to open a modalview from a tabstrip it appears and disappears right away. However if I create a button on a view and allow it to open the modalview it opens and stays open. Is this a known issue?

ModalView

answered on 27 Sep 2013

6 answers

509 views

How to overlay a vertical marker on a line chart?

Hi I am a newbie to Kendo Dataviz so apologize if this is something that has been answered before. Basically I am constructing a line chart using a time based series and the data is dynamically updated so the axis/values are been updated over time and the graph is refreshed every few seconds. I need to mark certain events at some point of time on the same graph so users can see how these events are correlated to the values been displayed. Ideally these events should be marked as a vertical line overlaid on the graph so the event time and its correlation to the chart data points can be clearly seen.

I have not been able to find a way to do this with Kendo Dataviz. Is there a feature that will allow me to do this or is there a way that I can use to directly access the graph canvas and do some direct drawing?

Thanks and appreciate your help,

Jason

Charts

answered on 27 Sep 2013

2 answers

90 views

[Solved] Resize events and move events not working on Kendo Web Open Source version

Hi all,

I just want to ask if the Kendo Web Open Source version is also updated from last September 18 2013 release?
I just have downloaded the Open source version a days ago and changed my scripts from trial version to an open source , the resize and move events seems not working anymore.
Is the opensource version not updated from the new released?

Thanks,
Jay

Scheduler

answered on 27 Sep 2013

1 answer

272 views

Set column width using table initialization

I am initializing a grid using an html table, including

<table id="grid">

<colgroup>

<col style="width:50px" />

<col style="width:25px" />

</colgroup>

<thead>

<tr>

<th>Hour</th>

<th>10 AM</th>

etcetera

However, the columns seems to blithely ignore the instructions. The table should be as large as necessary to accommodate all of the columns. What is missing or going askew here?

Thanks.

Here is the fiddle I am using to prototype: http://jsfiddle.net/raltman/wcD28/5/

Grid

answered on 27 Sep 2013

7 answers

320 views

Binding select event via MVVM

I have markup for a button group like the following:

<ul data-role="buttongroup" data-index="0" data-bind="select: deliveryMethodChanged">

<li>

Email

</li>

<li>

Download

</li>

</ul>

I'm trying to use the MVVM method to bind to the select event however I'm getting the following error in version 2013.2.716 at line 10373:
0x800a01bd - JavaScript runtime error: Object doesn't support this action

Am I missing something? Is it not possible to bind to the select event in this way?

Scott

ButtonGroup

answered on 27 Sep 2013

1 answer

296 views

How to execute the kendo window in a for loop to work like a Confirmation dialog box ?

Alert Box
<img src="~/Themes/Images/AlertQues.png" class="DeleIcon" />
<p>Data already exist with Date: <b><span id="rid">@ViewBag.ID </span></b><br /> Do you want to assign the
data anyway ?</p>
<br />
<br />
<div class="floRight">
<input type="button" value="Yes" class="k-button" id="ConApptYes" style="width:100px;" onclick="ConflictYes();" />
<input type="button" value="No" class="k-button" id="ConApptNo" style="width:100px;" onclick="ConflictNo();"/>
</div>

<script>
function ConflictYes()
{
debugger;
var a = document.getElementById('CIdVal').value;
var b = document.getElementById('FResIdVal').value;
document.getElementById('alertFlag').value="false";
b = b + "," + a;
var window = $("#conflictAlert").data("kendoWindow");
window.close();
}

function ConflictNo()
{
var window = $("#conflictAlert").data("kendoWindow");
window.close();
}
</script>

Javascript in Another View

for (var i = 0; i < cResId.length;
i++) {
document.getElementById('CIdVal').value = cResId[i];
doneflag='false'
var window = $("#conflictAlert").data("kendoWindow");
window.open();
window.center();
}

Requirement
After the Conflict Alert Open if the “Yes” or “No” button is clicked then only the loop have to start to run again for its next iteration. Else the loop should not execute for the next I value. The Kendo Window must act like a “Confirmation Dialog Box”

Example
if (confirm(Are you sure . Do you want to continue?')) {
// Save it!
alert("Yes");
} else {
// Do nothing!
alert("No");
}

Thanks
Mayil
[On Behalf of Jeremy Thompson]

Window

answered on 27 Sep 2013