I have a page with a chart on it that works great on most browsers I've tried.  However, when I run this page on an iPad, then the fetch data fails with an Unauthorized exception.  I've logged on and the authorization cookie should be send to my MVC WebAPI page which is secured to authorized users only.  Is there some way to ensure that the proper cookies are sent with each request?

Thanks!

Lyle

      function createChart() {
        chartDataSource = new kendo.data.DataSource({
          transport: {
            read: {
              url: function () {
                return "/api/TEDMinute/" + CurrentDeviceId + "?QueryType=" + CurrentQueryType + "&EndDate=" + CurrentDate + '&Key2=' + CurrentDeviceId2;
              },
              dataType: "json"
            }
          },
          requestStart: function(e) {
            document.getElementById('errorMsg').innerHTML = '';
          },
          error: function(e) {
            var currentTimeString = GetTimeString();
            document.getElementById('errorMsg').innerHTML = 'Error fetching data at ' + currentTimeString + '! ' + e.status + ': ' + e.errorThrown;
          },
          sort: {
            field: "ReadingDate",
            dir: "asc"
          },
          change: function () {
            $("#chart").data("kendoChart").refresh();
          }
        });
        $("#chart").kendoChart({
          theme: $(document).data("kendoSkin") || "default",
          dataSource: chartDataSource,
          title: { text: "Usage In Days" },
          legend: { position: "top" },
          seriesDefaults: {
            type: "line"
          },
          series:
          [
            { type: "line", field: "kWh",  name: CurrentDeviceName, axis: "WattAxis", color: "#FF9900" },
            { type: "line", field: "kWh2", name: CurrentDeviceName2, axis: "WattAxis", color: "#339900" },
          ],
          categoryAxis: {
            field: "DisplayDate",
            labels: { rotation: -90 }
          },
          valueAxis: [
          {
            name: "WattAxis",
            title: { text: "kWh" },
            min: 0,
            majorUnit: 10,
            color: "#FF9900"
          }],
          tooltip: {
            visible: true,
            format: "{0:N0}"
          },
          legend: {
            position: "bottom"
          }
        });
      }
 $(document).ready(function () {
        setTimeout(function () {
          createChart();
          $("#example").bind("kendo:skinChange", function (e) {
            createChart();
          });
          $("#chart").data("kendoChart").options.title.text = "Energy Usage In Minutes for " + CurrentDeviceName;
        }, 400);
      });

I have a bar chart with an axisLabelClick event defined.  The event fires when the x-axis label is clicked but not when the y-axis is clicked.  This worked in previous versions.  Any help would be appreciated.

Hi, 

Very basic question - Trying to add a simple are chart from example 
http://docs.kendoui.com/howto/add-charts-and-graphs-to-an-application

I am getting the attached error and not able to proceed. I am not sure what all .js files need to be included for the charts. 
Any help is appreciated.

Thanks,
CAS

Hi,

I'm using Telerik Extensions for ASP .NET MVC and I want to update to a newer version but only Kendo UI is available. I fine it good and try to migrate my application to Kendo. I've installed the Trial and create a new project with Kendo and it works fine.

So, I go to my old project and create a new view and use the Kendo components, add the reference of kendo, add the scripts and contents, add the links in my sitelayout but it not works with my Telerik Application. I converted my View in a partial View, copy the links and it works fine, but when I use my SiteLayout it doesn't works. I get an error Uncaught TypeError: Object [object Object] has no method 'kendoDatePicker'  if I use a DatePicker and Uncaught TypeError: Object [object Object] has no method 'kendoGrid'  if I use a Grid. So, the problem seems to be in the jquery between Telerik MVC extension and Kendo UI.

Is it possible to use both, telerik mvc extensions and kendo UI or I've to migrate all the application? What can I do to resolve this problem?

This is my Site layout

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/kendo/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2012.2.710/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.2.710/kendo.all.min.js")"></script>

    @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.black.css").Combined(true).Compress(true)))
    @Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.sunset.css"))
    
    @RenderSection("HeadContent", required:false)
    @RenderSection("headerjavascript", required: false)


     @helper selected(string c, string culture)
     {
        if (c == culture)
        {
            @:checked="checked"
        }
     
    }


    @{
        var culture = System.Threading.Thread.CurrentThread.CurrentUICulture.Name.ToLowerInvariant();
    }


    <script type="text/javascript">
        $(function () {
            $("input[type='radio']").click(function () {
                $(this).parents("form").submit(); // apply by posting form
            });


            // highlight selected language
            $("input[type='radio']:checked").next().css("font-weight", "bold");
        });
    </script>


</head>


<body>
    <div class="page">


        <div id="header">
            <div id="title" style="float:left;width:50%;">
                <h1>@BS.Admin.Resources.Menu.TituloAplicacion</h1>
            </div>


            @using (Html.BeginForm("SetCulture", "Home"))
            {
                <fieldset>
                    <legend>Please choose your language</legend>
                    <input name="culture" id="en-us" value="en-us" type="radio" @selected("en-us", culture) /> <label for="en-us">English</label> <br />
                    <input name="culture" id="es-cl" value="es-cl" type="radio" @selected("es-cl", culture) /> <label for="es-cl">Espa�ol</label> <br />
                </fieldset>
            }
             <div id="logon-box" align="right" style="padding:15px;height:60px;">
                @{Html.RenderAction("LogOnBox");}
             </div>
 
               @(Html.Telerik().Menu().HtmlAttributes(new { style = "horizontal-align: left;" })
                    .Name("menu")
                    .Items(menu => {
                        menu.Add().Text(@BS.Admin.Resources.Menu.Home).Action("Index", "Home", new { area = "" });
                        menu.Add().Text(@BS.Admin.Resources.Menu.Consultas).Action("Index", "Home", new { area = "" }).Items(subitem =>
                        {
                            subitem.Add().Text(@BS.Admin.Resources.Menu.EnvioEmails).Action("ConsultasEnvioEmail", "Reportes", new { area = "Jugador" });
                            subitem.Add().Text(@BS.Admin.Resources.Menu.ReenviarActivacionCuenta).Action("ReenvioEmailActivacion", "Messages", new { area = "Jugador" });
                        });
                         
                   }))
           
        </div>


        <div id="main">
            @RenderBody()
            <div id="footer">
            </div>
        </div>
    </div>
