Questions on Kendo UI for jQuery Forum

1 answer

1.1K+ views

Frozen columns on right side, how do i move the vertical scrollbar to be after the frozen columns?

I have a grid and I made the command column frozen and right aligned by using the code below. My question is how do I move the vertical scrollbar so that it is on the right side of the frozen columns instead of the left side?

.k-grid-content-locked {
float: right;
}
.k-grid-header-locked {
float: right;
}

Grid

answered on 01 Nov 2016

1 answer

323 views

Some way to change the calendar template of scheduler

Regards,

I want show in the scheduler some days colored and some days with normal colors. I try this without results:

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler._showCalendar();

$('.k-animation-container').css('display', 'none');

scheduler.popup.close();

var calendar = scheduler.calendar;

calendar.month = {

content: $(

'<script id="cell-template" type="text/x-kendo-template"><div class="#= data.value < 10 ? "exhibition" : "party" #"> #= data.value #  </div> </script>'

).html() };

And

calendar.month = { content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +

'<div class="' +

'# if (days.indexOf(data.value) > -1) { #' +

'calendar bold-day" # } #' +

'"> #= data.value #</div>'+

'# } else { #' +

'#= data.value #' +

'# } #' };

Thanks for the help.

Scheduler

answered on 01 Nov 2016

1 answer

144 views

toolbar template isn't synchronized horizontally with the grid content

I want to synchronize the toolbar template with the grid content when I move the horizontal scroll bar.

Sample code is here.

When you display the horizontal scroll bar to resize the window, you will find to hide "rightButton".

If you scroll right, only the grid content is scrolled horizontally.

How do I synchronize the toolbar with the grid content?

Grid

answered on 01 Nov 2016

1 answer

59 views

Filterable ListView with serverPaging always returns the first records.

Hi everyone.

Well I first created this post under the DataSource forum but couldn't move it here (http://www.telerik.com/forums/filterable-listview-with-serverpaging-always-returns-the-first-records). Please erase the previous one if you guys think it's worth it to be there.

So, I've been experiencing some issues with the following listView

<ul data-role="listview" id="allFinancingsScroller" data-filterable='{field: "CompanyName", ignoreCase: true, operator: "contains"}' data-template="allFinancingsViewModelTemplate" data-bind="{ source: allFinancingsViewModel.dataSource }" data-pull-to-refresh="true" data-endless-scroll="true" data-messages=

'{ "releaseTemplate": "Release to refresh! / Afficher plus de données", "pullTemplate": "Pull to refresh! / Tirez pour actualiser!", "refreshTemplate": "Refreshing! / Actualisation en cours!" }'

></ul>

<script type="text/x-kendo-template" id="allFinancingsViewModelTemplate">

<a href="components/financingsDetails/view.html?id= #: data['Id'] #">

<div class="teaser">

<figure>

<span>#:data['Symbol']#</span>

</figure>

<div class="teaser-content">

<h2>#:data['CompanyName']#</h2>

<div><span>Amount being raised: </span> <span>$#:data['AmountRaised'].substring(0,data['AmountRaised'].length-3)#</span></div>

#if(data['Industry']){#

<div><span>Sector: </span> <span>#:data['Industry']#</span></div>

#}#

#if(data['Exchange']){#

<div><span>Exchange: </span> <span>#:data['Exchange']#</span></div>

#}#

<div>

#if(data['Status'].length > 0){#

<span class="status">#:data['Status']#: </span>

#} else {#

<span>Date: </span>

#}#

<span>#:data['TimeStamp'].substr(8, 2) + "/" + data['TimeStamp'].substr(5, 2) + "/" + data['TimeStamp'].substr(0, 4)#</span>

</div>

</a>

</script>

And this is the JS code.

var dataProvider = app.data.allFinancingsDataProvider;

var dataSourceOptions = {

transport: {

read: {

url: function() {

return dataProvider.url + "?ismobile=true&Lang=" + locale;

},

dataType: 'json'

}

},

schema: {

data: 'ApiDataModel',

total: 'TotalFilteredRecords'

},

serverPaging: true,

pageSize: 40

};

var dataSource = new kendo.data.DataSource(dataSourceOptions);

var allFinancingsViewModel = kendo.observable({

dataSource: dataSource

});

The problem is with the filter input for the ListView component which always return the first records, btw the filter is applied on the 'CompanyName' property

For example if my elements are: ["AA" , "BB", "CC", "ZA", "YA" ]

If I filter using the string 'A' the resulting elements will be "AA", "BB" and "CC", instead of "AA", "ZA" and "YA" which is the correct result.

