Questions on Kendo UI for jQuery Forum

2 answers

812 views

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

238 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

184 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

696 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

328 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

3 answers

192 views

Nested Views in a Kendo Mobile application

Hello,
I was wondering if there is any trick to enable nested views within a Kendo UI Mobile application. The following code is not running as expected (all the sub-views are loaded at once). The documentation from Kendo UI is not very specific about this.

<div data-role="view" id="dashView" data-layout="mobile-view">

<div data-role="view" id="dataA">

<a data-role="button" href="#dataB">A</a>

</div>

<div data-role="view" id="dataB">

<a data-role="button" href="#dataC">B</a>

</div>

<div data-role="view" id="dataC">

<a data-role="button" href="#dataA">C</a>

</div>

Regards,
Doru

General Discussions

answered on 05 Jun 2013

1 answer

163 views

Setting model values doesn't work when validation exists

I need to set the value of another column in the grid from a custom drop down editor. If a certain value is selected from the drop down, I would like to set some column values to dynamically chosen defaults. This works well with columns that don't have validation set. However, if I try to set the model data by calling options.model.set('column', newValue) from the event handler in the drop down event, the new value is not bound to the grid cell but the validation message is shown as if I tried to enter a null value.
This works well for model fields without validation rules.
How can I set a value in the data source when validation is present?

Grid