Questions on Kendo UI for jQuery Forum

1 answer

232 views

chart showing all data points, grid showing pages

I have a large set of data I want to show in a scatter graph 20,000+ records. I also show a grid of the values to the side. Currently I am bringing all the records back to the client side and binding them to the chart and grid. I have a need to only bring back 10 records at a time and use paging on the grid for performance.

What is the best way to bring back (show) all the data points on the chart, but only a subset for the grid to maintain the best client performance.

Or do I need to switch to ASP.NET Ajax or MVC controls?

Thanks
Wyatt

Charts

answered on 24 Feb 2015

1 answer

187 views

Line chart - showing all categories from DataSource

When loading series from DataSource, it seems to only get (display) the Categories from one of the grouped series. Is it possible to get all distinct categories, for when one or more of the series is not as long as the others? See attached image.

Charts

answered on 24 Feb 2015

1 answer

526 views

Grid Transport method not working.

Hi. I'm troubling with updating data for grid.

I'm using angularjs with kendo.

This is my code...

var gridoption = {
dataSource :{
transport :{

read : {
url : "grid/ajax/file1",
dataType :'json",
},

update : function(e){
console.log("I'm calling update!!");
}
}
}
};

Grid called method 'read' properly, but when I edited the row, clicked the "update" button ,nothing happend.

So I changed my code like this.

var gridoption = {
dataSource :{
transport :{

read : function(e){
$http({
url : "grid/ajax/file1"
}).success(data){
e.success(data);
});
},

update : function(e){
console.log("I'm calling update!!");
}
}
}
};

Then I can load my data from "read" method and update the changed data properly.

Can't I use both 'read : function(e){}' and 'read : { url :...}' in one trasport option?

Grid

answered on 24 Feb 2015

1 answer

186 views

Kendo Scheduler

Hi Team,

I have attached one file where in I have attached the screen shot for the Kendo Scheduler that I have created. As per the screen shot we have a plus icon on the left side of the screen shot for every row. My requirement is if I click on one particular plus icon of a particular row then the details of that row should be deleted from the existing Kendo Scheduler and the same should be displayed on another Kendo Scheduler.

As this is as per my urgent project requirement so quick reply and response will be highly appreciated.

Thanks & Regards
Sunil Kumar Singh
Contact Number: +91 7893416287

General Discussions

answered on 24 Feb 2015

1 answer

336 views

Grid Within Detail Template Does Not Display JSON

Greetings!

I am perplexed. I've searched extensively and I hope that I'm not expressing an issue that has already been solved / documented .. but here goes:

My goal is to display a detail template with a grid inside. The template displays and I can display fields from the initial top-level data source. From within the detailInit event I am able to make a successful Ajax call to my controller and JSON data is being returned to the Ajax.done() callback. At that point, I successfully do a jQuery find() on e.detailRow and I new up a kendoGrid, passing in the data that Ajax returned. The result is always an empty grid in the detail template.

Parent grid:

var clientGrid = $("#clientsGrid").kendoGrid({

dataSource: employeeDataSource,

columns: [

{

field: "FirstName",

title: "First Name"

}, {

field: "LastName",

title: "Last Name"

}, {

field: "BirthDateFormatted",

title: "Birth Date"

}, {

field: "GenderFormatted",

title: "Gender"

}, {

field: "IsActiveFormatted",

title: "Active"

}

],

height: "600px",

pageable: { pageSize: 25, butonCount: 1 },

sortable: { allowUnsort: true },

detailTemplate: kendo.template($("#clientDetailTemplate").html()),

detailInit: getClientDetail

});

detailInit handler (data.Data is the JSON payload):

