Questions on Kendo UI for jQuery Forum

4 answers

395 views

Lock command column

Hi,

There is any way to lock the command column as you can lock any other column?

I need the buttons always visible even when you scroll horizontally.

Thanks.

Grid

answered on 02 Nov 2016

3 answers

96 views

Filterable ListView with serverPaging always returns the first records.

Hi everyone.

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!

Data Source

answered on 02 Nov 2016

3 answers

245 views

[Solved] About cellIndex property on the grid with locked columns

Hi,

I use cellIndex property on the grid. But it returns strange value when the grid has locked columns.

I tried the propety on the Frozen columns demo page using Google Chrome Developer Tools.

When I click "Order ID" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 2.
When I click "Ship Name" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 3.
When I click "Ship Country" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 2.
When I click "Ship City" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 3.
When I click "ShipAddress" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 4.

I expect in above case 1 cellIndex returns 0, and in case 2 cellIndex returns 1.

Is this the correct behavior of cellIndex property?

When I click "Ship Name" cell at the first row and input $("#grid").data("kendoGrid").cellIndex($0) to the console, it returns 3.

Grid

answered on 02 Nov 2016

1 answer

157 views

Kendo PDF - Printing Links

We have added the Kendo Export to PDF Toolbar Button in the Grid.

But upon Exporting it is not exporting all the columns and also adding the other toolbars in the export

data-pdf = '{
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
scale: 0.8
}',

Grid

answered on 01 Nov 2016

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

330 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

153 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

63 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

199 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

311 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