Questions on Kendo UI for jQuery Forum

1 answer

87 views

The kendo Grid is actually a table, with output that produces a single row (formatted with varying columns) for each data record. I was looking to create an actual grid, with a single template that outputs a "cell", and cells repeating horizontally until they wrap to the next row vertically. Like a grid of movie posters, or whatever.

There's nothing existing that marries a DataSource with some appropriate subset of Grid concepts to do this, is there?

Grid

answered on 23 Jun 2016

3 answers

7.7K+ views

How to acces index of the selected tab

<div id="tabstrip">
     <ul>
         <li>Table</li>
         <li>Chart</li>
     </ul>
     <div style="min-height:350px;"> </div>
     <div style="min-height:350px;"> </div>
</div>

How can I access the selected index or name? (tabstrip-1', tabstrip-2')

I use the select event:
$("#tabstrip").kendoTabStrip({
                       select: function(element){alert(element);}
                   });

And it works, alert pops up. But I cant use element.type or element.name or whatever on this element? So I dont
know which type is this element ...

I need the name (Chart,Table) or the index?

How to catch this?

Thank you
Marcus

TabStrip

answered on 23 Jun 2016

1 answer

246 views

Time Picker Autocomplete

Is there a way to enable autocomplete for kendoTimePicker?

Ideally, the dropdown list of time options would "follow" whatever the user types in.

So in this use case:

1. The user clicks the timepicker field and the dropdown expands.

2. The user types the number 2

3. The dropdown scrolls to 2:00

4. The user types 2:1

5. The dropdown scrolls to 2:10

6. The user types 2:15

7. The dropdown displays 2:15 am and 2:15 pm.

DatePicker

answered on 23 Jun 2016

3 answers

92 views

Streetside View (Bing)

I have a couple questions regarding the Map widget in Kendo before my team kicks off implementation of a couple of features in our application.

Does the kendo map control for Bing feature include the streetside view? If not, is there a roadmap on this or a current User Voice ticket open?
Do you plan on adding the ability to draw polygons on top of the Bing layer at some point?

Thank you!

Map

answered on 23 Jun 2016

2 answers

578 views

Xaxis and y axis title not visible in UI.

Hi Team,

I am using the HTML Kendo chart in one of my UI. I am using the scatter and scatter line type for the same. As I need to show the data with its best fit regression line.

I am not able see the x axis and y axis title in my chart.

Attached is the image of my chart.

<%= Html.Kendo().Chart<PRT.Web.Models.QualityOverTimeViewModel>()
.Name("BestFitGraphWarm")
.Series(series =>
{
series.Scatter(
model => model.xaxis,
model => model.yaxis
)
.Labels(labels => labels.Background("transparent").Visible(false));
})
.Series(series =>
{
series.ScatterLine(
model => model.estXFieldName,
model => model.estYFieldName
);
})
.CategoryAxis(axis => axis
.Title(title => title.Text("Time"))
.Categories(model => model.Label )
.MajorGridLines(lines => lines.Visible(false))
.Line(line => line.Visible(false))
)
.ValueAxis(axis => axis.Numeric()
.Title(title => title.Text("Warm"))
.MajorGridLines(lines => lines.Visible(false))
.Line(line => line.Visible(false))
.Max(100)
.Min(0)
)
.Title(title => title.Text("Bivariate Fit of Warm Germ Test% By Time(Days After Harvest)"))
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom))
.Tooltip(true)
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetRegressionWarmChartData", "Visualize"))
)
%>

Charts

answered on 23 Jun 2016

1 answer

294 views

$("#scheduler").data('kendoScheduler') is undefined

this is my scheduler code

<div id="scheduler" style="height:450px; overflow-y:auto;"></div>
                        <script>
                            $("#scheduler").kendoScheduler({
                                date: new Date("2013/6/6"),
                                timezone: "Etc/UTC",
                                views: [
                                  "day",
                                  "week",// a view configuration can be a string (the view type) or an object (the view configuration)
                                  { type: "month", selected: true }, // the "week" view will appear as initially selected
                                  "agenda",
                                  "timeline"
                                ],
                                dataSource: dsSchedule



                            });
                            var dsSchedule = new kendo.data.SchedulerDataSource({
                                transport: {
                                    read: {
                                        url: '/Projects/GetProject',
                                        dataType: 'json',
                                    },
                                },
                                schema: {
                                    model: {
                                        id: 'taskId',
                                        fields: {
                                            taskId: { from: "TaskID", type: "number" },
                                            title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                                            start: { type: "date", from: "Start" },
                                            end: { type: "date", from: "End" },
                                            description: { from: "Description" },
                                            recurrenceId: { from: "RecurrenceID" },
                                            recurrenceRule: { from: "RecurrenceRule" },
                                            recurrenceException: { from: "RecurrenceException" },
                                            isAllDay: { type: "boolean", from: "IsAllDay" }
                                        },
                                    },
                                },
                            });
                        </script>

when i access schedular using $("#scheduler").data('kendoScheduler') it gives error undefined

Scheduler

answered on 22 Jun 2016

6 answers

237 views

[Solved] Endless Scrolling + Filtering + Flat Skin

When Endless Scrolling and Filtering is used the the flat skin, the bottom element is not accessible.
http://demos.kendoui.com/mobile/listview/filtering.html#/

I have this issue on both devices and web views to a greater extent. Elastic allows me to see the bottom item, removing filtering shows me all the items just fine.

Is there a work around?

ListView (Mobile)

answered on 22 Jun 2016

4 answers

107 views

build categoryAxis from Array and have data properly align

Hello,

I'm trying to figure out how to achieve the following.

