KendoUI- Adding an array to a data source? - kendo-ui

In KendoUI can you add an array to a data source used in a grid.
This array is being dynamically generated.
Looking for a way to loop through the elements possibly and assign them.
This is what I want to avoid:
var movies = [
{ title: "Star Wars: A New Hope", year: 1977 },
{ title: "Star Wars: The Empire Strikes Back", year: 1980 },
{ title: "Star Wars: Return of the Jedi", year: 1983 }
];
var localDataSource = new kendo.data.DataSource({ data: movies });


Yes you can certainly do that using this method( example) or try below code :
var movies = [
{ title: "Star Wars: A New Hope", year: 1977 },
{ title: "Star Wars: The Empire Strikes Back", year: 1980 },
{ title: "Star Wars: Return of the Jedi", year: 1983 }
];
var dataSource= new kendo.data.DataSource();
for (var i=0; i<movies.length; i++) {
dataSource.add(movies[i]);
}


create a file in the data folder called employees.php.
and the following is content of file to written dyanmic data
<?php
$link = mysql_pconnect("localhost", "root", "root") or die("Unable To Connect To Database Server");
mysql_select_db("northwind") or die("Unable To Connect To Northwind");
$arr = array();
$rs = mysql_query("SELECT EmployeeID, LastName, FirstName FROM Employees");
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo "{\"data\":" .json_encode($arr). "}";
?>
and the kendo ui grid example
<body>
<div id="grid"></div>
<script>
$(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "data/employees.php"
},
schema: {
data: "data"
}
},
columns: [{ field: "FirstName" }, { field: "LastName" }]
});
});
</script>
</body>
hope this will help you

Related

What is the method to group the data remotely for kendo grid?

I have data coming from the server like
Id AppId
1 23
2 28
1 69
1 123
What is the way to make it like this on kendo grid
Id AppId
1 23,69,123
2 28

You can use the group feature of the datasource:
var data = [
{Id: 1, AppId: 23},
{Id: 2, AppId: 28},
{Id: 1, AppId: 69},
{Id: 1, AppId: 123},
];
var ds = new kendo.data.DataSource({
data: data,
schema: {
model: {
fields: {
Id: { type: "number" },
AppId: { type: "number" },
}
}
},
group: {
field: "Id"
}
});
Then if you want to use the grid group by feature:
$("#grid").kendoGrid({
dataSource: ds,
columns: [
{ field: "Id", title: "ID", },
{ field: "AppId", title: "Application ID" },
]
});
If you want the comma delimited list, use the fetch() method of the datasource to build the new data array:
var groupedData = [];
ds.fetch(function(){
var data = this.view();
for (var i=0; i< data.length; i++){
var id = data[i].value;
var text = '';
for (var j=0; j< data[i].items.length; j++){
text += data[i].items[j].AppId;
if (j< data[i].items.length - 1){
text += ',';
}
}
groupedData.push({Id: id, AppId: text});
}
});
$("#grid2").kendoGrid({
dataSource: groupedData,
columns: [
{ field: "Id", title: "ID", },
{ field: "AppId", title: "Application ID" },
]
});
The following DOJO presents both options:
DEMO

grid populated from a dataSource using JSON and a database. How to make parse: work and create a new field?

