Questions on Kendo UI for jQuery Forum

5 answers

204 views

[Solved] DatePicker depends on JQuery version

Hello,

Does Datepicker depends on JQuery version? I have both JQuery-1.8.2 and jQuery-2.0.3 in my Scripts folder. Please see below how it is referenced in BundleConfig.cs and _Layout.cshtml. However, the DatePicker does not show up and it's giving an error for the Date format. Please suggest.

BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/site").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/site.js"
));

undles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js"));
bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/kendo.common.min.css",
"~/Content/kendo/kendo.default.min.css"));

_Layout.cshtml
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")

DatePicker

answered on 06 Dec 2013

8 answers

428 views

[Solved] Sparkline - two tooltip styles

Kendo version v2013.3.1119

I have two tooltip types which are appearing on two different sets of sparkline charts. I cant work why they are one way for one and another way for the other set. They charts are displaying using the mvvm patten and pretty much copies of each other apart from the using a different 'field' scope.

1. The common ones are displaying a tooltip in more of a table format (to n amount of series in in the sparkline) while hovering the mouse over the plane:
---------------------------------------------------
| series name | custom template |
| series name | custom template |
---------------------------------------------------
^ the only part of the template i provide is for the custom template. This is easy to use on hovering over, and on tablet as one doesn't have to be precise on hovering or clicking on the series to see the values along the axis.

2. The second (more simple) type of tooltip im getting is more like those found on any of the chart tooltips. But are much harder show as it requires hovering over the series values rather than anywhere along the plane.
----------------------------
| custom template |
----------------------------
^ missing the grid like pattern, and series name has gone walkies, and will only show one series at a time. This makes it hard to compare the many series values together.
This is a pain for tablet use however as selecting that 1px line (of a 40px height) on the sparkline is a frustrating challenge.

Can i ask what is driving its choice about using the two tooltip styles? And then be able to compel it to do what is most appropriate for the scenario.

To me these are pretty much identical, first the sparkline displaying the grid style tooltop:

<div data-role="sparkline"

data-series="[{ 'name': 'Orders', 'type': 'column', 'field': 'Combined.OrderCount' }]"

data-tooltip="{ template: $('#rangeTooltipTemplate').html() }"

data-bind="source: dataSource">

</div>

@using (Html.BeginScripts("Daily.Range.Order.Count"))

{

<script type="text/html" id="rangeTooltipTemplate">

<div>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</div>

<div>Count: #: value #</div>

</script>

}

Second the one which is displaying the more simple tooltip. My eyes have pretty much given up on the what is different between the two. The data & schema going into both are identical. The kendo data source is effectively equal and only describes the Date field as a date. There would be different aggregates depending on the page loading:

<div data-role="sparkline"

data-theme="bootstrap"

data-series="[{ 'name': 'Out the door', 'type': 'line', 'field': 'Performance.AvgOutTheDoor' }]"

data-tooltip="{ template: $('#PerformanceToolTipOutTheDoor').html() }"

data-bind="source: dataSource, visible: showCharts">

</div>

@using (Html.BeginScripts("Performance.Range.OutDoorTime", Area.Foot))

{

<script id="PerformanceToolTipOutTheDoor" type="text/template">

<div>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</div>

<div>Out the door: #: value #</div>

</script>

}

Any ideas?

Thanks,
Matt

Sparkline

answered on 06 Dec 2013

2 answers

433 views

[Solved] Griditems depending on selection in other grid

Hi!

I have two grids (A,B).
When I select an item in grid A, details should be displayed in grid B.

Grid A contains product groups like "furniture". There are around 300 groups display in grid A.
Grid B contains the actual products associted with this group (e.g chair, table, ...). There are 10-50 product in each group.
Im using the change event on grid A to get the selected row and will then reload the datasource for grid B.
Basically it works but I see all propertys of product in grid B. I've specified the columns I'd like to display. (please see attached screenshot).
1. What I'm doing wrong?
2. What is the appropriate way to do this? Note: I can't use "client detail templates" in grid A.

Here is my code:
Grid A:

