I want to draw a chart has one scatter series and one scatter line
series from remote json data,For example,I define the model like this:

public class Point{
public double XPoint{get;set;}
public double YPoint{get;set;}
}
public class ChartDataSource{
//the datasource to draw a line
public List<Point> LineSeriesDataSource{get;set;}
//the datasource to draw some points
public List<Point> PointSeriesDataSource{get;set;}
//the chart title
public string ChartTitle{get;set;}
}


In the view,How to show the chart?I write like this,but it do not work.
//use ajax to get datasource
var datasource=GetDataSource();
$("#samplechart").kendoChart({
title: { text: dataSource.ChartTitle},
dataSource:dataSource,
series: [{
type: "ScatterLine",
field: "LineSeriesDataSource.YPoint"
//groupNameTemplate: "Line Temple "
},
{
type: "Scatter",
field: "PointSeriesDataSource.YPoint"
//groupNameTemplate: "Scatter Temple"
}],
legend: {
position: "bottom"
},

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

The problem
I need to implement Google CSE when navigating the /search?q=query route.
I navigate form the search input box to the search result page as follows:
I would like to implement my callback as follows: The Google script parses document.location to find the q param and display the results.
Unfortunately, at this stage (callback) the q param is not yet available in document.location.href.
There is no event that triggers after document.location.href is updated and the only way to get it work is to replace router.nivigate by window.location.assign or to use setTimeout.

How it should have been designed (IMHO)
document.location.href should already have been updated with the new route when the route callback function is triggered otherwise router.navigate should be banned when using any api that analyzes the query string.

I building a Kendo Mobile App which is using the Drawer. I have a need to have a particular view hide and show the drawer navigation buttons / header / footer etc. similar to the Kindle reader app.  So that while the user are in the view it is full screen while interacting with this view until you touch near the top or bottom of the screen. Then I need the navigation button etc to reappear.  Any suggestions on how to accomplish this task? Any help would be greatly appreciated. 

I'm looking for an example of casting KendoUI DropDownList using remote data.  

Specifically,
I have a dropdownlist for state.  Once the state is selected, the dropdown list for city populates (based on the selection value of the state dropdown list).  Once the city item is selected, the School dropdown is populated (based off both the state and city values).  Seems simple enough...but

Please note:
//This example on cascading won't work for me because I'm not working with MVC or server-side to handle this
http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html

//I wired up the change event using this example, but did not have any luck
http://www.kendoui.com/forums/kendo-ui-web/dropdownlist/3-cascade-remote-dropdownlists.aspx

//This jsFiddle example is close to what I'm trying to do...but I'm not using oData and wasn't too sure
http://jsfiddle.net/krustev/xuZn9/

//I've seen other examples where the 2nd dropdownlist dataset actually has ALL values and is just filtered - this won't work because the sets are too large to load all at once.

//Here's the code for 2 of the 3 dropdownlists (figured if i could get 2 I could get 3), any help would be much appreciated.

<script type="text/javascript">

    jQuery(document).ready(function () {
        LoadStates(1);
       LoadCities(70);
   });

function LoadStates(pageLoad) {
    var stateDataSource = [
        { stateName: "MA", stateValue: "1" },
        { stateName: "NH", stateValue: "2" },
        { stateName: "VT", stateValue: "3" }
    ];

    var states = jQuery("#StateDropDown").kendoDropDownList({
        optionLabel: "Select State...",
        dataTextField: "stateName",
        dataValueField: "stateValue",
        dataSource: stateDataSource,
        change: function () {
            var stateId = this.value();
            var ddl = jQuery("#CityDropDown").data("kendoDropDownList");
            if (stateId) {
                LoadCities(stateId);
                ddl.enable();
            } else {
                ddl.enable(false);
            }
        }
    });
      
    //if first time on page, select 1st option in dropdown
    var ddlStates = states.data("kendoDropDownList");
    if (pageLoad == 1) {
        ddlStates.select(1);
    }
}

function LoadCities(stateId) {

    //Load all the cities based on a particular state
    var cities = $("#CityDropDown").kendoDropDownList({
        dataTextField: "Text",
        dataValueField: "Value",
        optionLabel: "Select City...",
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    url: ".../api/digital/GetAllCities/" + stateId,
                    cache: false
                }
            },
            schema: {
                //This works correctly, the Web API returns the following when passed in state ID 1 for MAy
                // {"Table":[{"Value":111,"Text":"Boston"},{"Value":222,"Text":"Cambridge"},...{"Value":333,"Text":"Lexington"}]}
                data: "Table"
            }
        }
    });

    //Always set the list to the first option unless on initial page load...TODO
    var ddlCities = cities.data("kendoDropDownList");
    ddlCities.select(0);
}

