When I click the navigation button on a drawer, I get the drawer to the left as intended.

However, the header (which also includes the button) slides to the right as well.
How can I have only the contents below the header slided.

There is no way to insert pictures in this forum so the screenshots are here:

http://dl.dropboxusercontent.com/u/23963309/unslided.png
http://dl.dropboxusercontent.com/u/23963309/actual.png
http://dl.dropboxusercontent.com/u/23963309/desired.png

Hi,

I am new to Kendo, I am facing few issues in fulfilling requirement w.r.t to Kendo UI multiselect.

1.       I am using Kendo UI Multiselect. I want the multiselect widget to act only as a drop down i.e., on click on the widget, it has to show the list of options in the dropdown and the user should not be able to enter text in the multiselect text field. User can only select the option from the dropdown.
Is this possible?

2.       Should the dataValueField be unique?
- If I have dataTextField as {'test1','test2'} and dataValueField as {'test','test'}
- The multiselect gets populated with test1 twice.

Thanks,
Bharath

Hi,
i have try to use kendo ui mobile listview with jquery plugin (rateit - it is a star rating). when i data-init my view it will show. but when i manually insert data into listview it disappear.  below is my code.

template
<script id="tmp" type="text/x-kendo-template">
        
            
            <img  src="#:banner#" class="Banner" />
            <div class="listitem-tab km-listview-link" data-role="content">
                <a data-role="listview-link" href="#:link#" style="text-decoration:none;" class="GoToNearBySub1" >
                    <div>
                        <img class="pullImage" src="#:url#" />
                        <h3 class="MerchantName">#:title#</h3>
                        <p class="MerchantDetail">#:description#</p>
                        <span class="MerchantDetail2">Rate:</span><div class="rateit" data-rateit-value="2.5" styles="margin:0;"></div><span class="MerchantDetail2">#:rate#</span>
                        
                    </div>
                </a>
                <a  data-role="detailbutton"  data-rel="popover" href="#:popup#" class="GetGPSDetail" id="#:gpslatlng#" >...</a>
                
            </div>

    </script>

my view

<div  data-role="view" data-title="Near By" id="listview_home" data-layout="mobile-tabstrip" data-init="CallJs" data-after-show="showstar" data-transition="slide">
    <header data-role="header">
    <link href='myStyles/rateit.css' type="text/css" rel="stylesheet"/>
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a href="#SearchList" data-align="right" data-icon="search" data-role="button" data-click="ResetScrollBar"></a>
           
        </div>
    </header>
    <!--
    <ul id="NearbyList" data-role="listview" data-source="dataSource" data-template="tmp"></ul>
    -->
    <ul id="NearbyList"  data-role="listview"></ul>
    <ul id="AddBtnDiv" data-role="listview"><a data-role="button" id="PressLoad" class="btn">Load More</a></ul> (press thius button to load data from listlist function)
    

    <div id="GetDirection" data-role="popover">
                <div data-role="view" data-title="Direction">
                    <div data-role="header">
                        <div data-role="navbar">
                            <span data-role="view-title"></span>
                        </div>
                    </div>
                    <span data-role="view-title"></span>
                    <ul data-role="listview" data-style="inset" >
                        <li>
                                <i></i><a data-role="button"  class="btn" id="DetailBtn" data-bind="value: title">Get Direction</a>
                        </li>
                    </ul>
                </div>
            </div>

</div>


function listlist(LoadStartNo,LoadEndNo) {

    
   
    var Cat3 = {};
    NextStartNo = LoadStartNo;
    NextEndNo = LoadEndNo;

    if (NextEndNo == 0)
    {
        return;
    }

    var dataSource3 = new kendo.data.DataSource({

        transport: {
            read: {
                type: "Post",
                url: "http://localhost:57613/api/merchant/PostPagingMerchant",
                data: { "StartPoint": NextStartNo, "EndPoint": NextEndNo },
            }
        },
        schema: {

            parse: function (response) {
                Cat3 = JSON.stringify(response);
                var obj = eval("(" + Cat3 + ")");
                //alert(obj.Table.length);
                for (var i = 0; i < obj.Table.length; i++) {
                    var product = {
                        title: obj.Table[i].title,
                        url: obj.Table[i].url,
                        description: obj.Table[i].description,
                        rate: obj.Table[i].rate,
                        popup: obj.Table[i].popup,
                        banner: obj.Table[i].banner,
                        gpslatlng: "3.01181,101.63124",
                        link: obj.Table[i].link
                    };
                    PressLoadProduct.push(product);
                }
                return PressLoadProduct;
            },
            total: function () { return PressLoadProduct.length; }
        },
        serverPaging: true,
        pageSize: 18,
        serverSorting: true
    });

    var listview2 = $("#NearbyList").kendoMobileListView({
        dataSource: dataSource3,
        template: $("#tmp").html()
        //endlessScroll: true
    });

    NextStartNo = NextEndNo + 1;
    NextEndNo = NextEndNo + 5;
    
}

I have been developing traditional aspx pages without the aid of MVC. (I just never drank the MVC cool-aid). I would like to find an example of using Kendo UI within an aspx page including a form running at the server with traditional aspx controls.

I guess the best way of asking for what I am looking for is; how to replace a Telerik data grid or htmlchart with the kendo equivalent.

I find myself in the spot because the Telerik HTML Chart does not support stackable area or stackable lines.  It seems that the Kendo.Dataviz does.

Any non MVC examples with aspx forms would be helpful.

We have a requirement in which we need to automate the URL using Coded UI having Kendo controls. This URL is only accessible in Chrome browser and not in IE. Currently Coded UI is supporting Chrome and other URL having only Html controls. Coded UI is not recognizing the Kendo controls present in Chrome browser.
We had tried recording the controls from IE and playing on chrome, but this is also not working  I wanted to know, whether Chrome browser + coded UI + kendo control combination is possible.

I believe there is a bug in remote filtering dates.  The value doesn't appear to show up anywhere in the querystring.  Here is my grid:


and attached is a picture of the request in fiddler.  The operator, field, and logic show up.  Where is the value at?

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" />