Questions on Kendo UI for jQuery Forum

3 answers

42 views

Tabstrip icons problem with Q1 2013

I am using forced iOS in my application and it looked fine in Android until I updated to the newest version which supports the badges. The icons on an Android device will show but now they have a blue box overlayed with them.

Is there a workaround for this? Attached is a sample of the issue.

Robert

TabStrip (Mobile)

answered on 06 Jun 2013

5 answers

72 views

Need a total cell

I am trying to have a total cell at the end of each row as described in post http://www.kendoui.com/forums/permalink/ZYoSEK-x_keMMJfogOHsSw

The suggestion listed works great. However, as the post mentions, the totals don't get updated in real time (you need to sort or filter or do something else in order for the total field to get updated). Is there a work around for this? Thanks....

Grid

answered on 06 Jun 2013

1 answer

255 views

disable items of a foreign key column

Do you know if it's possible to make some items of a dropdown list ( foreign key column) disabled and the rest enabled - based on a datasource property ?

Grid

answered on 06 Jun 2013

2 answers

812 views

Delete last row in the grid

Hi Team,

When i am deleting the last row of a grid i need to fire some even. Can you please suggest how can i fire an event in the grid when the rows is getting deleted. Below are my code

{ command: { name: "destroy", text: "" }, title: "&nbsp", width: "110px" }],

I have some functions like

edit: function() {},
save: function (data) {},
dataBound: function() {}

Please suggest

Thanks

Grid

answered on 05 Jun 2013

1 answer

241 views

Resize Kendo redial gauge with css

Hi,
I have checked the demo of kendo redial gauge and found all the demo code for kendo redial gauage size are fixed number, without any percentage. I have changed the css file to percentage, but the background image and gauge never be able to fit together. Will anybody provide some sample code? Many thanks. George

#gauge-container {
border-style:solid;
border-color:red;
background: transparent url(@Url.Content("~/Content/images/gauge-container-partial.png")) ;
background-vertical-position: -500% ;
background-size: 100% 100%;
width: auto;
height: 100%;
text-align: center;
margin: -10% auto auto auto;
}

#SMDRReceiverMonitorChart {
border-style:solid;
border-color:blue;
width: auto;
height: auto;
align: center;
margin: auto auto auto auto;

border-color: transparent;
}

#gauge-container .k-slider {
margin-top: -11px;
width: 140px;

}

LinearGauge

answered on 05 Jun 2013

1 answer

116 views

ObservableArray bound Grid source and InLine editing don't update view model

Hi,

I defined a ViewModel with an ObservableArray as "items". Then I bound "items" to the grid with data-bind="source: items".
The grid is data-editable="inline" and there are edit and destroy commands defined.

Data from ObservableArray displays ok in the grid.
Delete button works ok.
But when I edit a row, after any action ("update" or "cancel") the grid became empty and no data is shown anymore.

This is the grid configuration:

<div id="gridMediciones" data-role="grid"

data-bind="source: items"

data-sorteable="true"

data-scrollable="true"

data-groupable="true"

data-editable="true"

data-columns="[

'Nombre',

'VolumenEstandar',

'Volumen',

{command: ['destroy'], title:' '}

]"

></div>

and this is the viewmodel configuration:

var viewActions = function ($grid) {

var data = {

items: [

{ Id: 1, Nombre: "Medidor 1", VolumenEstandar: 100, Volumen: 200 },

{ Id: 2, Nombre: "Medidor 2", VolumenEstandar: 200, Volumen: 300 },

{ Id: 3, Nombre: "Medidor 3", VolumenEstandar: 300, Volumen: 400 },

]

},

viewModel = kendo.observable(data);

return {

viewModel: viewModel

};

}($("#gridMediciones"));

//inicialización de la vista

$(function () {

kendo.bind($("body"),viewActions.viewModel);

});

Is it anything wrong?

Thanks in advance

MVVM

answered on 05 Jun 2013

2 answers

185 views

Using Template For Returned JSON Data From Server

Hi!