function getClientDetail(e) {

var detailRow = e.detailRow;

$.ajax({

type: "GET",

url: "/api/ClientApi/GetClientAddresses",

data: { Id: e.data.Id }

})

.done(function (data) {

var container = detailRow.find(".client-addresses").first();

container.kendoGrid({

height: "150px",

dataType: "json",

datasource: data.Data,

columns: [

{ field: "Address1", title: "Address 1" },

{ field: "Address2", title: "Address 2" },

{ field: "City", title: "City" },

{ field: "PostalCode", title: "Zip" }

]

});

}

.. and, the HTML and template script:

<h2>Clients</h2>

<div id="clientsGrid"></div>

<script type="text/x-kendo-template" id="clientDetailTemplate">

<div class="panel panel-primary">

<div class="panel-heading">

Client Details For #= FirstName # #= LastName #

</div>

<div class="panel-body">

<div class="row">

<div class="col-md-3">

<label>Inquiry Date:</label>#= kendo.toString(kendo.parseDate(InquiryDate), 'MM/dd/yyyy') #

</div>

<div class="panel panel-default">

<div class="panel-heading">

Addresses

</div>

<div class="panel-body">

<div id="#=Id#client-address" class="client-addresses"></div>

</div>

</script>

It seems I have tried all manner of slicing and dicing the logic and get the same results, which looks like the below. So strange - my controller logic shows the data going out, Fiddler shows the data going out, and I see that the JSON data arrives at the Ajax callback just fine.

Thanks in advance for any light that can be shown on this issue.

Regards,

Greg

/api/ClientApi/GetClientAddresses

Grid

answered on 24 Feb 2015

1 answer

246 views

[Solved] Dataviz Source Code?

I'm building very advanced Charts and I keep running into issues that can't be solved by any documentation. I need to view the source code (not minified) to figure out what internal mechanisms are being used in order to get my charts to function properly. The files I'm trying to find the source for are:

http://cdn.kendostatic.com/2014.3.1411/js/kendo.dataviz.core.min.js
http://cdn.kendostatic.com/2014.3.1411/js/kendo.dataviz.chart.min.js

I'm getting these links from http://www.telerik.com/download/custom-download. If I take the .min out of the filename, the file is not available.

Trying to read through minified source (after beautifying) is a nightmare. I have paid for a full license, is there a way for me to get these files?

Charts

answered on 24 Feb 2015

3 answers

162 views

kendoImageBrowser with custom model?

Hello to all,

According to the documentation I can have an extra filed in my schema.model something like "sizeInPxl"? How can I get it displayed in imageBrauser listView? I'm assigning imageBrauser listView to variable and then:

ImageBrowserListView.setOptions({
template: "<li>#:name# #:sizeInPxl#</li>"
});
It works. But the default template is overridden and everything is falling apart.

Another approach is to add the value of this additional field in listView dataBound event, but I don't like it either

ImageBrowserListView.bind("dataBound", function(e){
$.each(e.sender.items(), function(index, value){
ar $value = $(value),
dataSourceItem = e.sender.dataSource.getByUid($value.data("uid"));
// Add HTML element to $value with content dataSourceItem["sizeInPxl"]
});
});

Editor

answered on 24 Feb 2015

1 answer

349 views

[Solved] Specify Selected Item when get data remotely

Using the ASP.NET MVC Extensions, I am loading a DropDownList with data from the server.
How can I also pass down from the server which of the items in the DDL I would like to be selected? I always need to have at least one item selected and it will most likely not be the first item in the list. Until I fetch the data for the current user, I will not know which item should be selected.

This is my current code:

@(Html.Kendo().DropDownList()

.Name("companies")

.HtmlAttributes(new { style = "width:300px" })

.DataTextField("CompanyName")

.DataValueField("CompanyId")

.Filter("contains")

.DataSource(source =>

{

source.Read(read => { read.Action("GetCompanies", "CommonAjax"); })

.ServerFiltering(true);

})

.Deferred()

)

Thanks,
--John

DropDownList

answered on 24 Feb 2015

2 answers

89 views

formatting the stockchart navigator popup

Is it possible to format the datetime range in the "pop-over" that is displayed when the stockchart navigator is changed?
Please see attached screen shot.

Charts

answered on 24 Feb 2015

1 answer

178 views

[Solved] On hide don't remove from DOM

Hi,
I noticed when hiding a notification, the notification gets removed from DOM hence, the entire UI I have shifts up to replace the gap that was filled by notification.

Is there a way to just hide the notification without removing it from DOM?

Best regards
Bilal Haidar

Notification

answered on 24 Feb 2015