</script>

<input id="StateDropDown" />                       
<input id="CityDropDown" />  
<input id="SchoolDropDown" disabled="disabled" />

I have found a problem in the loading of the KendoUI Web ComboBox in some cases where a preceding HTML tag is empty, with no close tag.  Here is a jsfiddle showing the problem: http://jsfiddle.net/fwyeadon/q5h3X/8/

The sample contains several ComboBox controls used to accept selection criteria from the user, each placed within a div element.  When run, alert boxes are displayed at the time the first ComboBox, the div containing the second ComboBox, and the second ComboBox are loaded.  The first ComboBox loads and displays fine.  However, the second div and ComboBox do not load correctly, and do not display as a result.  It appears that the DOM elements are loaded, but the kendoComboBox settings are not.

I have found that this problem occurs only when the select element for the first ComboBox is written as an empty tag, as follows.

<select id="_cbSCField_test"/>
or
<select id="_cbSCField_test">

When the above select element is coded with an end tag, the problem disappears.

<select id="_cbSCField_test"></select>

I thought at first this might be a browser-specific problem, but it occurs on current Chrome, IE, and Firefox versions.  The error is somewhat inconsistent, as I have more complex examples along the lines of the jsfiddle sample that work fine.  It is a problem that is easy to work around once you diagnose it, but can be very difficult to find -- especially given that empty tags like the above are perfectly valid HTML5.

Please let me know if this is a bug, and if so when you will fix it.

Regards,
Fred

I want to test run my app in an iphone like frame like in:

http://demos.kendoui.com/mobile/drawer/index.html

How can I do that?

I am building a TabStrip where the content of the tabs is rendered from partial views. Each tab has a grid with its own datasource. I assumed that the content for each tab would not be loaded until the tab is clicked for the first time, but what I am experiencing is that all the data for all the tabs is being hit when the TabStrip is initially loaded. Am I missing something?

TabStrip declaration:

Closing partial view:

When the tabstrip is rendered for the first time, the selected tab is the Asset Review tab, but the datasource for the Closing tab is also being hit.
I don't want the closing tab grid to hit the database until the tab is selected for the first time.
How do I set up the TabStrip to be LoadOnDemand?

<div id="splitter">
 <div></div>
 <div></div>
</div>
<script>
 $(document).ready(function() {
  $("#splitter").kendoSplitter({
   panes: [
    { contentUrl: '../../content/web/splitter/ajax/ajaxContent1.html' },
    { contentUrl: '../../content/web/splitter/ajax/ajaxContent2.html' }
   ]
  });
 });
</script>

<div id="splitter"> is <div class="k-widget k-splitter" id="vertical" style="-ms-touch-action: double-tap-zoom pinch-zoom;" data-role="splitter"> This changes.

1. class = "k-widget k-splitter" is class = "k-splitter" so I want to change.  Where do you need to modify the css file? ( $("#id").attr("class","k-splitter"); This is not desired. )

2. ajax call, How can I remove the loading image? and , order to increase the loading image size?

Hi,

I'm using a customized data source (no transport) with server side paging, and I can't seem to override the total on the datasource. It always seems to be set to the length of the data (the page size). Everything else is working fine but I removed the filtering and sorting to simplify this example.

Here's a js bin that shows my issue: (edit - fixed link)
http://jsbin.com/obuGeHE/2/edit

I expected the total showing on the grid to be twenty and for the grid to show 4 pages (even though in this simplified example I would always return the same 5 rows).

Can someone help me with what I'm missing?

Thanks in advance!

Nathan

Is there a way to find out the scale of the map? For instance how many miles across the map as shown.

Thanks.