or
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(); } $.ajax({ url: 'dsr.asmx/get_Payment', async: true, cache: false, timeout: 30000, contentType: 'application/json; charset=utf-8', data: "{}", type: 'POST', dataType: 'json', success: function (msg) { $("#payment").val("revpay").kendoDropDownList({ index: 0, optionLabel: "Select Payment Type", dataTextField: "Description", dataValueField: "Code", filter: "contains", suggest: true, minLenght: 1, change: onPayChange, dataSource: { data: msg.d } }); } });function onResChange() { var res = document.getElementById("result").value; switch (res) { case 'c': alert('Canceled'); $("#payment").attr('disabled', 'disabled'); break; case 'cb': alert('Call Back no Sale'); break; } }<!DOCType html><html><head> <title></title> <script src="js/jquery-1.7.1.js"></script> <script src="js/kendo.all.js"></script> <link href="styles/kendo.common.css" rel="stylesheet" /> <link href="styles/kendo.default.css" rel="stylesheet" /></head><body><div id="chart" style="height:300px; width:500px"></div><input id="addData" class="k-button" type="button" value="Add Data" /><script> $(function() { var data = [ { employee: "Joe Smith", sales: 2000 }, { employee: "Jane Smith", sales: 2250 }, { employee: "Will Roberts", sales: 1550 }]; $("#addData").click(function() { data = data.concat({ employee: "Will Roberts", sales: Math.floor(Math.random()*10001) }); //var chart = $("#chart").data("kendoChart"); //chart.options.data = data; //alert(data) //chart.refresh(); }); $("#chart").kendoChart({ title: { text: "Employee Sales" }, dataSource: new kendo.data.DataSource({ data: data }), series: [{ type: "line", field: "sales", name: "Sales in Units" }], categoryAxis: { field: "employee" }, tooltip: { visible: true, format: "{0}%" } }); })</script></body></html>