I am new to Telerik, I am getting in the options list of the drop down list "years" Undefined instead of 2017, 2015, ...

Any help is appreciated.  Below are the codes.

This is the view:

@(Html.Kendo().DropDownList()
              .Name("years")
              .HtmlAttributes(new { style = "width:100%" })
              .OptionLabel("Select year...")
              .DataTextField("YearName")
              .DataValueField("YearCode")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeYears","Home");
                  });
              })
)
 and this is the controller:

 public JsonResult GetCascadeYears()
        {
            IQueryable years = Year.GetYears();

            if (HttpContext.Request.IsAjaxRequest())
            {
                return Json(new SelectList(
                            years,"YearCode", "YearName"), JsonRequestBehavior.AllowGet
                            );
            }

            return View(years);
        }
and this the model:

public class Year
    {

        public int YearCode { get; set; }
        public String YearName { get; set; }

        public static IQueryable<Year> GetYears()
        {
            return new List<Year>
            {
                new Year {
                    YearCode = 1,
                    YearName = "2017"
                },
                new Year{
                    YearCode = 2,
                    YearName = "2015"
                },
                new Year{
                    YearCode = 3,
                    YearName = "2014"
                },
                new Year{
                    YearCode = 4,
                    YearName = "2010"
                },

            }.AsQueryable();
        }


    }

Regards

I have customer grid, when user double clicks the row, the custom pop up editor will be shown, there is drop down to show list interest but i need to remove the interest of current selected customer row from the viewdata by using interest id. 

Customer Model:

    public class CustomerModel
    {

        [Display(Name = "Customer ID")]
        public int CustomerID { get; set; }

        [Display(Name = "Interest ID")]
        [UIHint("InterestDropDown")]
        public int InterestID { get; set; }

}

InterestDropDown.cshtml

@model int

@(
     Html.Kendo().DropDownListFor(m => m)
            .BindTo((System.Collections.IEnumerable)ViewBag.InterestList)
            .DataValueField("InterestID ")
            .DataTextField("InterestName")
            .OptionLabel("Please select")
)

Customer editor template

<table class="popup-layout-tbl" style="display: table;">
<tbody>

<tr id="trAppID">
<td>
                <div class="k-edit-label popup-label">
                    @Html.LabelFor(model => model.CustomerID , new { @class = "popup-label-text" } )
                </div>
                <div>
                    @Html.TextBoxFor(model => model.CustomerID , new { @readonly = true, @class = "popup-input" })
                    @Html.ValidationMessageFor(model => model.CustomerID )
                </div>
</td>
</tr>

<tr>
<td>
                <div class="k-edit-label popup-label">
                    @Html.LabelFor(model => model.InterestID , new { @class = "popup-label-text" } )
                </div>
                <div>
                    @Html.EditorFor(model => model.InterestID , new { @class = "popup-input" })
                    @Html.ValidationMessageFor(model => model.InterestID  )
                </div>
  
</td>
</tr>

</tbody>
</table>

Thanks.

Hello

We have a grid that we wish to drag row items from.The rows in the grid represent items that are rectangular shapes, so in the hint function we create an image of the shape. These shapes are then dragged from the grid onto a canvas where they will be placed. Our problem is that we would like to offset the cursor so that it is in the middle of the image rather than at the top left corner.; however we do not know the size of any of the images at the time of initialising grid to be draggable.

So is there any way that we can change the cursorOffset option during the hint function?

My first test is very simple plan, binding a remote data url like below, and then display them in my datagrid. The first row is title and below it are values. 

