Questions on Kendo UI for jQuery Forum

1 answer

74 views

How to change a lines Dot

The default hover symbol is a small round dot, can this dot be changed to a diamond symbol? Example attached.

Charts

answered on 20 Nov 2013

4 answers

138 views

How do I get rid of the white right and bottom border?

Hi there

I've tried a few times now to get rid of the border on this sparkline and cannot work out how!

Here's my code:

$("#chart").kendoSparkline({

series:[{ type:'line', data:[100,200,300,280,300,320,400,500], width:3, color:'#59595B' }],

chartArea:{ border:{ width:0 }, height:39, width:71, margin:0 },

plotArea:{ border:{ width:0 }, background:"#DDDDDD", margin:0 }

});

Can someone help please? :-)

Charts

answered on 20 Nov 2013

3 answers

405 views

e.DataItem in click event returns Undefined when using Date Series Chart

code sample below.

<link href="/Content/kendo.common.min.css" rel="stylesheet"/>

<link href="/Content/kendo.dataviz.min.css" rel="stylesheet"/>

<link href="/Content/kendo.default.min.css" rel="stylesheet"/>

<script src="/Scripts/jquery-1.8.2.js"></script>

<script src="/Scripts/kendo.all.min.js"></script>

<script src="/Scripts/kendo.aspnetmvc.min.js"></script>

<div id="chart" style="width: 350px; height: 250px;"></div>

<script type="text/javascript">

var salesData = [{

DOB: new Date("2011/11/1"),

EmployeeID: 1,

sales1: 2000

}, {

DOB:new Date("2011/11/2"),

EmployeeID: 2,

sales1: 2250

}, {

DOB: new Date("2011/11/3"),

EmployeeID: 3,

sales1: 1550

}]

