Questions on Kendo UI for jQuery Forum

4 answers

548 views

Adding an average line to an existing column chart

I've got a column chart with a single series. I am trying to add an average line to it. So, let's say the column chart has 5 data points [10, 20, 30, 20, 30] and shows 5 columns on the chart. The average is 22. Do I really need to have the average data be [22, 22, 22, 22, 22], which will put a circle for each data point on the line? Ideally, I'd like a single horizontal line across the chart without any data points showing up (while still having the data points on the columns show up so I can do hover). Hmmm, it would be nice to still have the hoverable capability on the average line so the user can see the exact value.
What are my options here?
Thanks,
--Ed

Charts

answered on 21 Nov 2013

2 answers

177 views

Filter persists on reload of data

Hi,
Using the Kendo grid in Single Page Application using MVVM.
The filtering is only at client side, so when the user filters once on a column (say it has only one row) and then next reloads new data to the grid -the filter persists on the grid. It should ideally clear the filter off and reload fresh data without filters.
How is that possible (how to enforce it since it is not happening as expected)

Grid

answered on 20 Nov 2013

3 answers

237 views

PanelBar and JSON

Hi,

I am working with KendoUI Web widgets PanelBar:

<div id="example" class="k-content">
<div class="wrapper">
<ul id="panelbar">
</ul>
</div>
</div>

I want to achieve this:

$(document).ready(function () {

var jsonStr = "[{text: " + "Item 1" + ",cssClass: " + "myClass" + ", url: " + "http://www.kendoui.com/" + "}]";
$("#panelbar").kendoPanelBar({
dataSource: jsonStr
});
});

but I am getting following error:
Error: Syntax error, unrecognized expression: [{text: Item 1,cssClass: myClass, url: http://www.kendoui.com/}]

I am using 2013.2.918.trial version.

Any help?

PanelBar

answered on 20 Nov 2013

3 answers

71 views

Strange "pseudo caching" or repetition in MutliSelect

I am using a Kendo MultiSelect for a "Tag Cloud" type thing. Tags look like this ... they are simple JSON.

{

Id: "tags/weapon",

Name: "Weapon",

Description: "This item qualifies as a weapon in the game."

},

{

Id: "tags/sword",

Name: "Sword",

Description: "This item qualifies as a sword in the game."

},

{

Id: "tags/shield",

Name: "Shield",

Description: "This item qualifies as a shield in the game."

}

The view model looks a lot like this ...

var viewModel = kendo.observable({

Id: null,

Name: null,

Consumable: false,

Equipable: false,

Tags: [],

});

The javascript to create the multi-select looks like this ...

var $tags = $("#tags").kendoMultiSelect({

dataTextField: "Name",

dataValueField: "Id",

itemTemplate: $('#editing-tags-template').html(),

dataSource: {

transport: {

read: {

dataType: "json",

url: url

}

},

open: function (e) {

this.list.addClass("k-tag-cloud");

},

close: function (e) {

}

}).data("kendoMultiSelect");

Where k-tag-cloud is a custom CSS style, this isn't giving me any trouble.

The HTML that this applies to is like this...

<select id="tags" multiple="multiple"

data-placeholder="Select Tags..."

class="dark k-tag-cloud"

data-bind="value: Tags"

style="width: 500px;"></select>

All of this works exactly as I expect. It appears like this on my screen, the behavior is normal, etc; I can select multiple tags, and when I save the item, they get saved without any extra code - just by being bound to the view model. If I retrieve an item, the tags list gets re-populated correctly with the selected tags.

However there is a template that is being used to draw the list to the screen in a different part of the page, that looks like this ..

<h2>Preview</h2>

<div style="border: dashed 2px black;">

<div style="padding: 8px;">

<h3 data-bind="text: Name" style="margin: auto;"></h3>

<h5 data-bind="visible: Equipable" style="margin: auto;">Equipable</h5>

<h5 data-bind="visible: Consumable" style="margin: auto;">Consumable</h5>

<div data-template="templates-admin-prototype-tags-preview" data-bind="source: Tags"></div>

</div>

And then this is the actual template that I call.

<script type="text/x-kendo-template" id="templates-admin-prototype-tags-preview">

<div class="k-prototype-tag">${ Name }</div>

</script>

Now what happens is that once a tag gets added, it draws to this section, but then it stays there - it will not "go away" if I remove the tag. So ..

If I start out and select "Weapon", the draw looks like this ..

Weapon

If I remove "Weapon", it removes it fine. But if I go above 1 tag ... it starts to repeat itself for each item. So if I select "Weapon" and then "Slashing", I get...

Weapon
Slashing
Weapon

This continues in infinite amounts, each time I add a new tag.

MultiSelect

answered on 20 Nov 2013

1 answer

82 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

151 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

435 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

114 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

529 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

89 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