I have been using Kendo UI successfully, but am now working on implementing the image browser (in the editor), and apparently I need a DLL.

The DLL is not in the Kendo Web download. I see an MVC download, but I'm not using MVC.

Is there a standard Ajax dot net dll?

-Ken W

http://docs.telerik.com/kendo-ui/api/framework/draggable#configuration-holdToDrag

Is it possible to configure how long the user has to hold before it starts dragging?  It feels a little long to me right now.

  Nick

Hi,

I have a set of values that change over time that are being represented as a column type kendo-chart . The values are on the y axis and the date is on the x-axis as usually expected. I'd like to overlay this chart with additional information at intermediate date points. 

For instance if the column graph shows the cpu usage at different points in time today, I'd like to show a message on the time axis when an application was started. I will not have the cpu usage value at the time the application started. I'd like to however show it on the right instance on the graph.

I did look at the stock chart for this purpose but inferred that its only built for showing stock information. Its not possible to show a mouse over popup unless I have a value. The popup does not show up unless the high and low values are different.

Thanks,
Rajesh

Hi,

I have a web app based on Kendo UI, and it works sufficiently well on desktop and on the iPad.
Now I want it to be used by Android tablet users, but tests show that performance will be a problem.

It manifests even on Kendo UI demos itself, with a grid and nothing else: http://demos.telerik.com/kendo-ui/grid/index.

On a tablet with 4x1.6 Ghz CPU it takes 5 seconds for the data to show in a grid after page refresh, which is already too much for such a simple page.
On a tablet with 2x1.0 Ghz CPU it takes 10-11 seconds even!
That's when all the resources used should be cached already.

Are there any guidelines to improve the performance on Android?
I do need to run the app on lower end devices, and 10+ seconds to initialize stuff is just unbearable.

Hi All,

I've created a kendo scheduler to display report event date. and customized below config:
     - overwrite the CSS ".k-event-template " to change mouse over cursor to printer
    - enable double click on event item to edit .
    - disable double click to Create item.   
  
user may not know double to create/edit. it quite confusing for users. so we want to create extra button on top of calendar to open "ReportDateEditor" template. 

any example to show trigger create/edit popup form from other ?  


My code as below:


@(Html.Kendo().Scheduler<ReportDateScheduleViewModel>()
              .Name("scheduler")
              .Timezone("Asia/Hong_Kong")
              .Messages(m => m.Editor(ed => ed.EditorTitle("Edit Report Date")))
              .DataSource(src => src
                  .Model(m =>
                  {
                      m.Id(vm => vm.Id);
                      m.Field(vm => vm.RecordStatus).DefaultValue(ModelConstant.RecordStatusActive);
                      m.Field(vm => vm.Type).DefaultValue("WPI");
                  })
                  .Read("IndexData", "ReportDate")
                  .Update("UpdateReportDate", "ReportDate")
                  .Create("CreateReportDate", "ReportDate")
              )
              .Editable(e =>
              {
                  e.Destroy(false);
                  e.Create(false);
                  e.Resize(false);
                  e.Update(true);
                  e.TemplateName("ReportDateEditor");
              })

              .Resources(resource => resource.Add(m => m.EventType)
                  .Title("Report Type")
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .DataColorField("Color")
                  .BindTo(ViewBag.ReportTypeMetaData))
              .Views(view => view.MonthView())
              .Deferred()
              )

Is there anyway to add a descriptive text based title to the map shapes when using GEOjson data?  I have a fill color but want to put a text overlay on the shape as well, i.e. the two letter state abbreviation.

Hello,

Attached in the code where I want to display the names of multiselect names in a Kendo Grid. I am unable to do it.

In the edit mode for file "AngularGridWithMultiSelect_RowMode.cshtml", In the controller method "UpdateProductsForGrid" , I get list of Ids of Order multiselect as string and then I get names of order. 
Can you let me know how to show the names? What is missed...

I am testing how well KendoUI works with bootstrap/ angularjs by embedding the example at  http://demos.telerik.com/kendo-ui/grid/angular exactly as is (the AngularJS version that is, except for placing the controller definition into my app.js file) into a boostrap template bought off-the-shelf. 

The result is firstly that the container of detail grid is being placed above the main grid (instead of appearing under the expanded row of the main grid). More importantly, the detail grid does not show up at all and when I check the console, the error message is "TypeError: Cannot read property 'EmployeeID' of undefined". Now EmployeeID is meant to be a property of dataItem which means it is not defined. 

Troubleshooting this I set the filter as follows 

