or
2 answers
810 views
Hi,
I'm using kendo-ui with aurelia and opted for the kendui templating for exporting grouped grid data and have everyting working except the section marked below when grouping and refreshing the dataset. In summary I want to refresh datasource and maintain aggregate groupings.
Thanks,
John
This works. No aggregate totals in groups.
changeData() {
let s1 = moment(this.startDatePicker._value).format('MM-DD-YYYY')// moment(this.startDatePicker.value).format('MM-DD-YYYY')
let s2 = moment(this.endDatePicker._value).format('MM-DD-YYYY') //moment(this.endDatePicker.value ).format('MM-DD-YYYY')
// the api fetching new data
api.getTWO(s1, s2)
.then((jsonRes) => {
let twos = jsonRes;
let grid = jQuery(this.grid).data('kendoGrid');
grid.setDataSource(dataSource) // dataSource.read();
})
}
attached() {
jQuery(this.grid).kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "//demos.telerik.com/kendo-ui/service/export",
filterable: true,
allPages: true
},
dataSource: {
type: "json",
transport: {
read: "http://localhost:8080/api/v1/two/getAll/" + s1 + "/" + s2
},
group: [{ field: "TenantCategory_Desc" }, { field: "CYM" }],// set grouping for the dataSource
schema: {
model: {
fields: {
CompanyName: { type: "string" },
CYM: { type: "string" },
CDATE: { type: "string" },
TenantCategory_TenantCategory: { type: "string" },
TenantCategory_Desc: { type: "string" },
Comments: { type: "string" },
Total: { type: "number" },
TenantCategory_Amt: { type: "number" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
groupable: true,
sortable: true,
pageable: true,
columns: [
{ field: "CompanyName", filterable: false },
"CYM",
"CDATE",
{ field: "TenantCategory_Desc", title: "TenantCategory_Desc" },
{
field: "Total",
title: "Total"
}, {
field: "TenantCategory_Amt",
title: "TenantCategory_Amt"
}
],
});
}
}
This Does Not work
changeData() {
let s1 = moment(this.startDatePicker).format('MM-DD-YYYY')
let s2 = moment(this.endDatePicker).format('MM-DD-YYYY')
api.getTWO(s1, s2)
.then((jsonRes) => {
let twos = jsonRes;
let dataSource = new kendo.data.DataSource({ data: twos });
let grid = jQuery(this.grid).data('kendoGrid');
let dataSource = new kendo.data.DataSource({ data: twos });
let grid = jQuery(this.grid).data('kendoGrid');
grid.dataSource.group({
field: "TenantCategory_Desc", aggregates: [
{ field: "TenantCategory_Desc", aggregate: "count" },
{ field: "Total", aggregate: "sum" }
],
})
grid.setDataSource(dataSource)
dataSource.read();
})
}
attached() {
this.startDatePicker.value = this.ss1;
jQuery(this.grid).kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "//demos.telerik.com/kendo-ui/service/export",
filterable: true,
allPages: true
},
dataSource: {
type: "json",
transport: {
read: "http://localhost:8080/api/v1/two/getAll/" + this.ss1 + "/" + this.ss2
},
group: {
field: "TenantCategory_TenantCategory", aggregates: [
{ field: "TenantCategory_Desc", aggregate: "count" },
{ field: "Total", aggregate: "sum" }
]
}
,
schema: {
model: {
fields: {
CompanyName: { type: "string" },
CYM: { type: "string" },
CDATE: { type: "string" },
TenantCategory_TenantCategory: { type: "string" },
TenantCategory_Desc: { type: "string" },
Comments: { type: "string" },
Total: { type: "number" },
TenantCategory_Amt: { type: "number" }
}
}
},
pageSize: 20,
aggregate: [{ field: "TenantCategory_Desc", aggregate: "count" },
{ field: "Total", aggregate: "sum" }]
},
groupable: true,
sortable: true,
scrollable: false,
pageable: true,
columns: [
{ field: "TenantCategory_Desc", title: "TenantCategory_Desc", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ field: "Total", title: "Total", aggregates: ["sum"], footerTemplate: "#= kendo.toString(sum, '0.00') #", groupFooterTemplate: "#= kendo.toString(sum, '0.00') #" },
{ field: "CompanyName", filterable: false },
{ field: "CYM", title: "YearMonth", filterable: true },
{ field: "CDATE", filterable: false },
]
});
}
}
}
3 answers
139 views
Hi,
Im creating a SchedulerDataSource using remote data, however the when the SDS gets the responed data its applying (I assume) some kind of timezone logic that is changing the times of the start and end dates. I do not want this, as the times are stored correctly in the Database being read. Please advise on how I can stop this from happening?
CODE:
var timePickerDataSource = new kendo.data.SchedulerDataSource({ transport: { read: { data: { userId: 1, frequencyDays: "1,4,8,11,15,18,22,25" }, dataType: "json", type: "GET", url: "/itd-boot-thymeleaf-demo/events/forSchedulerTimePicker" } }, schema: { parse: function(e) { $(e).each(function(i,e) { console.debug("Schema.parse", "Event (Id:"+e.id + ", start: " + e.start + ", end: " + e.end + ")"); }) return e; } }});timePickerDataSource.fetch(function(){ $(timePickerDataSource.data()).each(function(idx, event) { console.debug("SDS", "Event (Id:"+event.id + ", start: " + event.start + ", end: " + event.end + ")"); });});My Server Response:
[{"id":1,"start":"2016-10-04T07:00:00.000Z","end":"2016-10-04T08:00:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":3,"start":"2016-10-04T11:00:00.000Z","end":"2016-10-04T13:00:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":6,"start":"2016-10-04T14:00:00.000Z","end":"2016-10-04T15:30:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":2,"locationId":2},{"id":9,"start":"2016-10-04T12:30:00.000Z","end":"2016-10-04T13:30:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":10,"start":"2016-10-04T09:00:00.000Z","end":"2016-10-04T10:00:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":11,"start":"2016-10-04T10:30:00.000Z","end":"2016-10-04T11:30:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1}]
schema.parse Results:
Event (Id:1, start: 2016-10-04T07:00:00.000Z, end: 2016-10-04T08:00:00.000Z)
Event (Id:3, start: 2016-10-04T11:00:00.000Z, end: 2016-10-04T13:00:00.000Z)
Event (Id:6, start: 2016-10-04T14:00:00.000Z, end: 2016-10-04T15:30:00.000Z)
Event (Id:9, start: 2016-10-04T12:30:00.000Z, end: 2016-10-04T13:30:00.000Z)
Event (Id:10, start: 2016-10-04T09:00:00.000Z, end: 2016-10-04T10:00:00.000Z)
Event (Id:11, start: 2016-10-04T10:30:00.000Z, end: 2016-10-04T11:30:00.000Z)
timePickerDataSource.fetch() data iteration results:
SDS Event (Id:1, start: Tue Oct 04 2016 09:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 10:00:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:3, start: Tue Oct 04 2016 13:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 15:00:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:6, start: Tue Oct 04 2016 16:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 17:30:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:9, start: Tue Oct 04 2016 14:30:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 15:30:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:10, start: Tue Oct 04 2016 11:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 12:00:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:11, start: Tue Oct 04 2016 12:30:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 13:30:00 GMT+0200 (South Africa Standard Time))
All the times in the fetch() results are pushed forward.
My solution (more like hack) is to recreate the dates without the timezone info...
schema: { parse: function(events) { $(events).each(function(i, e) { //start & end date string, 2016-10-04T10:00:00.000Z e.start = new Date(e.start.substring(0,19)+"+0200"); e.end = new Date(e.end.substring(0,19)+"+0200"); }) return events; }}Please advise on a more correct/efficient way to maintain the integrity of my times.
Many Thanks and Kind Regards,
Grant
Rosen
Telerik team
answered
on
06 Oct 2016
5 answers
1.9K+ views
Hi,
I can't figure it out why kendo-drop-down-list ng-change fired twice as configuration done as follows,
//HTML
<select kendo-drop-down-list
ng-model="EditPriestSetting.settingYear"
k-data-text-field="'keyDate'"
k-data-value-field="'valueDate'"
k-data-source="addYears"
ng-change="GetEditPriestSettings(EditPriestSetting.settingYear)">
</select>
//script
$scope.GetEditPriestSettings=function(selectedYear){
console.log($scope.EditPriestSettings);
if(selectedYear) {
angular.forEach($scope.EditPriestSettings, function (PriestSetting) {
if (parseInt(selectedYear) === parseInt(PriestSetting.Year)) {
$scope.EditPriestSetting = {
settingYear: PriestSetting.Year,
holiday: PriestSetting.HolidayDays,
seniorDays: PriestSetting.SeniorDays,
studyLeave: PriestSetting.StudyLeaveDays,
freeDays: PriestSetting.FreeDays,
redDays: PriestSetting.RedDays,
comment: PriestSetting.Comment
};
};
});
}
};
what am i missing here?
I can't figure it out why kendo-drop-down-list ng-change fired twice as configuration done as follows,
//HTML
<select kendo-drop-down-list
ng-model="EditPriestSetting.settingYear"
k-data-text-field="'keyDate'"
k-data-value-field="'valueDate'"
k-data-source="addYears"
ng-change="GetEditPriestSettings(EditPriestSetting.settingYear)">
</select>
//script
$scope.GetEditPriestSettings=function(selectedYear){
console.log($scope.EditPriestSettings);
if(selectedYear) {
angular.forEach($scope.EditPriestSettings, function (PriestSetting) {
if (parseInt(selectedYear) === parseInt(PriestSetting.Year)) {
$scope.EditPriestSetting = {
settingYear: PriestSetting.Year,
holiday: PriestSetting.HolidayDays,
seniorDays: PriestSetting.SeniorDays,
studyLeave: PriestSetting.StudyLeaveDays,
freeDays: PriestSetting.FreeDays,
redDays: PriestSetting.RedDays,
comment: PriestSetting.Comment
};
};
});
}
};
what am i missing here?
Dimiter Topalov
Telerik team
answered
on
06 Oct 2016
1 answer
301 views
I have a page that contains a dropdown that will drive the contents of my kendo grid. When a button is clicked, I want to manually call my read function of my grid to get data from my MVC controller. See below:
$("#engineButton").click(function () { $("#logGrid").data("kendoGrid").dataSource.options.transport.read.data.engineId = $("#stationaryEngine").val(); $("#logGrid").data("kendoGrid").dataSource.read(); $("#logGrid").show(); });My grid is set up as follows:
$("#logGrid").kendoGrid({ dataSource: { transport: { read: { url: "@Url.Action("StationaryEngineLogGrid_Read", "Engine")", type: "get", dataType: "json", data: { engineId: 0 } }, create: { url: "@Url.Action("StationaryEngineLogPopup_Create", "Engine")", type: "post", dataType: "json" }, update: { url: "@Url.Action("StationaryEngineLogPopup_Update", "Engine")", type: "post", dataType: "json" }, destroy: { url: "@Url.Action("StationaryEngineLogPopup_Destroy", "Engine")", type: "post", dataType: "json" } }, schema: { model: { id: "Id", fields: { Id: { type: "number", editable: false }, EngineId: { type: "number", editable: false }, LogDate: { type: "date", parse: function (data) { var d = new Date(data); data = kendo.toString(new Date(d), "MM/dd/yyyy"); } }, EngineHoursStart: { type: "number", validation: { required: true } }, EngineHoursEnd: { type: "number", validation: { required: true, customValidation: function (input, params) { if (input.is("[name=engineHoursEnd]")) { var endHours = $(input).val(); var startHours = input.closest(".k-edit-form-container").find("input[name=engineHoursStart]").val(); if (endHours <= 0) { $(input).attr("data-customValidation-msg", "End Hours must be > 0."); return false; } else if (endHours <= startHours) { $(input).attr("data-customValidation-msg", "End Hours must be > Start Hours."); return false; } } else if (input.is("[name=engineHoursStart]")) { var startHours = $(input).val(); var endHours = input.closest(".k-edit-form-container").find("input[name=engineHoursEnd]").val(); if (startHours <= 0) { $(input).attr("data-customValidation-msg", "Start Hours must be > 0."); return false; } else if (startHours > endHours) { $(input).attr("data-customValidation-msg", "Start Hours must be < End Hours."); return false; } } else if (input.is("[name=logDate]")) { var date = $(input).data("kendoDatePicker").value(); if (date > new Date()) { $(input).attr("data-customValidation-msg", "Date must be today or less."); return false; } } return true; } } }, Hours: { type: "number", editable: false }, RunningTotalHours: { type: "number", editable: false }, EmergencyUse: { type: "boolean" }, MaintenanceUse: { type: "boolean" }, MonitorLight: { type: "string" }, Comments: { type: "string" } } } }, error: function (e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } } }, editable: { mode: "popup", template: $("#popup_editor").html() }, edit: function (e) { var editWindow = this.editable.element.data("kendoWindow"); editWindow.wrapper.css({ width: 600 }); if (e.model.isNew()) { editWindow.title("Add new logging record"); $("#EngineId").val($("#stationaryEngine").val()); e.model.LogDate = "@DateTime.Now.Date.ToShortDateString()"; e.model.EngineId = $("#stationaryEngine").val(); } else { editWindow.title("Edit logging record"); } $("#logDate").kendoDatePicker({ format: "MM/dd/yyyy", parseFormats: ["MM-dd-yyyy", "MM/dd/yyyy"] }); editWindow.center(); }, toolbar: [{ name: "create", text: "Add new logging record" }], columns: [ { field: "Id", hidden: true }, { field: "EngineId", hidden: true }, { field: "LogDate", title: "Date", format: "{0: MM/dd/yyyy}" }, { field: "EngineHoursStart", title: "Engine Hours Start" }, { field: "EngineHoursEnd", title: "Engine Hours End" }, { field: "EmergencyUse", title: "Emergency Use", template: "<input type='checkbox' #= EmergencyUse ? checked='checked':'' # />" }, { field: "MaintenanceUse", title: "Maintenance Use", template: "<input type='checkbox' #= MaintenanceUse ? checked='checked':'' # />" }, { field: "MonitorLight", title: "Monitor Light" }, { field: "Comments", title: "Comments" }, { command: [{ name: "edit", text: { update: "Save" } }, { name: "destroy" }], title: "Actions" } ] });Now, all of this works for my read function. I hit my breakpoint in my controller. Great. However, when I do a Create, I have a date field inside my popup template that will not come across to my controller. It's defined as follows:
<script id="popup_editor" type="text/x-kendo-template">... <input type="text" name="logDate" data-type="date" data-bind="value:LogDate" data-role="datepicker" required />...</script>Every time I submit the popup form, the date never comes across to my controller. I read in other posts that you have to use a ParameterMap in your datasource, but if doing so, it messes up the read functionality.
Is there a way to accomplish both the read functionality and the create with my date being parsed correctly and passed to my controller?
Stefan
Telerik team
answered
on
06 Oct 2016
1 answer
93 views
Documentation for depth / start is wrong.
Quote:
"MONTH"shows the days of the month"YEAR"shows the months of the year"DECADE"shows the years of the decade"CENTURY"shows the decades from the centuryMONTH, YEAR, DECADE ... is not working, month, year, decade ... is.
Dimiter Topalov
Telerik team
answered
on
06 Oct 2016
2 answers
199 views
There are 2 different examples how to use confirm:
kendo.confirm("Are you sure that you want to proceed?").then(function () { //from online demoskendo.confirm("Are you sure that you want to proceed?").done(function () { //from online documentation
But kendo.all.d.ts has:
function confirm(text: string): void;which makes it impossible (without typecasting to any) for chaining (then/done). Same for prompt.
Vessy
Telerik team
answered
on
06 Oct 2016
1 answer
169 views
I have a grid declared as:
columns: [ { title: "", width: "55px", template: kendo.template($("#serviceActionsTemplate").html()) }, { field: "serviceDate", title: "Service Date", type: "date", template: "#= kendo.toString(kendo.parseDate(serviceDate), '" + vm.dateFormat + "') #", width: "120px" }, { field: "serviceType", title: "Service Type", width: "150px" }, { field: "referenceNumber", title: "Ref Number", width: "100px" }, { field: "odometer", title: "Odometer", type: "number", format: "{0:n0}", attributes:{style:"text-align:right;"}, width: "100px" }, { field: "engineHours", title: "Engine Hrs", type: "number", format: "{0:n0}", attributes: { style: "text-align:right;" }, width: "100px" }, { field: "totalCost", title: "Total Cost", type: "number", format: "{0:c2}", attributes: { style: "text-align:right;" }, aggregates: ["sum"], footerTemplate: "<div style='float: right'>#= kendo.toString(sum, 'c2') #</div>", width: "90px" }, { field: "itemId", title: "ItemId", type: "number", width: "90px", hidden: true }, { field: "serviceId", title: "ServiceId", type: "number", width: "90px", hidden: true } ], autoBind: false, dataSource: vm.serviceListGridData, editable: "inline", filterable: true, groupable: false, height: 400, navigatable: true, pageable: false, resizable: true, scrollable: true, sortable: { mode: "multiple" }}The html:
<md-tab label="Servicing"> <md-content> <div id="vehicleServicingList" name="vehicleServicingList"> <section class="page-bar"> <md-button ng-click="vm.addServicing($event)" ng-disabled="!vm.security.allowCreateServicing" aria-label="Add Servicing"> <md-tooltip>Add New Servicing</md-tooltip> <md-icon md-svg-icon="plus"></md-icon> Add </md-button> <md-button ng-click="vm.editServicing($event)" ng-disabled="vm.security.editLevelServicing < 1 || vm.selectedServices.length != 1" aria-label="Edit Servicing"> <md-tooltip>Edit Selected Servicing</md-tooltip> <md-icon md-svg-icon="pencil"></md-icon> </md-button> <md-button ng-click="vm.removeMultipleServices($event)" ng-disabled="!vm.security.allowDeleteServicing || vm.selectedServices.length < 1" aria-label="Delete Selected Servicing"> <md-tooltip>Delete Selected Servicing</md-tooltip> <md-icon md-svg-icon="delete"></md-icon> </md-button> </section> <kendo-grid id="serviceListGrid" name="serviceListGrid" options="vm.serviceListGridOptions" ></kendo-grid> </div> </md-content></md-tab>When I attempt to click the checkbox in the first column the grid moves and then I try again and it moves again until it pushes the toolbar off the top.
Please see attached images of how it looks before the click on checkbox and after. The grid seems to push the tabs, toobar and column headers off the top.
Alexander Popov
Telerik team
answered
on
06 Oct 2016
1 answer
155 views
Kendo UI for JSP
Hi All,
How can i create dependency in kendo UI for JSP. for example. I have combo box with country names. I will select country names its respective states should get load in another combo box. please help me with this.
regards,
Irfan
Dimiter Topalov
Telerik team
answered
on
06 Oct 2016
7 answers
2.1K+ views
How to get the cells' value of the selected range? please give the example, thanks!
Alexander Popov
Telerik team
answered
on
06 Oct 2016
10 answers
378 views
Hello guys,
Is there a way to change the visual marker to be on left on the line on the middle.
I have provided this dojo to better illustrate what i want to do.
Thank you very much.
Daniel
Telerik team
answered
on
06 Oct 2016