[["P0010001","NAME","state"],
["4779736","Alabama","01"],
["710231","Alaska","02"],
["6392017","Arizona","04"],
["2915918","Arkansas","05"],

When running program, only titles can display in datagrid (Total Populatoin and NAME)- see pic in attachment, all the values are missing; and the following error messages are from Chrome browser:(see the attachmentment) . 
The following are my coding. Thanks! 

        <body>
        <div id="grid"></div>
<script>
queryData = new kendo.data.DataSource({
            type: "json",
            pageSize: 4,
            transport: {
            read: {
                url: "http://api.census.gov/data/2010/sf1?key=f8deadbe74e470d2055cd099ba777b9e717f1ddd&get=P0010001,NAME&for=state:*",
                dataType: "json",
                type:"get"
            }
        },//transport
                
        schema: {
        // the data, which the data source will be bound to is in the "list" field of the             response
        data: "list"
    } //schema           
        
    }); //queryData ends here
$("#grid").kendoGrid({
              selectable: "multiple cell",
              allowCopy: true,
              scrollable: true,    
                
              columns: [
               { field: "P0010001", 
                 title:"Total Population"
               },
               { field: "NAME" }
                ],
              dataSource: queryData,
              height:400
                
            });//dgrid ends here
    </script>       
</body>

My first test is very simple plan, binding a remote data url like below, and then display them in my datagrid. The first row is title and below it are values. 
[["P0010001","NAME","state"],
["4779736","Alabama","01"],
["710231","Alaska","02"],
["6392017","Arizona","04"],
["2915918","Arkansas","05"],

When running program, only titles can display in datagrid (Total Populatoin and NAME)- see pic in attachment, all the values are missing; and the following error messages are from Chrome browser:(see the attachmentment) . 
The following are my coding. Thanks! 

        <body>
        <div id="grid"></div>
<script>
queryData = new kendo.data.DataSource({
            type: "json",
            pageSize: 4,
            transport: {
            read: {
                url: "http://api.census.gov/data/2010/sf1?key=f8deadbe74e470d2055cd099ba777b9e717f1ddd&get=P0010001,NAME&for=state:*",
                dataType: "json",
                type:"get"
            }
        },//transport
                
        schema: {
        // the data, which the data source will be bound to is in the "list" field of the             response
        data: "list"
    } //schema           
        
    }); //queryData ends here
$("#grid").kendoGrid({
              selectable: "multiple cell",
              allowCopy: true,
              scrollable: true,    
                
              columns: [
               { field: "P0010001", 
                 title:"Total Population"
               },
               { field: "NAME" }
                ],
              dataSource: queryData,
              height:400
                
            });//dgrid ends here
    </script>       
</body>

I'm trying to create a 100% stacked column chart that can scroll left and right with the mouse.   Scrolling works properly with normal columns, but not with 100% stacked ones.  Here's a sample that shows the problem:

 <!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.mobile.all.min.css">
<script src="http://kendo.cdn.telerik.com/2016.2.504/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.504/js/jszip.min.js"></script>
</head>
<body>
<div id="example">

<div class="box wide">

<p>Use SHIFT + Mouse Drag Region Selection combination on mouse-enabled devices to zoom in data for a specific period of time</p>

</div>
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        // Sample data
        var data = [];
        for (var i = 0; i < 100; i++) {
          var val = Math.round(Math.random() * 10);
          data.push({
            category: "Cfdsfsfds fsf dsf ds sf ds f" + i,
            value: val
          });
        }

        function createChart() {
            $("#chart").kendoChart({
                renderAs: "canvas",
                dataSource: {
                    data: data
                },
                categoryAxis: {
                    min: 0,
                    max: 10,
                    labels: {
                        rotation: "90"
                    }
                },
                seriesDefaults:{
                  type: "column",
                   stack: {
                        type:"100%"
                    }
                },
                series: [{
                    field: "value",
                    categoryField: "category"
                },{
                    
                    field: "value",
                    categoryField: "category"
                }],
                valueAxis:{
                  min:0,
                  max:1
                },
                pannable: {
                    lock: "y"
                }
            });
        }

        $(document).ready(createChart);
        $("#example").bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

My first test is very simple plan, binding a remote data url like below, and then display them in my datagrid. The first row is title and below it are values. 

[["P0010001","NAME","state"],

["4779736","Alabama","01"],

["710231","Alaska","02"],

["6392017","Arizona","04"],

["2915918","Arkansas","05"],

When running program, only titles can display in datagrid (Total Populatoin and NAME)- see pic in attachment, all the values are missing; and the following error messages are from Chrome browser:(see the attachmentment) . 

The following are my coding. Thanks! 

        <body>
        <div id="grid"></div>
<script>

queryData = new kendo.data.DataSource({
            type: "json",
            pageSize: 4,
            transport: {
            read: {
                url: "http://api.census.gov/data/2010/sf1?key=f8deadbe74e470d2055cd099ba777b9e717f1ddd&get=P0010001,NAME&for=state:*",
                dataType: "json",
                type:"get"
            }
        },//transport
                
        schema: {
        // the data, which the data source will be bound to is in the "list" field of the             response
        data: "list"
    } //schema           
        
    }); //queryData ends here

$("#grid").kendoGrid({
              selectable: "multiple cell",
              allowCopy: true,
              scrollable: true,    
                
              columns: [
               { field: "P0010001", 
                 title:"Total Population"
               },
               { field: "NAME" }
                ],
              dataSource: queryData,
              height:400
                
            });//dgrid ends here
    </script>       

</body>

the problem willl occurs when the editable attribut of the grid is set to "inline" oder "popup".

If i change the value for a field, so it is not valid anymore, the validation message will be shown. When I change the filed back to the original valid value, the validation error is still displayed. The validation function is not called. If i set a break point on the custom validation function in the browser developer tools, the break point will not be arrived in this situation.

You can reproduce it with the "Grid / Custom validator editing" Demo

Steps:

1. Press Edit. The row will be editable
2. Write "A" in the field ProductName. The field will be valid.
3. Write "a" in the field ProductName. The field will be invalid and the validation message "Product Name should start with capital letter" is shown.
4. Write "A" in the field ProductName. The field will be valid but the validation message is still shown.

The same thing with the Fild "Unit Price" which have noch custom validation rather is set to "required"

Steps:

1. Press Edit. The row will be editable
2. Write 1 in the field Unit Price. The field will be valid.
3. Clear the field Unit Price. The field will be invalid and the validation message "Unit Price is required" is shown.
4. Write 1 in the field Unit Price. The field will be valid but the validation message is still shown.

What can I do to validate the fields right in this situation?

How can i add tool tip to the bubble chart in angular directive.?

in below code

<div kendo-chart
                 k-title="{ text: 'Crime stats', position: 'bottom' }"
                 k-legend="{ position: 'top' }"
                 k-series="[ {
                                 type: 'bubble',
                                 xField: 'year',
                                 yField: 'burglary',
                                 sizeField: 'population',
                                 categoryField: 'year'
                             }]"
k-x-axis="{
                                max: 2035,
                                min: 2009,
                                labels: { format: '{0}' },
                                title: { text: 'year' }
                             }"
                 k-y-axis="{
                               min: 10,
                                labels: { format: '{0}' },
                                title: { text: 'Performance Ratio' }
                             }"                             
                 k-series-hover="onSeriesHover"
                 k-data-source="crimeDataSource" 
                 style="height: 250px;" ></div>