filter: { field: "EmployeeID", operator: "eq", value: 1 }

(i.e. I replaced dataItem.EmployeeID with the value of 1 to see the effect when there is no dependence on the dataItem object).

The result I observe is as follows:
1) the detail grid loads up ahead of the main grid 
2) the detail grid is placed on top of the main grid (rather than inlined under an expanded row of the main)
3) ALL records are returned into the detailGrid instead of the ones having EmployeeID of 1).

I have been stuck on this for 3 days and my ticket on support not responded to in the past 2 days. I need some guidance troubleshooting this as I understand from documentation that AngularJS and KendoUI should work seamlessly and using a customized boostrap template should at worst cause some misalignment of visual elements rather than outright failure of replicated code logic working.

Hello,

I have written a custom edit for a grid. In the controller method, I get the Id of the row of the grid.
Now , I want to initialize the editor (EditProduct.cshtml) having various kendo controls with the row values of the grid.  I can get these values from a method "GetProductForId".
I tried using a datasource (code below in EditProduct.cshtml) but could not achieve as I do not know how to assign these values to various control on EditProduct.cshtml.  I want various controls on the EditProduct.cshtml to be loaded  (when page opens) with values from a controller method like "GetProductForId". This method is given below. I cannot hard code values.

How do I achieve this? Can you share a sample code...


/********************************************************/
EditProduct.cshtml

@{
    ViewBag.Title = "Edit Product";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section HeaderSection {
 

    <link href="../../styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="../../Scripts/angular.min.js" type="text/javascript"></script>
    <script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
    <script src="../../Scripts/kendo.angular.min.js" type="text/javascript"></script>
   

}


    <div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
 

  <div class="details">
  <h5>Product Name </h5>
  <input kendo-masked-text-box style="width: 300px"  
            k-mask="''"
            k-options="productNameOptions"
            ng-model="initName"/>


   <h5> Price</h5>
   <input kendo-numeric-text-box k-min="0", k-max="99999"
            k-options ="priceOptions"   
            ng-model="initPrice"/>

   <h5> Select</h5>
   <input type ="checkbox"  id="checkbox1" ng-model="initValue"/>

   <h5> Choose Date</h5>
   @*<input kendo-date-picker   k-format="'dd MMMM yyyy'" ng-model="dateString" k-ng-model="dateObject"/>*@
  <pre>
@*dateString: {{ dateString }}
dateObject: {{ dateObject | date:"EEEE, MMMM d, yyyy" }}
typeof dateObject: {{ getType(dateObject) }}
dateObject instanceof Date: {{ isDate(dateObject) }}*@
</pre>
   <input id="datepicker" value style="width: 300px;"/>


    <h5>Categories </h5>
    <select id="categories1"
            kendo-drop-down-list style="width: 300px"
            k-options="customOptions"></select>

    <h5>Save Details </h5>
    <kendo-button on-click="onSave()"> Save</kendo-button>      

  </div>

  <style>
    .dropdown-header {
      font-size: 1.2em;
    }

    .dropdown-header > span {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-align: left;
      display: inline-block;
      border-style: solid;
      border-width: 0 0 1px 1px;
      padding: .3em .6em;
      width: 79%;
    }

    .dropdown-header > span:first-child {
      width: 82px;
      border-left-width: 0;
    }

    .selected-value {
      float: left;
      width: 20px;
      margin: 0 4px;
    }

    #customers-list .k-item > span{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      border-style: solid;
      border-width: 0 0 1px 1px;
      vertical-align: top;
      min-height: 95px;
      width: 79%;
      padding: .6em 0 0 .6em;
    }

    #customers-list .k-item > span:first-child{
      width: 77px;
      border-left-width: 0;
      padding: .6em 0 0 0;
    }

    #customers-list img {
      -moz-box-shadow: 0 0 2px rgba(0,0,0,.4);
      -webkit-box-shadow: 0 0 2px rgba(0,0,0,.4);
      box-shadow: 0 0 2px rgba(0,0,0,.4);
      width: 70px;
      height: 70px;
    }

    #customers-list h3 {
      font-size: 1.6em;
      margin: 0;
      padding: 0;
    }

    #customers-list p {
      margin: 0;
      padding: 0;
    }
  </style>
</div>
</div>