I was looking at the Window component documentation. There is a request option called "template". I am assuming this template can be used to format JSON data returned from the server. So, the template I used was the following:

"#= html #"

The data returned from the server is something like:

"html": "<span>Hello world!</span>",

"instanceId": "10A",

"data": null

However, I always get a Javascript error that says "ReferenceError: html is not defined".

Any ideas why html is not defined though it comes in the response body?

Regards.

Window

answered on 05 Jun 2013

3 answers

78 views

Manual color entry in IE9

I can't seem to get manual color entry to work in the flat color picker or hsv picker when using IE9. This includes the color pickers on the demo site. Is this something that is not supported in IE9? I don't see any limitations listed in the documentation.

ColorPicker

answered on 05 Jun 2013

7 answers

698 views

Add value to ComboBox datasource not working?

Hello,

This may be because I am doing an Ajax post but I have the following and the kendo grid read method works fine. I am trying to add a value to my kendo combox. I also tried just a read call on the combobox to reload it and that also doesn't get into the controller action for the read.

<script type="text/javascript">
$(document).on('click', '.add-user', function(){
kendo.ui.progress($("#UserGrid"), true);

$("a.add-user").addClass("k-state-disabled");
$('a.add-user').on('click.disabled', false);

var koUserName = $("#UserName").data("kendoComboBox");
var koValue = $.trim(koUserName.value());

if (koValue.length) {
$.ajax({
url: '/User/CreateUser',
type: "POST",
data: { username: koValue },
success: function (data) {
$('#UserGrid').data("kendoGrid").dataSource.read();
$("a.add-user").removeClass("k-state-disabled");
kendo.ui.progress($("#UserGrid"), false);
$('a.add-user').off('click.disabled');

var ds = $('#UserName').data().kendoComboBox.dataSource;
ds.add({ text: "Test again!", value: "5" }); //doesn't work

//$('#UserName').data("kendoComboBox").dataSource.read(); also does not work and get into the read method
},
error: function() {
alert("error");
}
});
}
});
</script>

This is my combobox:
@(Html.Kendo().ComboBox()
.Name("UserName")
.Filter(FilterType.Contains)
.DataTextField("FirstLastName")
.DataValueField("UserName")
.HtmlAttributes(new {@style = "width:300px;"})
.Placeholder("Search Active Directory")
.DataSource(dataSource => dataSource
.Read(read => read.Action("ADList_Read", "User"))
))

ComboBox

answered on 05 Jun 2013

11 answers

329 views

Stacked and grouped chart

Hi,

My goal is to achieve a chart with, for each X values, I have 3 stacked bars.

Suppose that I want to present, for each month, my expenses in dollars for grocery, transport and mortgage.

I would create 3 series ('grocery', 'transport' and 'mortage') and set them all stacked.

Now suppose I want the exact same chart, but for each month I want 3 values for each of my series : the values for the years 2009, 2010 and 2011.

I achieved something near like this:






var chartData = [
   { X: 0, serie1: 12, serie2: 16, serie3: 11 },
   { X: 0, serie1: 32, serie2: 12, serie3: 15 },
   { X: 1, serie1: 15, serie2: 18, serie3: 9 },
   { X: 1, serie1: 8, serie2: 13, serie3: 17 }
];
 
$('#chartContainer').kendoChart({
   dataSource: {
      data: chartData
   },
   theme: 'default',
   legend: {
      position: 'bottom'
   },
   seriesDefaults: {
      type: 'column',
      stack: true
   },
   series:
      [
         { field: 'serie1', name: 'serie1' },
         { field: 'serie2', name: 'serie2' },
         { field: 'serie3', name: 'serie3' }
      ],
   categoryAxis: {
      field: 'X'
   },
   tooltip: {
      visible: true
   }
});



But I end up with a graph where categories are repeated on the x axis. Is there a way I could have them grouped? Something that would look like this:

http://peltiertech.com/Utility/pix/clusterstackchart.png



Thank you!

Charts

answered on 05 Jun 2013