@(Html.Kendo().Grid<LFG.Model.Domain.ArticleGroup>(Model.ArticleGroups)

.Name("groupsGrid")

.Columns(columns =>

{

columns.Bound(o => o.ID);

columns.Bound(o => o.GroupKey);

columns.Bound(o => o.Description);

})

.Pageable()

.Sortable()

.Scrollable()

.Selectable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(LFG.Web.Constants.GridPageSize)

.Events(events => events.Error("grid_error_handler"))

.Model(model =>

{

model.Id(p => p.ID);

})

.ServerOperation(false)

)

.Events(e => e.Change("onRowSelect"))

)

Grid B:

@(Html.Kendo().Grid<LFG.Model.Domain.Article>()

.Name("articlesGrid")

.Columns(columns =>

{

columns.Bound(o => o.ID);

columns.Bound(o => o.Description);

columns.Bound(o => o.ProductLine);

columns.Bound(o => o.Age);

columns.Bound(o => o.Approval);

columns.Bound(o => o.Stockpile);

columns.Bound(o => o.Ordered);

columns.Bound(o => o.Certificate);

columns.Bound(o => o.ArtNr);

})

.Pageable()

.Sortable()

.Scrollable()

.Selectable()

.DataSource(dataSource => dataSource

.Server()

.PageSize(LFG.Web.Constants.GridPageSize)

.Model(model =>

{

model.Id(p => p.ID);

})

)

Event:

function onRowSelect(e) {

var row = this.select();

var id = row[0].childNodes[0].textContent;

console.log("RowSelect - ID: " + id);

var grid = $("#articlesGrid");

if (grid) {

grid.kendoGrid({

dataSource: {

type: "json",

transport: {

read: "/Shared/GetArticlesByGroup?id=" + id

}

});

grid.data("kendoGrid").dataSource.read();

}

KR
Smart Software

Grid

answered on 06 Dec 2013

6 answers

113 views

Editor format dropdown collapsing when using twitter bootstrap

I'm using the editor control in conjunction with Twitter Bootstrap for layout. The format dropsown is fine on page load but after it is clicked once to set text to be a H2 for example the dropdown list collapses to a narrow list where you can now longer read the options.

Is there a CSS fix I can apply to either kendoui or boostrap to prevent this happening?
Thanks,

Mark

Editor

answered on 06 Dec 2013

3 answers

186 views

ModalView open then immediately closes

https://github.com/telerik/kendo-mobile-music-store

I've downloaded this repo locally to play with things a bit, and noticed that the error modal window has a strange behavior. It opens for just a split second, and then immediately closes itself.

ModalView

answered on 06 Dec 2013

1 answer

261 views

Delete Marker

Is there a way to clear all markers from a map or delete a single marker?

Map

answered on 06 Dec 2013

1 answer

163 views

Year navigation just like month

Is there any way to change the year just like month on single click(i.e clicking on side arrows),
now in order to change the year we must make 3 clicks.

The problem is I kept the calendar in Drop down list, so if i want to change the year,
I must open the drop down 3 times this is horrible to user.

Calendar

answered on 06 Dec 2013

16 answers

434 views

[Solved] Android Use Native Scrolling Display Issue on List VIew - Android 4.1.2

When I run a listview with native scrolling enabled, and there is enough items to make it scroll, the containing ul element is twice as long as it normally should be on the SGS3 I am testing on running 4.1.2. Other devices I deploy to seems to not have this issue some running 4.2.

I feel like it is related to the '-webkit-transform-origin' being set to something weird. The list looks fine, but when you click on an item it is almost like the clickable vertical area is expanded by 2x. Its weird because it is visually rendered fine, but there is lots of extra white space below the list and the clickable areas of each list item doesn't correspond with the visual area, its much larger vertically than it would normally be and ends up shifting each clickable area downward.

Running Kendo UI Complete v2013.2.716

ListView (Mobile)

answered on 06 Dec 2013

2 answers

274 views

Grid-pager popup problem

Hello,

I'm using Kendo UI to create a SPA business application, which works perfect, except for 1 thing concerning the kendo Grid.
Since the last version, i noticed the pager popup is being appended to the body instead of the container element in which a view is shown.
Normally this wouldn't be so much of a problem, except that detaching a view with a grid doesn't detach the pager popup.
So when switching back and forth between different views, pager popups keep getting appended to the body.

I attached 2 files.
1 shows 4 divs with the pager popup, the result after switching views 4 times.
the other one shows the grid itself.

The page options are being set through creating the grid.

$('#business-grid').kendoGrid({

dataSource: that._businessDatasource,

autoBind: false,

sortable: true,

selectable: "row",

navigatable: true,

pageable: {

refresh: true,

pageSizes: [5, 10, 15, 20],

messages: {

display: "{0} - {1} van {2} bedrijven",

itemsPerPage: "bedrijven per pagina"

}

I hope this is a bug and can be fixed.

Thanks in advance.

Grid

answered on 06 Dec 2013

3 answers

174 views

Kendo Tab is not visible while loading ajax

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Import Namespace="Microsoft.SharePoint" %>

<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SCExcelReportDashboardView.aspx.cs" Inherits="Shell.SharePoint.SSP.SSC.Visualization.SCExcelReportDashboardView" %>

<html>

<head id="head1" runat="server">

<title>Excel Report</title>

<style type="text/css">

ul

{

list-style-type:none;

margin:0;

padding:0;

}

li

{

display:inline !important;

}

</style>

</head>

<body>

<div id="loadingDivExcelReport" style="display: none; z-index: 1000; position: absolute; padding-top: 130px; padding-left: 50%;text-align:center">

<img id="" alt="loading.." src="/_layouts/images/Shell.SharePoint.SP.SSC/KendoUI/loading-image.gif"><br>Loading content, please wait..

</div>

<table>

<tr>

<td >

<div id="excelReportTabstrip">

</div>

</td>

</tr>

</table>

<script type="text/javascript">

var exportToExcelUrl;

function onSelect(e) {

//alert("onSelect");

$('#loadingDivExcelReport').css('display', 'block');

if (e.item.innerText == "Export") {

window.location.href = exportToExcelUrl + "/model?$format=workbook";

}

//kendoConsole.log("Selected: " + $(e.item).find("> .k-link").text());

}

function onActivate(e) {

//alert("onActivate");

$('#loadingDivExcelReport').css('display', 'none');

//kendoConsole.log("Activated: " + $(e.item).find("> .k-link").text());

}

function onContentLoad(e) {

//alert("onContentLoad");

//kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() + "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");

}

function onError(e) {

alert("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);

//alert("Error Occured While Loading...!");

//kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);

}

$(function () {

//debugger;

function GetQueryParameters() {

var vars = [], hash;

var hrefValue = window.location.href;

hashes = hrefValue.slice(hrefValue.indexOf('?') + 1).split('&');

for (var i = 0; i < hashes.length; i++) {

hash = hashes[i].split('=');

vars.push(hash[0]);

vars[hash[0]] = hash[1];

}

return vars;

}

var tabStrip = $("#excelReportTabstrip").kendoTabStrip({ animation: false, collapsible: false, select: onSelect, activate: onActivate, contentLoad: onContentLoad, error: onError }).data('kendoTabStrip');

var fileName = GetQueryParameters()["ExcelFileName"];

var excelSheetInfo = GetQueryParameters()["SheetNames"].split('|');

var startDateTime = GetQueryParameters()["StartDate"];

var endDateTime = GetQueryParameters()["EndDate"];

var analysisMode = GetQueryParameters()["AnalisysMode"];

var currentWebUrl = window.location.pathname;

currentWebUrl = currentWebUrl.substring(0, currentWebUrl.lastIndexOf('/') - 7);

exportToExcelUrl = window

.location.protocol+"//" + window.location.host + currentWebUrl + "_vti_bin/ExcelRest.aspx/Lists/SCExcelReports/" + fileName;

for (var i = 0; i < excelSheetInfo.length; i++) {

var excelReportUrl =window

.location.protocol+"//" + window.location.host + currentWebUrl + "_vti_bin/ExcelRest.aspx/Lists/SCExcelReports/" + fileName + "/model/Ranges('" + excelSheetInfo[i] + "')?Ranges('AnalysisPeriod')=" +

"%22" + startDateTime + ";" + endDateTime + ";" + analysisMode + "%22";

tabStrip.append({

text: excelSheetInfo[i],

contentUrl: excelReportUrl

});

}

tabStrip.append({

text: 'Export',

imageUrl: "/_layouts/images/Shell.SharePoint.SP.SSC/KendoUI/ExportToExcel.png",

content: "Export to Microsoft Excel"

});

tabStrip.select(tabStrip.tabGroup.children('li').eq(0));