<script>
    angular.module("KendoDemos", ["kendo.directives"]);
    function MyCtrl($scope) {

        var productName, price, select, date1, categoryId, categoryName;
        var initdate="10/10/2011";

        $scope.categoriesDataSource = {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    dataType: "json",

                    url: "http://localhost:57795/Products/GetCategoryForDropdownList"
                }
            }
        };

        $scope.customOptions = {
            dataSource: $scope.categoriesDataSource,
            dataTextField: "CategoryName",
            dataValueField: "CategoryId",
            optionLabel: 'Select',
            autoBind: false,
            select: Category_OnSelected
        };

        function Category_OnSelected(e) {


            var dataItem = this.dataItem(e.item.index());
            var Id1 = dataItem.CategoryId;
            categoryId = Id1;
            categoryName = dataItem.CategoryName;



        }


        //Initializations
        //  $scope.initName = "";
        //$scope.initPrice = 0;
        //  $scope.initValue = false;
        //end



        $scope.productNameOptions = {

            //  change: productName_onChange
        };

        function productName_onChange(e) {
            productName = this.value();

        }

        $scope.priceOptions = {
            change: price_onChange
        };
        function price_onChange(e) {

            price = this.value();
            
        }

        //SKK: CheckBox is tricky
        $('#checkbox1').click(function () {
            if ($(this).prop('checked')) {
                select = true;
            }
            else {
                select = false;
            }
            // alert("inside check fn")

        });

        $scope.dateOptions = {

            change: date_onChange
        }

        function date_onChange() {
            //alert("date change");
            date1 = kendo.toString(this.value(), "MM/dd/yyyy");




        }

        function date_onOpen() {
            alert("date open");
            $("#datepicker").val = "10/10/2011";




        }

        $("#datepicker").kendoDatePicker({

            change: date_onChange
           // open: date_onOpen

        });

        $scope.onSave = function () {

            productName = $scope.initName;
            // price = $scope.initPrice;
            //select = select;  //SKK: html checkbox value....

            //date1 = $scope.dateString;
            //date1 = kendo.toString(($scope.dateString), "MM/dd/yyyy");
            //  date1 = kendo.toString(($scope.dateObject), "MM/dd/yyyy");

            // alert(productName);
            //alert(price);
            //alert(select);
            // alert(date1);

            //alert(categoryId);

            //        alert(" 1--Save button");
            var product2 = { ProductName: productName, Price: price, Select: select, Date: date1, CategoryId: categoryId };
            //SKK: CategoryName is not required but to avoid finding from Id in controller method, its done
            //var product1 = kendo.stringify(product2);
            var product1 = JSON.stringify(product2);
            //      alert(" Save button");
            $.ajax(
                {
                    type: 'post',
                    url: 'http://localhost:57795/Products/CreateProductForGrid',
                    dataType: 'json',
                    data: { productDetails: product1 },

                    success: function (result) {
                        alert("Success");
                    }

                }
              )


        }


    }


</script>

          <script>
                $(function () {
                    var productDataSource = new kendo.data.DataSource({
                        // type: "json",
                        serverFiltering: true,
                        serverPaging: true,
                        serverSorting: true,
                        pageSize: 10,
                        transport: {
                            //read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                            read: "http://localhost:57795/Products/GetProductsForGrid_RowMode",
                            //dataType: "json",
                            contentType: "application/json",
                            type: "Get"

                        }

                        


                    });


                    productDataSource.read();

                    var data = productDataSource.data();
                    alert(data);
                    alert(data.length);
</script>
/********************************************************/
Controller Method:

 public ActionResult EditDetails(int Id)
        {
            Product model = null;
           // model = getModel(model, SampleModel.SessionKey);
            //SampleModel oModel = model.List.Single(p => p.SampleId == Id);
            Product oModel = new Product();

            oModel.ContextId = Id;  //Store the Id in model

            //ViewBag.Title = "Edit Sample - " + oModel.SampleName;

            
            
            return View("EditProduct");
        }

 public ActionResult GetProductForId([DataSourceRequest] DataSourceRequest request)
        {

            Product product = new Product(); //getModel(model, SampleModel.SessionKey);
            // model = getModel(model, SampleModel.SessionKey);

            //get Id stored in mode
          //  long Id = model.ContextId;

            DateTime dt = new DateTime(2014, 10, 10);

            List<Product> list = new List<Product>();

            list.Add(new Product(1, "Product1", 100.25M, true, dt, "Godrej", "APAC"));
          
    //Form product object which is to be returned for the Id (from the list)

            return Json(new[] { product }.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

        }


/*********************/

Updated my Telerik project to Kendo UI Core 2014.3.1119 and I'm getting 80 errors in the kendo.mobile.d.ts file.

Seem to be a lot of % signs in the code. Starts at line 1506.

Thanks.