I'm using javascript and kendo ui.
I have a grid and populate it with
a local datasource
ie:
var dsDataSource = new kendo.data.DataSource({
data:
[
{ // 1
title: "Star Wars: A New Hope",
date5: new Date(2001,8,8,21,46,0,0), // 9/8/2001 09:46:00.000 PM
},
{ // 2
title: "Star Wars: The Empire Strikes Back",
date5: new Date(2004,10,9,6,33,0,0), // 11/9/2004 06:33:00.000 AM
},
{ // 3
title: "Star Wars: Return of the Jedi",
date5: new Date("2004/11/09 12:00 AM"), // 11/9/2004 12:00:00.000 AM
},
{ // 4
title: "Star Wars: The Phantom Menace",
date5: new Date(2008,0,10,4,20,0,0), // 1/10/2008 04:20:00.000 AM
},
{ // 5
title: "Star Wars: Revenge of the Sith",
date5: new Date("2004/11/09 06:30 AM"), // 11/9/2004 06:30:00.000 AM
}
],
schema:
{
model:
{
id: "myGridID",
fields:
{
title: { type: "string" },
date5: { type: "date" },
date6: { type: "date" }, // Field not in data: above
// // but generated below in
// // parse:
}
},
},
// Set the data in
// date6 to date5 yyyy, MM, dd, HH, mm and strip off Sec and Ms
// This will make the filter work
// This changes the "data" instead of the "presentation" so the filter will work
parse: function(d) {
$.each(d, function(idx, elem) {
elem.date6 =
new Date(
elem.date5.getFullYear(), // 20yy
elem.date5.getMonth(), // MM 00 - 11 for jan to dec
elem.date5.getDate(), // dd 00 - 31
elem.date5.getHours(), // HH 00 - 23
elem.date5.getMinutes() // mm 00 - 59
// // Sec 0
// // Ms 0
);
});
return d;
}
});
I then create a grid:
// Createe a Kendo grid in DIV
$("#grid").kendoGrid({
dataSource: dsDataSource,
...
columns: [
{ field: "title", title: "Title" , width: "270px" },
{ field: "date5", title: "D 5" , width: "230px", filterable: false, format:"{0:MM/dd/yyyy hh:mm tt}", },
{
// Bind to date6 (rounded), but display date5
field: "date6",
title: "Date5DateTime (no D6 data uses D5)",
width: "330px",
template: "#: kendo.toString(date5, 'yyyy-MM-dd HH:mm:ss.fff') #",
filterable: { ui: DateTimeFilter },
...
}
],
...
I got this to work and am now integrating it into our production application.
The problem I am having is that the production application uses Json/database
so when I try to add the "date6" field into the "model: ... fields: ..." section
it complains about the "date6" field not existing in the Json/database.
Without the "date6" field in the "model..." I can't use the parse: code to strip off
the Sec and Ms.
Is there some other way to fill in the "date6"
without using "parse:" so I don't have to add "date6" to the "model: ... fields: ..."
section?

You don't have to define date6 in the model, it should work perfectly well. The problem is that you defined parse out of schema when it should be inside and then it actually does not get called.
Your dataSource definition should be:
var dsDataSource = new kendo.data.DataSource({
data:
[
{ // 1
title: "Star Wars: A New Hope",
date5: new Date(2001,8,8,21,46,0,0), // 9/8/2001 09:46:00.000 PM
},
{ // 2
title: "Star Wars: The Empire Strikes Back",
date5: new Date(2004,10,9,6,33,0,0), // 11/9/2004 06:33:00.000 AM
},
{ // 3
title: "Star Wars: Return of the Jedi",
date5: new Date("2004/11/09 12:00 AM"), // 11/9/2004 12:00:00.000 AM
},
{ // 4
title: "Star Wars: The Phantom Menace",
date5: new Date(2008,0,10,4,20,0,0), // 1/10/2008 04:20:00.000 AM
},
{ // 5
title: "Star Wars: Revenge of the Sith",
date5: new Date("2004/11/09 06:30 AM"), // 11/9/2004 06:30:00.000 AM
}
],
schema:
{
model:
{
id: "myGridID",
fields:
{
title: { type: "string" },
date5: { type: "date" },
date6: { type: "date" }, // Field not in data: above
// // but generated below in
// // parse:
}
},
// Set the data in
// date6 to date5 yyyy, MM, dd, HH, mm and strip off Sec and Ms
// This will make the filter work
// This changes the "data" instead of the "presentation" so the filter will work
parse: function(d) {
$.each(d, function(idx, elem) {
elem.date6 =
new Date(
elem.date5.getFullYear(), // 20yy
elem.date5.getMonth(), // MM 00 - 11 for jan to dec
elem.date5.getDate(), // dd 00 - 31
elem.date5.getHours(), // HH 00 - 23
elem.date5.getMinutes() // mm 00 - 59
// // Sec 0
// // Ms 0
);
});
return d;
}
}
});
and check it here running
$(document).ready(function() {
var dsDataSource = new kendo.data.DataSource({
data:
[
{ // 1
title: "Star Wars: A New Hope",
date5: new Date(2001,8,8,21,46,0,0), // 9/8/2001 09:46:00.000 PM
},
{ // 2
title: "Star Wars: The Empire Strikes Back",
date5: new Date(2004,10,9,6,33,0,0), // 11/9/2004 06:33:00.000 AM
},
{ // 3
title: "Star Wars: Return of the Jedi",
date5: new Date("2004/11/09 12:00 AM"), // 11/9/2004 12:00:00.000 AM
},
{ // 4
title: "Star Wars: The Phantom Menace",
date5: new Date(2008,0,10,4,20,0,0), // 1/10/2008 04:20:00.000 AM
},
{ // 5
title: "Star Wars: Revenge of the Sith",
date5: new Date("2004/11/09 06:30 AM"), // 11/9/2004 06:30:00.000 AM
}
],
schema:
{
model:
{
id: "myGridID",
fields:
{
title: { type: "string" },
date5: { type: "date" },
date6: { type: "date" }, // Field not in data: above
// // but generated below in
// // parse:
}
},
// Set the data in
// date6 to date5 yyyy, MM, dd, HH, mm and strip off Sec and Ms
// This will make the filter work
// This changes the "data" instead of the "presentation" so the filter will work
parse: function(d) {
$.each(d, function(idx, elem) {
elem.date6 =
new Date(
elem.date5.getFullYear(), // 20yy
elem.date5.getMonth(), // MM 00 - 11 for jan to dec
elem.date5.getDate(), // dd 00 - 31
elem.date5.getHours(), // HH 00 - 23
elem.date5.getMinutes() // mm 00 - 59
// // Sec 0
// // Ms 0
);
});
return d;
}
}
});
$("#grid").kendoGrid({
dataSource: dsDataSource,
columns: [
{ field: "title", title: "Title" , width: "270px" },
{ field: "date5", title: "D 5" , width: "230px", filterable: false, format:"{0:MM/dd/yyyy hh:mm tt}" },
{
// Bind to date6 (rounded), but display date5
field: "date6",
title: "Date5DateTime (no D6 data uses D5)",
width: "330px",
template: "#: kendo.toString(date5, 'yyyy-MM-dd HH:mm:ss.fff') #"
}
]
})
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<div id="grid"></div>

How to validate kendo date time picker

I am working on Kendo date time picker.I am getting a problem when clicking the submit button.
1)Having To date and From date pickers .how to get the popup that should validate both the date and time and it should not allows the alphabets.
$("#startdatetimepicker").kendoDateTimePicker({
showSecond: true,
dateFormat: "dd-mm-yy",
timeFormat: "HH:mm:ss",
format: "dd-MM-yy HH:mm:ss",
mindate: getFormattedDate(new Date())
}).data("kendoDateTimePicker");
$("#startdatetimepic").attr("readonly", "readonly");
function getFormattedDate(date) {
alert("")
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear().toString().slice(2);
return day + '-' + month + '-' + year;
}
$("#enddatetimepicker").kendoDateTimePicker({
showSecond: true,
dateFormat: "dd-mm-yy",
timeFormat: "HH:mm:ss",
format: "dd-MM-yy HH:mm:ss"
}).data("kendoDateTimePicker");
var result = $("#grid").kendoGrid({
filterable: true,
columns: [{
field: "FirstName",
title: "First Name"
}, {
field: "LastName",
title: "Last Name"
}, {
field: "dob",
title: "DOB",
format: "{0:dd-MM-yy HH:mm:ss}"
}],
dataSource: {
data: [ {
FirstName: "Joe",
LastName: "Smith",
dob: "2013-02-01 19:54:13"
}, {
FirstName: "Jane",
LastName: "Smith",
dob: "2013-02-02 20:55:14"
}, {
FirstName: "Jane",
LastName: "Smith",
dob: "2013-02-03 21:56:15"
},
{
FirstName: "Jane",
LastName: "Smith",
dob: "2013-03-4 20:56:14"
}],
schema: {
data: function (data) {
$.each(data, function (i, val) {
val.dob = kendo.parseDate(val.dob, "yyyy-MM-dd HH:mm:ss");
});
return data;
}
}
}
}).data("kendoGrid");
$("#filter").on("click", function () {
var mindate = $('#startdatetimepicker').data("kendoDateTimePicker").value();
var maxdate = $('#enddatetimepicker').data("kendoDateTimePicker").value();
var condition = {
logic: "and",
filters: []
};
if (mindate !== null) {
condition.filters.push({
field: "dob",
operator: "ge",
value: mindate
});
}
if (maxdate !== null) {
condition.filters.push({
field: "dob",
operator: "le",
value: maxdate
});
}
result.dataSource.filter(condition);
});
here is the fiddle:http://jsfiddle.net/5bchz/97/

The format should prohibit alpha characters while incrementing the values can be achieved similar to:
function incrementDay(increment) {
var datePicker = $("#DayPager").data("kendoDatePicker");
var val = datePicker.value();
var newDate = new Date(val.getFullYear(), val.getMonth(), val.getDate() + increment);
datePicker.value(newDate);
}

KendoUI: Get The ID on Button Click in PHP

i have used kendoui grid like;
<script>
$(function(){
$("#grid").kendoGrid({
dataSource:{
transport: {
read: "<?php echo base_url() ?>index.php/user_management/manage_users/list_view/"
},
schema:{
data: "data"
}
},
columns: [
{
field: "UserID",
hidden:true
},
{
field: "Username",
title:"Username"
},
{ field: "FirstName",
title:"First Name"
},
{field:"MiddleNames"},
{field:"LastName"},
{field:"City"},
{field:"Email"},
{field:"Actions"},
{command: { text: "View", click: showDetails }, title: " ", width: "140px"}
]
});
});
function showDetails(e) {
e.preventDefault();
//i want to get the id of the clicked row and pass that id to the next(redirected) page;
}
</script>
How do I get the current clicked row id i.e UserId column value and pass that id(redirect) to the next page?

From the event that you receive, you get the row that it belongs to:
var row = $(e.target).closest("tr");
And then you get the item using dataItem:
var item = $("#grid").data("kendoGrid").dataItem(row);
So it would be:
function showDetails(e) {
var row = $(e.target).closest("tr");
var item = $("#grid").data("kendoGrid").dataItem(row);
alert("UserId is:" + item.UserId);
}

KendoGrid doesn't work in kendoTabStrip

I'm using kendoTabStrip as is shown on KendoUI Page. In my case in each div I have rendered partial view. In a few of my partial views I have additionaly kendoGrid.
Problem
When I reload page in any tab and go to tab which contain kendoGrid then it do not work correctly. For example: I'm on tab#0 and go for tab#3 which contain kendoGrid with pagination, then pagination is not display. But when I reload it then pagination works fine.
What can I do to my Grids works inside TabStrip?
Any help would be appreciated.
UPDATE
My implementation of tabstrip
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
var tabStrip = $('#tabStrip').data('kendoTabStrip');
var tabId = 0;
var scheduledId = 0;
if (document.location.hash.match(/tab-/) == 'tab-') {
tabId = document.location.hash.substr(5);
}
if (document.location.hash.match(/scheduled-/) == 'scheduled-') {
tabId = 1;
scheduledId = document.location.hash.substr(11);
editSchedule('/admin/Course/Scheduled/' + scheduledId + '/Edit/' );
}
tabStrip.select(tabStrip.tabGroup.children('li').eq(tabId));
So I need it to make some rewrites from controller.

To fix this problem we must change :
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
for:
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
},
activate: function(e) {
$(e.contentElement).find('.k-state-active [data-role="grid"]').each(function() {
$(this).data("kendoGrid").refresh();
});
}
});
Event activate is 'Triggered just after a tab is being made visible, but before the end of the animation'. So we must refresh our grids then becouse js counts widths of hidden elements wrong.

