Questions on Kendo UI for jQuery Forum

2 answers

197 views

AxisLabelClick event not firing on y-axis label click

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.

Charts

answered on 14 Dec 2012

1 answer

136 views

Error - Unable to add dynamic content

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

Charts

answered on 14 Dec 2012

2 answers

395 views

Conflict Migrating Telerik MVC 3 Application to Kendo UI

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

<input class="k-input" id="Test" name="Test" type="date" /><script>

jQuery(function(){jQuery("#Prueba").kendoDatePicker({format:"dd-MM-yyyy",min:newDate(1900,0,1,0,0,0,0),max:newDate(2099,11,31,0,0,0,0)});});
Uncaught TypeError: Object [object Object] has no method 'kendoDatePicker'

</script>

General Discussions

answered on 14 Dec 2012

13 answers

2.5K+ views

Grid editing issue with template columns

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

Grid

answered on 14 Dec 2012

11 answers

880 views

Default grid sort behaviour

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
            }]
    });

Grid

answered on 14 Dec 2012

2 answers

172 views

Facebook off canvas Menu, Jquery Mobile slide menu

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

General Discussions

answered on 14 Dec 2012

2 answers

247 views

How to add nodes programatically when using tree view?

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

TreeView

answered on 14 Dec 2012

1 answer

127 views

Slider for Ipad?

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

Slider

answered on 13 Dec 2012

0 answers

80 views

Grid in modal Window shows "null" tooltip when first opened

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.

Grid

asked on 13 Dec 2012

3 answers

245 views

GRID client template don't work.

Hi all I just want to use ClientTemplate option and I can't get it working:

As you can see:

columns.Bound(p => p.BookId).Width(50).ClientTemplate("Some HTML code");

Insead of this lane I should have "Some HTML code" but I have ID's

@model List<Biblioteka.ViewModels.BookViewModel>

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

@(Html.Kendo().Grid<Biblioteka.ViewModels.BookViewModel>()

.Name("BooksKendoGrid")

.Columns(columns =>

{

columns.Bound(p => p.Title);

columns.Bound(p => p.Author);

columns.Bound(p => p.BookGenreId);