I have an array named chartdates which has all the unique date returns from our lookup

I also have deptChartObjects that has the hits array along with the hit dates

I simply need to draw the line chart so that they correspond with the hitDate or proply fall within the chartdates. Right now the categoryAxis doesn't show and the line draws properly, but the 3 lines basically stack on each other. so line 1 might have say a start date of 5/1 and line 2 will have a start date of 5/5 but they both stack on top of each other. I will the the data point for line 1 (5/1) to be before say line 2 (5/5).

Looking for some guidence on how to achiece this.

Thanks in advance,

Here is a sample JSON return

{
"top3Departments": {},
"departmentInfoDS": {
"DeptStats": [
{
"workgrp": "ONY",
"numberOfHits": 1972,
"recorddate": "2016-05-12T00:00:00",
"departmenttitle": "ANONYMOUS"
},
{
"workgrp": "ONY",
"numberOfHits": 333,
"recorddate": "2016-05-24T00:00:00",
"departmenttitle": "ANONYMOUS"
},
{
"workgrp": "ONY",
"numberOfHits": 224,
"recorddate": "2016-05-25T00:00:00",
"departmenttitle": "ANONYMOUS"
}
]
},
"chartDates": {
"chartdates": [
{
"recorddate": "2016-05-12T00:00:00"
},
{
"recorddate": "2016-05-23T00:00:00"
},
{
"recorddate": "2016-05-24T00:00:00"
},
{
"recorddate": "2016-05-25T00:00:00"
},
{
"recorddate": "2016-05-26T00:00:00"
},
{
"recorddate": "2016-05-27T00:00:00"
},
{
"recorddate": "2016-05-28T00:00:00"
},
{
"recorddate": "2016-05-29T00:00:00"
},
{
"recorddate": "2016-05-30T00:00:00"
}
]
},
"deptChartObjects": [
{
"hits": [
1972,
333,
224
],
"hitDates": [
"2016-05-12T00:00:00",
"2016-05-24T00:00:00",
"2016-05-25T00:00:00"
],
"name": "ANONYMOUS"
},
{
"hits": [
1972,
333,
224
],
"hitDates": [
"2016-05-12T00:00:00",
"2016-05-24T00:00:00",
"2016-05-25T00:00:00"
],
"name": "ANONYMOUS"
},
{
"hits": [
1972,
333,
224
],
"hitDates": [
"2016-05-12T00:00:00",
"2016-05-24T00:00:00",
"2016-05-25T00:00:00"
],
"name": "ANONYMOUS"
}
],
"departmentID": "ONY",
"departmentName": "ANONYMOUS",
"fromDTStr": "05-01-2016",
"toDTStr": "05-30-2016",
"totalHits": 2529,
"chartJSON": null
}

Charts

answered on 22 Jun 2016

1 answer

1.4K+ views

DataSourceResult with DTOs in ASP.NET

I'm attempting to populate a Kendo UI Grid with an object, however I'm using a DTO instead of the Entity Framework object that's defined in my database. The problem is that my DataSourceResult expects an object in the form of an IQueryable and my DTO is of a type List. Here is my Invoice object:

Public Class Invoice

<Key>

Public Property InvoiceID As Integer

Public Property Price As Double

Public Property AmountPaid As Double

Public Property Status As InvoiceStatus

<StringLength(10000)>

Public Property Memo As String

Public Property Client As Client

Public Property ClientID As Integer

End Class

And here is my DTO:

Public Class InvoiceDTO

Public Property InvoiceID As Integer

Public Property InvoiceDate As Date

Public Property Price As Double

Public Property AmountPaid As Double

Public Property Status As String

Public Property Memo As String

Public Property Client As String

Public Property ClientID As Integer

End Class

I'm using the following code in my GET in my API to return the object to my Grid. I want to return a DataSourceResult as opposed to a List because I can use the paging and sorting functions to return data from my API as efficiently as possible.

<HttpGet, Route("api/client/all/invoices/{InvoiceStatus:int}")>

Public Function GetInvoices(requestMessage As HttpRequestMessage) As DataSourceResult

Dim Invoices As IEnumerable(Of Invoice) = _db.Invoices.Include("Client").OrderBy(Function(i) i.InvoiceDate)

Dim invDTOs As New List(Of InvoiceDTO)

For Each inv As Invoice In Invoices

Dim invDTO As New InvoiceDTO

invDTO.Client = inv.Client.Name

invDTO.ClientID = inv.ClientID

invDTO.Memo = inv.Memo

invDTO.InvoiceDate = inv.InvoiceDate

invDTO.Price = inv.Price

invDTO.AmountPaid = inv.AmountPaid

invDTO.Status = status(inv.Status)

invDTOs.Add(invDTO)

Next

Dim result As New DataSourceResult()

result.Data = invDTOs

result.Total = invDTOs.Count

Dim response As HttpResponseMessage = Request.CreateResponse(HttpStatusCode.Created, result)

Return response

End Function

I can't query the DTO because it's a list. I can set the Data property of the DataSourceRequest to my DTO, however then I lose the paging functionality of the DataSourceRequest object built in that works well with the Grid. How do I use a DTO with the DataSourceResult?

Data Source

answered on 22 Jun 2016

2 answers

168 views

[Solved] Databound to modify series of events.

I'm currently using the dataBound tag to modify events to set the opacity if a condition is not met. This is working great for single events; However if I add a new series of events only the first one sets as expected. The other events in the series do not change. I see the other events have different id's. Is there a way for me to access these other events that are created?

Here is an example, Just modify the task to be a series.

http://dojo.telerik.com/@bbmicha/ayEtO/5

Thanks!

Scheduler

answered on 22 Jun 2016