I put together an example of Grids working inside of a TabStrip: http://jsfiddle.net/dpeaep/SJ85S/. Maybe, I am missing part of what you are asking in your question. If so, you can modify the jsfiddle to clarify what the problem is.
HTML
<div id="tabstrip">
<ul>
<li>Grid 1</li>
<li>Grid 2</li>
<li>Grid 3</li>
</ul>
<div><div id="grid1"></div></div>
<div><div id="grid2"></div></div>
<div><div id="grid3"></div></div>
</div>
Javascript
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);
$("#grid1").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Joe", LastName: "Smith" },
{ FirstName: "Jane", LastName: "Smith" }
]
}
});
$("#grid2").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Betty", LastName: "Lakna" },
{ FirstName: "Fumitaka", LastName: "Yamamoto" },
{ FirstName: "Fred", LastName: "Stevenson" }
]
}
});
$("#grid3").kendoGrid({
columns: [
{ field: "Title", title: "Title" },
{ field: "Year", title: "Year" }
],
dataSource: {
data: [
{ Title: "Lost in Domtar", Year: "2012" },
{ Title: "Evergreen", Year: "2012" },
{ Title: "Fields of Yellow", Year: "2010" },
{ Title: "Where the Whistle Blows", Year: "2008" }
]
}
});

Resources