@(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))</body>
</html>

 this is my viewpage

@using Kendo.Mvc.UI
@model BS.Admin.WebUIMVC.Areas.Financial.Models.ParametrosModel

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

<h2>VerOperaciones</h2>

@(Html.Kendo().DatePicker().Name("Test"))

and this is the part from where I get the error in Console Developer Tools from Google Chrome

Hi There,

I have used a Kendo Grid with its cell editing feature enabled. I am able to successfully bind the grid using the data source & cell edit for non-template columns too works fine.

The attache zip file contains the code for the used .aspx page & also the snapshots of the error I have.

Snapshot 1 shows my Kendo Grid where first 2 columns are Template Columns (Check box & Hyperlink)
Editing on non-template columns is illustrated in Snapshot 2
While editing template columns, on cell click it moves into editable mode, but the text associated to the hyperlink disappears.  Refer Snapshot 3 for details

Could you provide your valuable inputs for?

• Editing Template Column
• Adding a Select/Deselect all checkbox on the header row for the template column containing check boxes

Thanks & Regards,
Manoj Kapoor

Good day,

I have a grid with a few columns. I group by 3 of these fields already in my datasource. I don't want to allow the user the option to sort or group, but by default, I want the grid to have a specific column sorted descending.

The column I want to be sorted descending is ProductType.
If I enable grouping on the grid, this then shows the groups at the top. If I click on the ProductType group at the top of the grid then it sorts descending. That is the behaviour I want set on the grid by default.

Is this possible?

Thank you in advance!

Below is my code:

    var accountSearchDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: function () {
                    if (selectedPortfolioId) {
                        return UrlLibrary.FetchAccountsByPortfolioId + '/' + selectedPortfolioId;
                    } else {
                        return null;
                    }
                },
                dataType: 'json'
            }
        },
        pageSize: 10,
        group: [{ field: "CountryCode" }, { field: "AccountNumber" }, { field: "ProductType"}]
    });
    $('#accountSearchResultsGrid').kendoGrid({
        dataSource: accountSearchDataSource,
        selectable: "row",
        pageable: true,
        height: 500,
        columns: [
            { field: 'AccountNumber', title: 'Account Number' },
            { field: 'ProviderName', title: 'Provider Name' },
            { field: 'ProductName', title: 'Product Name' },
            { field: 'ProductType', title: 'Product Type', width: 80 },
            {
                field: 'PriceClass',
                title: 'Price Class',
                template: function (e) {
                    if (!e.PriceClass) {
                        return '';
                    } else {
                        return e.PriceClass;
                    }
                }
            },
            {
                field: 'ClientFee',
                title: 'Default Fee',
                template: function (e) {
                    if (e.ClientFee == false) {
                        return 'Yes';
                    } else {
                        return 'No';
                    }
                },
                width: 70
            },
            {
                field: 'ClientFee',
                title: 'Client Fee',
                template: function (e) {
                    if (e.ClientFee == true) {
                        return 'Yes';
                    } else {
                        return 'No';
                    }
                },
                width: 70
            },
            {
                field: 'Approved',
                title: 'Approved',
                template: function (e) {
                    if (e.ClientFee != null) {
                        if (e.Approved == true) {
                            return '<input type="checkbox" name="approved" checked="checked" disabled="disabled" />';
                        } else {
                            return '<input type="checkbox" name="approved" id="approved' + e.ProductId + '" />';
                        }
                    } else {
                        return '<input type="checkbox" name="approved" disabled="disabled" />';
                    }
                },
                width: 70
            }]
    });

Hi I'm new to Kendo UI Mobile,

I want to do an "Off Canvas Menu / Slide Menu" a la Facebook, is there an example for it.


Cheers
Michael

Hi,

We are planning to use kendo tree view for displaying a context path as a tree structure, something like

Field value would look something like A/B/C/D

I will split this string using / to get each nodes, I am trying to form tree as below,

A
-B
--C
---D

I am not sure whats the best way to achieve this.

Is it better to form tree datasource object manually and provide it as a datasource?  Or is it good to use append method to append the tree. The problem with append method is that I don't see id for parent node hence I m not sure how to append child corresponding to a particular parent. Can you please let me know the best possible route?

Thanks,
Barani

Hi,

I am new to Kendo UI , suggested by a colleague i had a look last week and was pretty much impressed by the things offered.

Would like to know:
1)Is the slider is available for I-pad's and other mobile devices?
2)If the answer to the previous question is 'Yes', then can we show the silder value on its handle?

Thanks

I have a modal kendo window that I display when the user clicks a button. In javascript code, I call the refresh method to set the url for the window.  Then I call open. The modal opens centered over where the button was.  This works.

But if the cursor happens to be where the grid is (basically I leave the cursor where it is after clicking the button), a tooltip appears with the text "null".

If I quickly move the mouse after clicking the button but before the window actually displays so that the mouse is anywhere else besides the grid, then no tooltip appears.