@(Html.Kendo().DropDownList() .Name("divisionCombobox") .BindTo("#=UserViewModel.DivisionId") .HtmlAttributes(new { style = "width:250px" }) .DataTextField("DisplayName") .DataValueField("Id") .AutoBind(true) .DataSource(source => source .Read(read => read.Action("ListDivisions", "Security")) .ServerFiltering(true)))I have a couple of pie charts on a screen. I have some angular code that populates them.
$scope.SetPieChart = function (data, container) { var dataSource = new kendo.data.DataSource({ data: data, //create group and aggregates group: { field: "type", aggregates: [ { field: "size", aggregate: "sum" } ] } }); //read dataSourcePeers to load the data dataSource.read(); var series = [], items = dataSource.view(), length = items.length, item; //create the chart series for (var i = 0; i < length; i++) { item = items[i]; series.push({ category: item.value, value: item.aggregates.size.sum }) } container.kendoChart({ theme: "metro", legend: { position: "custom", offsetX: 10, offsetY: 260 }, chartArea: { background: "transparent" }, title: { text: " ", margin: { bottom: -240 } }, dataSource: dataSource, seriesDefaults: { labels: { visible: false, background: "transparent", template: "#= category #: \n #= value#%" }, type: "pie" }, chartArea: { margin: 1, height: 450 /* add this option */ }, series: [{ data: series }], tooltip: { visible: true, format: "{0:N1}%" } }); }The post event that gets the data returns the data in the order I want to display in the chart but for some reason when it gets displayed on the screen it is alpha order. Is there something that is forcing the alpha sort? Is there a way to keep the order which is in the returned json
Hi Guys,
I've been going over a lot of posts in regards to conditional formatting of the Grid Control's cells. I've now ended up with the below code. However this does not want to change anything on the intended cell... Everything stays the same.
Based on the code I was expecting the cell in the column "WO Type" to change it's background color if the value of the cell containing ERR_CAUSE had a 403 value in it. What am I missing out on here?
@(Html.Kendo().Grid(Model)
.Name("Shiftreport")
.Events(events => events.Change("Grid_OnRowSelect"))
.Columns(columns =>
{
columns.Bound(o => o.WORK_TYPE_ID).Title("WO Type");
columns.Bound(o => o.TOP_EQUIPMENT_ID).Title("Equipment");
columns.Bound(o => o.ERR_DESCR_LO).Title("Work Order");
columns.Bound(o => o.ERR_CAUSE).Title("Cause");
columns.Bound(o => o.MAX_EQUIP_DOWN_TIME_START).Format("{0:dd/MM HH:mm}").Title("DT Start");
columns.Bound(o => o.MAX_EQUIP_DOWN_TIME_END).Format("{0:dd/MM HH:mm}").Title("DT Stop");
})
.CellAction(cell =>
{
if (cell.Column.Title == "WO Type")
{
if (cell.DataItem.ERR_CAUSE == "403")
{
//Set the background of this cell only
cell.HtmlAttributes["style"] = "background:red;";
}
}
})
.Pageable(pageable => pageable
.PageSizes(true)
)
.Sortable()
.Selectable()
.Navigatable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(false)
.Model(model => { model.Id(p => p.WO_NO); })
.Sort(sort => sort.Add(o => o.MAX_EQUIP_DOWN_TIME_START).Descending())
))
Thanks in advance!
I'm using a treeList, I want to do an action whenever the filter is used. I'm trying to do that with the change event but this is not working.
According to the documentation ,the Change event is " Fired when the data source is populated from a JavaScript array or a remote service, a data item is inserted, updated or removed, the data items are paged, sorted, filtered or grouped." But the change event doesn't get fired in my case.
Is there a way to know when the filter is used ?
Here is my code:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
change: function(e) {
console.log("not fired when applying filter");
},
selectable: "multiple, cell",
filterable: true
});
var treeList = $("#treeList").data("kendoTreeList");
I am trying to create a kendo grid with excel export. My data is shown precisely as I want it and the grid works fine. However, the saveAsExcel function triggers the excelExport event, but no file is created. Same problem with the pdf export. Here is my grid options:
grid = $("#grid").kendoGrid({ toolbar:["excel","pdf"], height: 500, scrollable: true, groupable: true, sortable: true, filterable: false, excel: { allPages:true, filterable:true }, excelExport: function(e) { console.log('Firing Export'); console.log(e.workbook); console.log(e.data); }, pdfExport: function(e){ console.log('PDF export'); }, columns: [ { field: "date", title: "Time", template: "#= kendo.toString(kendo.parseDate(date), 'MM/dd/yyyy') #", width: '120px'}, { field: "customer", title: "Customer" }, { field: "amount", title: "Total", format: "{0:c}", width: '70px', aggregates: ["sum"]}, { field: "paid_with", title: "Payment", width: '130px'}, { field: "source", title: "Source" }, { field: "sale_location", title: "Sale Location" } ] }).data("kendoGrid");
$.ajax({ 'url':'/POS/ajax/loadTransactionsDetailsForDay.php', 'data':{ filters }, 'type':'GET', 'dataType':'json', 'success':function(response) { var dataSource = new kendo.data.DataSource({ data: response.data.invoices, pageSize: 100000, schema: { model: { fields: { date: {type: "string"}, customer: { type: "string" }, amount: { type: "number" }, paid_with: {type: "string"}, source: {type:"string"}, sale_location: {type:"string" } } } } }); grid.setDataSource(dataSource); grid.refresh(); } });0: o _events: Object _handlers: Object amount: 40.45 customer: "customer 1" date: "2015-11-25T00:00:00-08:00" dirty: false employee: 23 paid_with: "Check" parent: () sale_location: "Main" source: "POS" uid: "70b2ba9c-15f7-4ac3-bea5-f1f2e3c800d3"Anyone got any idea why this would not work?
Every example on this I can find make it look super simple, just create the grid and call export... So I have to have overlooked something.
I am grateful for any ideas about this.
Thanks.
Hi Team,
I want to add kendo upload control in kendo grid using asp.net web page instead of mvc page.
Can you please help me out. I am new in kendo ui.
How can i write code to save the files on server once file has been selected on client side. I searched lots on demo page but all contain code with controller which i dont want as my application is simple asp.net.
Thanks.
Ahmad
How can I specify the text to be displayed in JAWS for the icons in DatePicker and DateTimePicker?
By default, when I use JAWS to look at the elements of the screen, the following is displayed for DatePickers and DateTimePickers:
DatePicker
Hire Date Edit MM/DD/YYYY
select Button
DateTimePicker
Shift Start Edit MM/DD/YYYY H:M t
select Button
select Button
These "select Button" entries correspond to the calendar icon (for both) and the clock icon (for DateTimePicker).
When I have multiple buttons on the screen (or even when it's a DateTimePicker), there are multiple entries that say "select Button" and the user doesn't know what they are. I'd like to set them so that they'd say something like the following:
DatePicker
Hire Date Edit MM/DD/YYYY
Set Hire Date Button
DateTimePicker
Shift Start Edit MM/DD/YYYY H:M t
Set Shift Start Date Button
Set Shift Start Time Button
I can do this by manually adding the "aria-label" attribute to the appropriate span ("k-icon k-i-calendar" for the calendar, "k-icon k-i-clock" for the clock) when debugging (e.g., F12), but can't seem to figure out how to do it on the control itself in code. Here's how I have the controls defined:
01./* HTML Body */02. 03.<input id="hireDatePicker" aria-label="@UserInterface.NewHire_HireDatePicker_Text" /> 04.<input id="shiftStartDateTimePicker" aria-label="@UserInterface.NewHire_ShiftStartDateTimePicker_Text" />05. 06./* $(document).ready(function () */07. 08.$('#hireDatePicker').kendoDatePicker({09. value:new Date(),10. ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"11.});12. 13.$('#shiftStartDateTimePicker').kendoDateTimePicker({14. value:new Date(),15. interval:60,16. change: startDateTimeChange,17. ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"18.});