or
JSON.stringify(myGrid.dataSource.data());
I have the latest version of KendoComplete, and a grid that I have enabled grouping with a remote data source
I can group, but the arrow switch at the left of the group is missing, which means I cannot expand or
collapse the group. (this happens no matter what theme I choose).
I also have selectable enabled (by full row) with multiple items, and I would like to be able to press
the group heading and select the entire group at once. Any ideas?
$("#grid").kendoGrid({
dataSource: myRemoteData,
groupable: true,
scrollable: true,
sortable: true,
pageable: true,
selectable: "multiple, row",
...
{
"fields"
: {
"TestContacts_ID"
: {
"editable"
:
false
,
"nullable"
:
true
,
"type"
:
"string"
},
"TestContacts_CompanyName"
: {
"editable"
:
false
,
"nullable"
:
true
,
"type"
:
"string"
}
}
}
[
{
"field"
:
"TestContacts_CompanyName"
,
"dir"
:
null
,
"aggregates"
: [
{
"field"
:
"TestContacts_ID"
,
"aggregate"
:
"sum"
}
]
},
{
"field"
:
"TestContacts_ID"
,
"dir"
:
null
,
"aggregates"
: [
{
"field"
:
"TestContacts_ID"
,
"aggregate"
:
"sum"
}
]
}
]
[
{
"field"
:
"TestContacts_ID"
,
"aggregate"
:
"sum"
}
]
[
{
"field"
:
"TestContacts_ID"
,
"title"
:
"ID"
,
"width"
: 75,
"format"
:
null
,
"template"
:
null
,
"aggregates"
: [
"sum"
],
"groupHeaderTemplate"
:
"ID: #= value #"
,
"groupFooterTemplate"
:
"Sum:#= sum #"
},
{
"field"
:
"TestContacts_CompanyName"
,
"title"
:
"CompanyName"
,
"width"
: 200,
"format"
:
null
,
"template"
:
null
,
"aggregates"
:
null
,
"groupHeaderTemplate"
:
"CompanyName: #= value #"
,
"groupFooterTemplate"
:
""
}
]
[
{
"aggregates"
: {
"TestContacts_ID"
: 78.0
},
"field"
:
"TestContacts_CompanyName"
,
"value"
:
"MC 1"
,
"hasSubgroups"
:
true
,
"items"
: [
{
"aggregates"
: {
"TestContacts_ID"
: 25.0
},
"field"
:
"TestContacts_ID"
,
"value"
:
"25"
,
"hasSubgroups"
:
false
,
"items"
: [
{
"TestContacts_ID"
:
"25"
,
"TestContacts_CompanyName"
:
"MC 1"
}
]
},
{
"aggregates"
: {
"TestContacts_ID"
: 26.0
},
"field"
:
"TestContacts_ID"
,
"value"
:
"26"
,
"hasSubgroups"
:
false
,
"items"
: [
{
"TestContacts_ID"
:
"26"
,
"TestContacts_CompanyName"
:
"MC 1"
}
]
},
{
"aggregates"
: {
"TestContacts_ID"
: 27.0
},
"field"
:
"TestContacts_ID"
,
"value"
:
"27"
,
"hasSubgroups"
:
false
,
"items"
: [
{
"TestContacts_ID"
:
"27"
,
"TestContacts_CompanyName"
:
"MC 1"
}
]
}
]
},
{
"aggregates"
: {
"TestContacts_ID"
: 57.0
},
"field"
:
"TestContacts_CompanyName"
,
"value"
:
"MC 2"
,
"hasSubgroups"
:
true
,
"items"
: [
{
"aggregates"
: {
"TestContacts_ID"
: 28.0
},
"field"
:
"TestContacts_ID"
,
"value"
:
"28"
,
"hasSubgroups"
:
false
,
"items"
: [
{
"TestContacts_ID"
:
"28"
,
"TestContacts_CompanyName"
:
"MC 2"
}
]
},
{
"aggregates"
: {
"TestContacts_ID"
: 29.0
},
"field"
:
"TestContacts_ID"
,
"value"
:
"29"
,
"hasSubgroups"
:
false
,
"items"
: [
{
"TestContacts_ID"
:
"29"
,
"TestContacts_CompanyName"
:
"MC 2"
}
]
}
]
}
]
$(document).ready(function () {
$("#mygrid").kendoGrid({
dataSource: {
schema: {
data: 'd',
model: {
id: "Id",
fields: {
Id: { type: "number" },
FirstName: { type: "string" },
LastName: { type: "string" },
City: { type: "string" },
BirthDate: { type: "date" }
}
}
},
transport: {
create: {
url: "../Webservices/KendoService.asmx/CreateAds", //specify the URL which should create new records. This is the Create method of the Products.asmx service.
contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
},
read: {
url: "../Webservices/KendoService.asmx/ReadAds", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.
contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
},
update: {
url: "../Webservices/KendoService.asmx/UpdateAds", //specify the URL from which should update the records. This is the Update method of the Products.asmx service.
contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
},
destroy: {
url: "../Webservices/KendoService.asmx/DestroyAds", //specify the URL which should destroy records. This is the Destroy method of the Products.asmx service.
contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
},
parameterMap: function (data, operation) {
if (operation != "read") {
// web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
return JSON.stringify({ products: data.models })
}
}
},
pageSize: 10
},
pageable: true,
height: 400,
toolbar: ["create"],
columns: [
{ field: "Id", width: "60px" },
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "City" },
{ field: "BirthDate", template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' },
{ command: [
{ name: "edit", text: "CustomEdit" }, // sets the text of the Edit button
{name: "destroy", text: "Destroy"} // sets the text of the "Delete" button
],
// sets the title and the width of the commands column
title: " ",
width: "300px"
}
],
editable: "popup",
//changes the text of the "Update" and "Cancel" buttons in the inline edit mode
edit: function () {
var updateBtnTxt = "CustomUpdate",
cancelBtnTxt = "CustomCancel",
curr_container = this._editContainer; //selects the current edit container
//sets the text of the "Update" button
$(curr_container).find("a.k-grid-update").text(updateBtnTxt);
//sets the text of the "Cancel" button
$(curr_container).find("a.k-grid-cancel").text(cancelBtnTxt);
}
});
});
/// <
summary
>
/// Creates new products by inserting the data posted by the Kendo Grid in the database.
/// </
summary
>
/// <
param
name
=
"products"
>The products created by the user.</
param
>
/// <
returns
>The inserted products so the Kendo Grid is aware of the database generated ProductID</
returns
>
[WebMethod]
public IEnumerable<
TempJson
> CreateAds(IEnumerable<
TempJson
> products)
{
var result = new List<
JobHistory
>();
JobHistoryDB sdb = new JobHistoryDB();
JobHistoryCollection myCollection = new JobHistoryCollection();
List<
TempJson
> returned = new List<
TempJson
>();
foreach (TempJson j in products)
{
JobHistory my = new JobHistory();
my.Approved = true;
my.CompanyID = 1;
my.CompanyName = "";
my.End = DateTime.Parse(j.BirthDate);
my.Start = DateTime.Parse(j.BirthDate);
my.JobTitle = j.FirstName;
myCollection.Add(my);
}
sdb.Insert(myCollection);
if (sdb.Insert(myCollection) > 0)
{
foreach (JobHistory j in myCollection)
{
TempJson mj = new TempJson();
mj.Id = j.JobHistoryID;
mj.FirstName = j.JobTitle;
mj.LastName = j.CompanyName;
mj.BirthDate = j.Start.ToShortDateString();
returned.Add(mj);
}
}
return returned;
}
/// <
summary
>
/// Reads the available products to provide data for the Kendo Grid
/// </
summary
>
/// <
returns
>All available products</
returns
>
[WebMethod]
public IEnumerable<
TempJson
> ReadAds()
{
JobHistoryDB sdb = new JobHistoryDB();
JobHistoryCollection myCollection = new JobHistoryCollection();
List<
TempJson
> returned = new List<
TempJson
>();
foreach (JobHistory j in sdb.GetAll())
{
TempJson mj = new TempJson();
mj.Id = j.JobHistoryID;
mj.FirstName = j.JobTitle;
mj.LastName = j.CompanyName;
mj.BirthDate = j.Start.ToShortDateString();
returned.Add(mj);
}
return returned;
}
/// <
summary
>
/// Updates existing products by updating the database with the data posted by the Kendo Grid.
/// </
summary
>
/// <
param
name
=
"products"
>The products updated by the user</
param
>
[WebMethod]
public void UpdateAds(IEnumerable<
TempJson
> products)
{
JobHistoryDB sdb = new JobHistoryDB();
JobHistoryCollection myCollection = new JobHistoryCollection();
foreach (TempJson j in products)
{
JobHistory my = sdb.GetByPK_JobHistory(j.Id)[0];
my.End = DateTime.Parse(j.BirthDate);
my.JobTitle = j.FirstName;
myCollection.Add(my);
}
sdb.Update(myCollection);
}
/// <
summary
>
/// Destroys existing products by deleting them from the database.
/// </
summary
>
/// <
param
name
=
"products"
>The products deleted by the user</
param
>
[WebMethod]
public void DestroyAds(IEnumerable<
TempJson
> products)
{
JobHistoryDB sdb = new JobHistoryDB();
JobHistoryCollection myCollection = new JobHistoryCollection();
foreach (TempJson j in products)
{
JobHistory my = sdb.GetByPK_JobHistory(j.Id)[0];
myCollection.Add(my);
}
sdb.Delete(myCollection);
}
}
public class TempJson
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string City { get; set; }
public string BirthDate { get; set; }
}
<
div
id
=
"winAutoSave"
data-role
=
"window"
>
<
h1
>Auto Saved Application</
h1
>
<
p
>An auto saved application has been found. <
span
style
=
" font-weight: bold; font-style:italic; color: Red;"
>Sample Red Text</
span
> This probably occured if you broswer hung or was closed without saving. At this point you may either</
p
>
<
ol
>
<
li
>Option 1</
li
>
<
li
>Option 2</
li
>
<
li
>Option 3</
li
>
<
li
>Option 4</
li
>
</
ol
>
<
div
style
=
" text-align: center; margin-top: 10px; padding-left: 35px;"
>
<
input
type
=
"button"
value
=
"Option 1"
/>
<
input
type
=
"button"
value
=
"Option 2"
/>
<
input
type
=
"button"
value
=
"Option 3"
/>
<
input
type
=
"button"
value
=
"Option 4"
/>
</
div
>
<
div
class
=
"clearAll"
></
div
>
</
div
>
error:
function
(e) {
alert(e);
_ds.cancelChanges();
}