I have an issue where the initial popup is opened above the drop down list and when you filter and the list becomes small enough it drops below the anchor. 

 Problem is when the drop down is on the bottom of a scrollable page the drop down is obscured and the user can't select the value because the drop down is off screen and when scrolling it closes automatically.

Is there anyway to make the position of the popup sticky? 

thanks

Justin.

I'm trying to setup auto-completion on a single column in my grid. This is being implemented in a backbone+marionette app. I'm following this example for the implementation http://jsfiddle.net/OnaiBai/Naka3/18. 

The view is instantiated in my controller. Nothing happens when I enter text into the input box. Also there aren't any JS errors. 

I can include more of the code if necessary. Any ideas on how I can get the auto-completion to work.

Template App.Templates.Search.SearchBoxStuff : 

View:

I have currently added the following custom validation to my interest name, but interest name has to be unique, so when user add new and existing interest name is already there, it will throw error. However, when user try to edit the record, it should be able to detect whether current interest name is changed, if it is a new interset name then only check only uniqueness validation, otherwise, it should allow the update to go through successfully.

With the following validation, when i try to perform update, it also throw the validation error, and i am do not know how to make this validation valid for Add New all the time, and valid for Update only when interest name is changed.

    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: { // custom rules
                InterestNamevalidation: function (input, params) {
                    if (input.is("[name='InterestName']") && input.val() != "") {
                        var dataSource = $("#Customer").data("kendoGrid").dataSource;
                        var data = dataSource.data();

                        for (var i = 1; i < data.length; i++) {
                            if ($.trim(input.val().toLowerCase()) == $.trim(data[i].InterestName.toLowerCase())) {
                                input.attr("data-InterestNamevalidation-msg", "InterestName should be unique");
                                return false;

                            }
                        }
                    }
                    return true;
                }
            }
        });
    })(jQuery, kendo);

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>