$(document).ready(function () {

$("#chart").kendoChart({

title: {

text: "Employee Sales"

},

dataSource: {

data: salesData

},

series: [{

type: "column",

field: "sales1",

name: "Sales in Units"

}],

categoryAxis: {

field: "DOB"

},

tooltip: {

visible: true,

format: "{0}"

},

seriesClick: onSeriesClick

});

function onSeriesClick(e) {

//console.log(e);

alert("Employee ID is: " + e.dataItem.EmployeeID);

}

</script>

if I change the code to below it works
Note The data fields are changed to string

<script type="text/javascript">

var salesData = [{

DOB: "2011/11/1",

EmployeeID: 1,

sales1: 2000

}, {

DOB:"2011/11/2",

EmployeeID: 2,

sales1: 2250

}, {

DOB: "2011/11/3",

EmployeeID: 3,

sales1: 1550

}]

$(document).ready(function () {

$("#chart").kendoChart({

title: {

text: "Employee Sales"

},

dataSource: {

data: salesData

},

series: [{

type: "column",

field: "sales1",

name: "Sales in Units"

}],

categoryAxis: {

field: "DOB"

},

tooltip: {

visible: true,

format: "{0}"

},

seriesClick: onSeriesClick

});

function onSeriesClick(e) {

//console.log(e);

alert("Employee ID is: " + e.dataItem.EmployeeID);

}

</script>

Charts

answered on 20 Nov 2013

1 answer

107 views

Add New Record - Grid data row shows change, even if .AddModelError is called

I am using the MVC wrappers. When I do an "Add new record", if there is a server-side validation error (ModelState.AddModelError(...), the grid still shows the row that I was attempting to add. This occurs whether I am in server-side paging or not (both ways, .ServerOperation). Doing an <F5> on the page restores things to correct state, but I don't think it is appropriate to put this responsibility on the user. Is there some setting I can use, or someway to refresh the grid on a failed Create (or Update - happens there too)?

Thanks,
R Cornish

Grid

answered on 20 Nov 2013

1 answer

498 views

Kendo Grid- Retain Insert/Update/Delete operations values in Page refresh with JSON Post Back

Hi,

I have Kendo UI Grid with Server side paging and Grid Editing.

I have few issues, Of course they are different scenarios, Finally what i want to achieve is I want to do different operations like Insert/Update/destory on grid with paging and on click of save Button they should be saved into database. Below are the issues

1. I have page size 2, For ex: I have 3 records, As my page size is 2 , It is obvious that it will be displayed in 2 grid pages. In first page i will update a record, then i will go to 2nd page and add a record. And if i come back to 1st page again, i don't see my changes what i did because it is rendering from database and binding it again.

Is there anyway that we can retain these update values , instead of that grid is being overrides by database values?
For example I have 6 records with page size 2. So in 1st page i can see 2 records .

2. Suppose if i delete 2 records, the 2nd page records are not moving to 1st page, suppose if i insert 1 record i am able to see 3 records but pagination is for 2 records, i should see only 2 records always. Any help will be appreciated.

3. I have one more issue, I am tracking the changed values and i have only Read action, I don't have Create/Update/Delete actions, I am saving the changes on button click which is out side the Grid. To track the changes I have written the pager change event and I am taking these values in Save button click. Again I would like to have retain these changes on page click, for that I am writing the code Grd Databinding event.

Here I am able to retain the Updated values but I am getting the issues in retaining the inserted and deleted records. If I keep alert in databinding event and after that if i do insert operation, the alert is coming as infinite times. for example the scenario is I will insert the new record and that will get insert fine but if I go to 2nd page and will come back to 1st page i should retain the inserted value, i.e not working, once I click on 2nd page it's keep on processing.

var created = [];

var updated = [];

var destroyed = [];

$(document).ready(function () {

var grid = $("#skillGrid").data("kendoGrid");

grid.pager.bind('change', function() {

var dataSource = $("#skillGrid").data("kendoGrid").dataSource;

var that = dataSource,

idx,

length,

data = that._flatData(that._data);

destroyed = that._destroyed;

for (idx = 0, length = data.length; idx < length; idx++) {

if (data[idx].isNew()) {

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

if (created[i].SkillName == data[idx].SkillName) {

created.splice(i, 1);

}

created.push(data[idx]);

data[idx].set('Status', 'New');

} else if (data[idx].dirty) {

for (var j = 0; j < updated.length; j++) {

if (updated[j].SkillName == data[idx].SkillName) {

updated.splice(j, 1);

}

updated.push(data[idx]);

data[idx].set('Status', 'Dirty');

}

});

function skillGridDataBinding(e) {

var dataSource = $("#skillGrid").data("kendoGrid").dataSource;

var data = dataSource.data();

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

dataSource.add({ SkillName: created[i].SkillName, SkillNameNew: created[i].SkillNameNew, Proficiency: created[i].Proficiency, YearsOfExp: created[i].YearsOfExp, LastUsedYear: created[i].LastUsedYear, Status: "New" });

}

for (var idx = 0; idx < data.length; idx++) {

for (var j = 0; j < updated.length; j++) {

if (updated[j].SkillName == data[idx].SkillName) {

data[idx].set('SkillName', updated[j].SkillName);

data[idx].set('SkillNameNew', updated[j].SkillNameNew);

data[idx].set('Proficiency', updated[j].Proficiency);

data[idx].set('YearsOfExp', updated[j].YearsOfExp);

data[idx].set('LastUsedYear', updated[j].LastUsedYear);

data[idx].set('Status', 'Dirty');

}

for (var k = 0; k < destroyed.length; k++) {

if (destroyed[k].SkillName == data[idx].SkillName) {

dataSource.remove(data[idx]);

}

$($(".page-button-save").click(function () {

var allRows = created.concat(updated).concat(destroyed);

var allRowsJson = JSON.stringify(allRows);

$("#@Html.IdFor(m => m.Skills)").val(allRowsJson);

}));

Your help is much appreciated..!

Thank you,
Sreeni

Grid

answered on 20 Nov 2013

1 answer

79 views

Using Window with MVVM (Clearer)

I posted this already, but I suppose I was a bit vague, so I will post this once more with more information in hopes I can get it addressed.

I have a situation where I want to display small pop up windows to edit some data in a view model that is made with KendoUI.For sake of example, the ViewModel is something like this;

{

Name: "Root",

Collection: [

{

Name: "Item1",

Price: 0.00,

Quantity: 0,

Tags: [ "tag1", "tag2", "tag3" ],

onEdit: function(e){

// open window and edit Item1

}

},

{

Name: "Item2",

Price: 0.00,

Quantity: 0,

Tags: [ "tag1", "tag2", "tag3" ],

onEdit: function(e){

// open window and edit Item2

}

]

}

What I want to do seems like it should be simple. I am rendering a template with this, and there is a button that has data-bind="click: onEdit" on it. When the user clicks this, I want to render a KendoUI Window that lets them edit that item, when they confirm it, it updates the item in the actual view model.

I have already been told to use the "grid" system, but for what I am doing I have no interest in the grid right now. I love the grid, the grid is phenomenal. But what my customer wants will not really work with the way the grid layout, even with custom skinning. I need to use the actual kendo templates.

Is this even possible?

Window

answered on 20 Nov 2013

3 answers

76 views

.validate() not working on IE7

Hi everyone,

We've been trying to use the Kendo Validator component to validate a complex data entry form, and unfortunately for this project we need support for IE7.

The validation itself works fine on specific fields, and messages pop up as normal when wrong values are entered, however a call to

$("#form").data("kendoValidator").validate()

on form submission fails with the error message "Failed". Since under IE7 there is very little information about what the error is and how to fix it, we've been wondering if anyone knows how to proceed, or if anyone has had similar experiences in the past.

Many thanks!

Validation

answered on 20 Nov 2013

2 answers

90 views

cascading dropdown list remmebering state

Is it possible to get the cascading drop down to remember its last state on a post back?

DropDownList

answered on 20 Nov 2013

2 answers

145 views

ListView + Drawer + custom template

I'm useing Drawer and ListView and want ot add pull to refresh with custom template for ListView.
This is the code:

<script type="text/x-kendo-tmpl" id="pull-to-refresh-template">

<div class="portpos">

<a href="#drawer-drafts2?id=#:p_portfelj_id#">

<span class="h3x">#:ime_portfelja#</span>

<div class="portfelj change #:trend#">

Današnja sprememba

<big>#:tadan#</big>

</div>

<div class="portfelj state">

<span class="title">Trenutna vrednost</span>

<big>#:stanje#</big> <small>EUR</small>

</div>

</a>

</div>

</script>

It produces JavaScript error, I assume beacause of hash for drawer. If I remove hash Javascript works but link bokes.

Any ideas how to overcome this?

ListView (Mobile)

answered on 20 Nov 2013

1 answer

40 views

Back Button not showing in 2013 Q2 or Q3 Beta

Hi,

The Back Button is not showing for 2013 Q2 or Q3 Beta. I have a simple test set up and the Back Button will not show unless I go back to Q1 for the
kendo.mobile.all.min.css stylesheet. If I add in the stylesheet from my Q2 or Q3 Beta download, the button does not show even though the link function is there - you just can't see it.

If I reference   <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" /> for the style sheet, the button is visible.

Can you confirm the issue?

As I mentioned before, I tried the js and css files from Q2 (v2013.2.918) and Q3 Beta (v2013.3.1030). The only thing that worked was pointing to the Q1 version of the style sheet on the CDN.

Below is my test page.

Thanks.

<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="js/kendo/jquery.min.js"> </script>
<script src="js/kendo/kendo.mobile.min.js"></script>
<link href="styles/kendo/kendo.mobile.all.min.css" rel="stylesheet" />
<style>
.no-backbutton .km-back { visibility: hidden; }
</style>
</head>
<body>
<div data-role="view" id="mt-home-main-view" data-title="Movie Tickets" data-show="homeViewInit" data-layout="mt-main-layout" class="no-backbutton">
Home Page View

</div>


<div data-role="view" id="mt-about-view" data-title="About" data-layout="mt-main-layout">
<div style="padding: 15px">
This is a sample application developed for the book
Building Mobile Applications using Kendo UI Mobile and ASP.NET Web API
</div>
</div>

<div data-role="layout" data-id="mt-main-layout">
<header data-role="header">
<div data-role="navbar">
<a data-align="center" data-role="backbutton">Back</a>
<span data-role="view-title">Movie Tickets</span>
</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#mt-home-main-view">
<img src="images/movies.ico"
height="40" width="40" /><br />
Movies
</a>
<a href="Trailers.html">
<img src="images/trailers.ico" height="40" width="40" /><br />
Trailers
</a>
<a href="#mt-about-view" data-icon="about">
<br />
About
</a>
</div>
</footer>
</div>
<script>
var application = new kendo.mobile.Application(document.body,
{
transition: 'slide',skin:'flat'
});

console.log(application.view);

</script>
</body>
</html>

Button (Mobile)

answered on 20 Nov 2013