I realized that If I remove the property serverPaging the filter works as expected with no issues, but as soon as the serverPaging property is placed this weird behavior appears. I do need the serverPaging property though :(

Does anyone know what could be the root of this problem? It's been driving me crazy.

Thank you very much!

ListView (Mobile)

answered on 01 Nov 2016

1 answer

189 views

How to get SparkLine to update when changing DataSource URL?

I have a Kendo UI Sparkline as part of my dashboard. I have a dropdown control that has dates in it and I want my Sparkline to change when the date is changed on the date dropdown. I've checked the URL of the datasource and it updates when the dropdown is changed, however the sparkline doesn't make the API call when I perform a datasource sync. How do I get the sparkline to update? I'm trying to mimic the functionality present in the Northwind sample app located here: http://demos.telerik.com/aspnet-mvc/html5-dashboard-sample-app/

Here is my code:

<div class="row">

<div class="col-md-12">

<input type="search" id="sparklineDropdown" style="width: 200px;float:right;"/>

</div>

<div class="row">

<div id="RevenueContainer" class="col-md-4">

<h4>REVENUE</h4>

<p><span style="font-weight:bold;font-size:1.5em;" id="RevenueLabel"></span></p>

<span id="Revenue" class="k-sparkline" style="width: 100%;line-height: 175px;"></span>

<script>

</script>

</div>

<div id="WorkOrderContainer" class="col-md-4">

<h4>WORK ORDERS</h4>

<p><span style="font-weight:bold;font-size:1.5em;" id="WorkOrderLabel"></span></p>

<span id="WorkOrders" class="k-sparkline" style="width: 100%;line-height: 175px;"></span>

</div>

<div class="col-md-4">

<script>

function createChart() {

...

}

$(document).ready(createChart);

$(document).bind("kendo:skinChange", createChart);

</script>

</div>

<div id="grid"></div>

<script>

$(document).ready(function() {

var data = [

{ text: "This month", value: "0" },

{ text: "September 2016", value: "1" },

{ text: "August 2016", value: "2" },

{ text: "July 2016", value: "3" }

];

$("#sparklineDropdown").kendoDropDownList({

dataTextField: "text",

dataValueField: "value",

dataSource: data,

change: onChange

});

function onChange() {

var d = new Date();

d.setMonth(d.getMonth() - $("#sparklineDropdown").val());

var wosparkline = $("#WorkOrders").data("kendoSparkline");

wosparkline.dataSource.transport.options.read.url = "/api/workorder/workordersbymonth/all/" + d.getFullYear() + "/" + (d.getMonth() + 1);

wosparkline.dataSource.sync();

}

function createWOSparklines() {

var workorderDataSource = new kendo.data.DataSource({

type: "json",

transport: {

read: {

url: "/api/workorder/workordersbymonth/all/2016/10",

contentType: "application/json"

}

},

schema: {

data: "Data",

total: "Total",

model: {

fields: {

Date : { type: "date" },

WorkOrders: { type: "number" }

}

});

$("#WorkOrders").kendoSparkline({

theme: "metro",

series: [{

type: "column",

field: "WorkOrders",

color: "#1996e4",

gap: 0.2,

categoryField: "Date",

aggregate: "sum"

}],

categoryAxis: [{

type: "date",

baseUnit: "days"

}],

dataSource: workorderDataSource,

autoBind: true,

dataBound: function onDataBound(e) {

$('#WorkOrderLabel').text(e.sender.dataSource.total());

}

});

}

function createSparklines() {

// Create

var revenueDataSource = new kendo.data.DataSource({

type: "json",

transport: {

read: {

url: "/api/workorder/revenuebymonth/all/2016/10",

contentType: "application/json"

}

},

schema: {

data: "Data",

total: "Total",

model: {

fields: {

Date: { type: "date" },

Revenue: { type: "number" }

}

});

$("#Revenue").kendoSparkline({

theme: "metro",

series: [{

type: "column",

field: "Revenue",

color: "#1996e4",

gap: 0.2,

categoryField: "Date",

aggregate: "sum"

}],

categoryAxis: [{

type: "date",

baseUnit: "days"

}],

dataSource: revenueDataSource,

tooltip: {

format: "{0:c2}"

},

autoBind: true,

dataBound: function onDataBound(e) {

$('#RevenueLabel').text("$" + e.sender.dataSource.total() + ".00");

}

});

}

$(document).ready(createSparklines);

$(document).bind("kendo: skinChange", createSparklines);

$(document).ready(createWOSparklines);

$(document).bind("kendo: skinChange", createWOSparklines);

</script>

Sparkline

answered on 01 Nov 2016

1 answer

306 views

How can I add dropdownlist into a kendo-mobile-tab-strip

Hi,

I need to add a drop list to the mobile-tab-strip, I write this:

kendo-mobile-layout(k-id="'default'")
kendo-mobile-header
kendo-mobile-tab-strip
a(href='#!/' data-icon='Canvas') Canvas
a
select(kendo-drop-download-list placeholder="Content")
option(href='#!stackup') Stackup

however, the option stackup doesn't work, the route is not true.

TabStrip (Mobile)

answered on 01 Nov 2016

6 answers

1.0K+ views

b.slice is not a function?

Hi all,

I am trying to get an XML datasource working, but unfortunately without success.
The XML-data I provided locally in a variable. The whole code is below.

If I load the page firebug comes up with an error message:

b.slice is not a function.

Can anyone assist please?
Thanks for any help!

<html>

<head>

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

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

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

<script src="/js/kendo/js/kendo.web.min.js" type="text/javascript"></script>

</head>

<body>

<div id="grid">

</div>

</body>

<script type="text/javascript">

$(

function()

{

var dsXMLData = "<items><Item><No>4711</No><Description>Artikel 4711</Description><UnitPrice>12.34</UnitPrice></Item><Item><No>4712</No><Description>Artikel 4712</Description><UnitPrice>24.68</UnitPrice></Item></items>";

var dsXML = new kendo.data.DataSource (

{

data: dsXMLData,

schema:

{

type: 'xml',

data: '/items/Item',

model:

{

fields:

{

itemno: { field: "No/text()" },

description: { field: "Description/text()" },

unitprice: { field: "UnitPrice/text()" }

}

});

dsXML.read();

$("#grid").kendoGrid(

{

columns: [{title: "Artikel Nr.", field: "itemno"},

{title: "Beschreibung", field: "description"},

{title: "VK-Preis", field: "unitprice"}],

dataSource:

{

data: dsXML

}

});

}

);

</script>

</html>

Data Source

answered on 01 Nov 2016

3 answers

1.0K+ views

Tooltip prevents button click event

I am trying to put a tooltip on a button link as shown below. The button is in a grid, so I have included the template. It is just an image with font-awesome, so there is no text. Because I am using Angular, the event that needs to be called is an ng-click event.

template:

'<a data-toggle="tooltip" title="Deactivate" class="btn ct-image-button" ng-click="$ctrl.changeActivation(dataItem)">' +

'<i class="fa fa-times-circle fa-lg red-color" aria-hidden="true"></i>' +

'<span class="sr-only">Deactivate</span>' +

'</a>'

I have tried adding the tooltip using the kendo-tooltip attribute on <a>, as well as adding during the component's $onInit method (shown below):

$ctrl.$onInit = function () {

var grid = $('#grid');

grid.kendoTooltip({

filter: '[data-toggle="tooltip"][title="Deactivate"]',

content: 'Deactivate'

});

};

However, when I hover over the button, either the tooltip appears or the button can be clicked. This prevents users from clicking on the button once the tooltip is shown.

Finally, I have tried adding a <span> around my button with the tooltip on that. This causes a mix of kendo-tooltip and standard tooltip to appear, depending on where my cursor is located.

Is there any way to use the tooltip with a button?

ToolTip

answered on 01 Nov 2016

2 answers

205 views

background color for resources-cell

Hi everyone,

I'd like to use specific background colors for each resources-cell in the scheduler.

This means, corresponding to the demo in http://dojo.telerik.com/oQIMU, I'd like to set a background-color for the cell with the text "Alex" and a different one for the cell with the text "Bob".On the corresponding demo, there are colors set for the entries for "Alex", "Bob" and Charlie. Unfortunately, I don't see where these colors apply.

It would also be possible to use css-classes to set the background-color and apply the corresponding css-class to the resources-cell.

Which would be the easiest solution to do so? Is there a possibility to create a custom template for the resources-cells, just like there are the event-template and the header-template?

Thank you for your help!

Scheduler

answered on 31 Oct 2016

3 answers

457 views

Sorting within of group in the grid. Filtering by groups.

Hi All,

I would like to sort rows within of group by invisible field (e.g., id). In addition, groups should be filtered by name using checkbox filtering. I was not able to implement this grid and put my example to http://jsfiddle.net/iakhmedov1/T64Kb/93/.

Please provide some hints.

Thanks,

Igor

Grid

answered on 31 Oct 2016