Questions on Kendo UI for jQuery Forum

3 answers

1.7K+ views

How to get Dynamic series name with respective data(field)

Hi all,

I am very new in kendo UI.

I am trying to create a stacked bar graph using remote connection and my code is as below:

<!doCTYpe html>
<html>
<head>
<link href="kendo.metro.min.css" rel="stylesheet">
<link href="kendo.common.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>

var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost/Project_Demo/Kendobardata.php",
dataType: "json"
}
},
schema: {
data: "data",
model: {

fields: {

wordpress: {type: "number"},
month: {type: "string"}
}
}
}
});

$("#chart").kendoChart({
dataSource: sharedDataSource,
title: {
text: "Charts Rating"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "wordpress",
field: "wordpress",
color: "#3CB371"},
{
name: "codeigniter",
field: "codeigniter",
color: "#FFA500"
},
{
name: "highcharts",
field: "highcharts",
color: "#FF0000"
}],
valueAxis: {

line: {
visible: true
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
field: "month",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});

</script>
</div>

</body>
</html>

I am finding a difficulty to get the series "name" as dynamic which will come from database.

let say example:

There are 10 "appointment owner", their respective "appointment count" values and "months" are in json format.

I want to create a stacked bar graph in that month will be on category axis and in series appointment owner and appointment count should be their.

Kindly please help me to achieve this.

Thanks,

Amit

Charts

answered on 14 Oct 2016

2 answers

344 views

Initializing dropdownlist editor in custom popup window

Hi,

I needed batch edit and popup window at the same time. I just have a question - how is it possible to initialize editor for dropdownlist? Here a small sample:

http://dojo.telerik.com/aSaXe/14

I'm doing this in dynamic way, because I want to wrap everything in function and reuse for more grids.

Grid

answered on 14 Oct 2016

3 answers

605 views

[Solved] How to collapse splitter on document ready?

Hi,

I have a dojo set up where I have a couple splitters, and I been searching online for a couple hours on how to have the splitter panels collapsed when the page loads.

Currently my splitter layout looks like this attachment A.PNG and I want the end result to look like attachment B.PNG ( I hope they got attached)

If the screenshots didn't get attached then what I am looking to do is have the left pane and bottom right pane collapsed

This my dojo

Splitter

answered on 14 Oct 2016

1 answer

286 views

Mulitselect drag and drop not working from 1 listview to another

Hi,

I am trying to implement Multi select items drag and drop from 1 listview to another.

I know that both selectable and draggable listen to the same event Select, hence directly we cannot do. Can someone help with some work around?

Here is my working code for single selection drag and drop: I want to make it work for selecting multiple drag and drop.

var dataSourceSalesRole = new kendo.data.DataSource({

data: salesRole,

pageSize: 21

});

var dataSourceSalesRoleContainer = new kendo.data.DataSource({

data: salesRoleContainer,

pageSize: 21

});

$("#listViewSalesRole").kendoListView({

dataSource: dataSourceSalesRole,

template: kendo.template($("#templateSalesRole").html())

});

$("#listViewSalesRoleContainer").kendoListView({

dataSource: dataSourceSalesRoleContainer,

template: kendo.template($("#templateSalesRoleContainer").html())

});

$("#listViewSalesRole").kendoDraggable({

group: "salesRole",

filter: ".move",

hint: function (element) {

return element.clone();

}

});

$("#listViewSalesRoleContainer").kendoDropTarget({

group: "salesRole",

dragenter: function (e) {

e.draggable.hint.css("opacity", 0.6);

},

dragleave: function (e) {

e.draggable.hint.css("opacity", 1);

},

drop: function (e) {

var count = 0;

var dropItem = dataSourceSalesRole.getByUid(e.draggable.hint.data().uid);

var salesRoleId = dropItem.SalesRoleId;

var saleRoleContainerData = dataSourceSalesRoleContainer.data();

$(saleRoleContainerData).each(function () {

if (this.SalesRoleId == salesRoleId) {

alert('Sales Role already exist! Cannot add.');

count++;

}

});

if (count == 0) {

dataSourceSalesRoleContainer.add(dropItem);

dataSourceSalesRole.remove(dropItem);

}

});

Drag and Drop

answered on 14 Oct 2016

1 answer

373 views

kendo upload - angular-js + jax-rs (java on backend) gives unsupported media type (415 error)

Hi,

I've been trying kendo-upload with angular.

I keep getting unsupported media type from the server (error: 415). I am wondering if the

boundary=----WebKitFormBoundaryARilQnC5oS7lnLVU

is making server have any issues or is there something else that's causing this?

Can you please provide guidance on how to have java service (jax-rs) based handle the request from UI? (in the same way you've given for asp.net)

Here's the angular configuration

<div class="demo-section k-content" ng-controller="UploadController"><input name="files" id="files" type="file" kendo-upload="uploader" k-select="onSelect" k-async="{ saveUrl: 'http://localhost:8080/path/to/upload', autoUpload: true }"/></div>

The java server side code for handling post

@POST@Consumes(MediaType.MULTIPART_FORM_DATA)public void uploadFiles(@FormDataParam("files") List<InputStream> files) {System.out.println("Reached UploadFiles");}

This is the request made as seen on Chrome/Developer tools/Network

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryARilQnC5oS7lnLVURequest Payload------WebKitFormBoundaryARilQnC5oS7lnLVUContent-Disposition: form-data; name="files"; filename="test_blah.txt"Content-Type: text/plain ------WebKitFormBoundaryARilQnC5oS7lnLVU--

Upload

answered on 14 Oct 2016

3 answers

337 views

[Solved] Delete only first row o a grid

Can anyone help me how to delete only the first row of a kendo grid.

if there is an option to hide the delete button for all rows except the first one. That is to only allow me to remove the last row entered.

I will wait for your answers.

Grid

answered on 14 Oct 2016

3 answers

83 views

Clicked event on the title in KindleChart

Our customer wants to make the title work like an hyperlink. I did a bit of research and found that it is not quite supported in the current version. I am not even sure if it is possible to receive any click event when the title is clicked.

Could anyone give me a suggestion?

Charts

answered on 13 Oct 2016

5 answers

671 views

Setting min value on datepicker initialisation messes with the default format string?

I've setup a kendo datepicker with kendo mvvm binding as detailed below, and if I enable the "min" value during the datepicker initialisation, the bound date becomes of the format: "Sat Mar 31 2012 00:00:00 GMT+1000 (E. Australia Standard Time)", whereas if I remove the setting of the "Min" value, the format becomes "2012/03/31" which is what I expect it to do with the "min" value set.

Is this a bug in kendo? Tested in latest chrome browser with kendo release 2012.1.322.

view code:
<div id="container">
<input id="dateFrom" class="datePicker" data-role="datepicker" data-bind="value: startDate"/>
</div>

javascript:
$(document).ready(function() {
var viewModel = kendo.observable({
startDate: new Date("2012/03/31") });
kendo.bind($("#container"), viewModel);

$(".datePicker").width(182).kendoDatePicker(
{
format: "yyyy/MM/dd",
min: new Date() // this line right here causing the format to change of the databound value
});
});

DatePicker

answered on 13 Oct 2016

1 answer

739 views

Telerik Grid (Error Handling + MasterView)

Hi,

I have a a form with a couple of fields and a kendo grid , and im implementing my own custom navigations using the enter and tabe keys.

I got the navigation inside of the form working perfectly, however im having some problems tso i would like to get some assistance to help me acomplish a few things, namely :

1 -Open grid on focus : If the cursor is on the last field on my form (the field just before the grid), and i press tab, i would like to open the last line on the grid on edit mode. However i cannot catch the focus event on the grid.

2 -If a row on the grid is selected, i cannot put that row on edit mode by pressing the enter key. I have already figured out how to catch the keydow event, but as it stands the grid only catches the keydown event when its already in edit mode.

3 -I have the navigation inside the grid partially sorted out, the problem emerges when i get to the last column. When i'm exiting the last cell/colum on a row, i want to save the row and then add a new row to the grid. The complicated bit is that i only want the new row to be added if the current row is saved sucessfully.
In my code if the row is valid i call the save row method.

if( grid.editable && grid.editable.validatable.validate()){

grid.saveRow();

// follow up logic

}

However dispite of the row validation returning true, sometimes the validations on the server side still fail. So far I have no problem displaying the errors returned by the ModelState inside the grid on the respective fields. I want the grid to keep that row, selected, open, and in edit mode displaying the validations errors when the model state is not valid. But if there are not any erros i would like to close the current row ro be close and a new row to be added.

The issue here is that the error even is part of the datasource and not part of the grid, so i don't really know here to put that logic; especially because i also do not know how to check if the saveRow() method returned any errors (from the server side) or executed sucessfully.

<p>Eg : <br>if(grid.dataSource.saveRow(()){ <br>//current row is saved + new row is added. <br> } <br>//else will be handled by the grid error handler</p><p><div class="reCodeBlock" style="border:solid 1px #7f9db9;width:;height:;overflow-y:auto;"><div style=" background-color: #fff;"></div></div></p>

Or check if the error handler executed, and do not do anything, but if the error handler did not execute do X, Y and Z?

4 - As i said before my grid is part of a master form, and it is required that the grid is submited at once with the form, therefore i do not want the grids to immediatly propagate the changes to a remote location in case of insert, update or delete. But at the same time i do not want the changes teh users make on the grid to be reverted in case of a datasource.read() or grid.cancelChanges(). So i would like to have the data saved on the grid, just do not want it to be saved to the db before the data on the form is saved.

Thanks in advance for your assistance.

Grid

answered on 13 Oct 2016

2 answers

4.6K+ views

Validation on DatePicker Control

I have been through all your documentation and there is not a single informative section on how to do this properly.

The question I have is this - how do I prevent somebody from entering any old rubbish in a datepicker field? I can handle the case where the field is left empty as I can set the required attribute.

But if I enter some random text in the field it validates when it shouldn't. I notice that when I look at this control in Firebug its input type is "text" - surely this can';t be right? Why isn't input type = "date" then all the validation would be handled automatically surely?

I really can't believe that I have to set a pattern and validate against that? I was doing this sort of thing 15 years ago.

Not impressed.

DatePicker

answered on 13 Oct 2016