Questions on Kendo UI for jQuery Forum

3 answers

182 views

KendoUI datasource bound with Html table (not grid)

I am using KendoUI web controls with KO binding using knockout-kendo.js in my project. It works like a charm with kendo Grid.

However, at couple of places I want to use Html table whose rows are bound with kendo datasource inside my VM using KO bindings. In other words, I want something similar to ko's foreach binding using kendo datasource.

I referred http://jsfiddle.net/rniemeyer/qtx3J/ as a sample but when I integrate kendo datasource here, it stops working.

var viewModel = ko.observable({
persons: new kendo.data.DataSource({
schema: {
model: { id: "PersonId" },
data: "Data",
total: "Total",
},
transport: {
read: {
url: "/api/PersonApi/Get",
dataType: "json",
},
},
pageSize: 2,
serverPaging: true,
serverSorting: true,
}),
itemTemplate : function (item) { return "view"; },});

Thank you for your help!

Data Source

answered on 08 Jan 2014

10 answers

235 views

Chart doesn't show all series after datasource.read()

Hello,

I've implemented a few charts (stacked bars, stacked areas etc) and encountered the following behaviour:

If you hide the last of three series via legend click, click the same legend item to show series again and then reaload data via datasource.read() and JSON the last series is disabled and therefore hidden (at the time new data was loaded the series was visible!).
Since I did not found a way to explicitly show the series again (after loading data) you have to click another time the legend item to see the series on the chart again.

JS to load new data:
var chart = $("#AverageCountPerDay").data("kendoChart");
        // recalculate value axis range
        chart.options.valueAxis.max = undefined;
        chart.dataSource.read({ groupNumber: "@Model.GroupID", startDate: startDate.value().toJSON(), endDate: endDate.value().toJSON(), granularity: "day" });

Is there a way to fix this problem or an appropriate workaround?

TIA
Dirk

Charts

answered on 08 Jan 2014

1 answer

133 views

Download KendoUI with Typescript

Hello Team
Wish you a great year ahead.
We have used KendoUI controls in our last application and have decided to continue with it for this release too. And we would like to use TypeScript this time. Hope KendoUI is available to work with TypeScript too.
We are the premium members here and have the licenses too. Where can we download the typescript-ed KendoUI ?

General Discussions

answered on 08 Jan 2014

5 answers

60 views

Drag & Drop in a Icenium application

I'm using icenium for a mobile aplication using HTML5, JS,CSS and Kendo.
I manage to get it to work but the only problem that I'm having it's in centering the cursor when dragging an object, i.e., when the clone is dragged, the object is diverted. (See tha attached image)
When I user cursorOffset to put the object in the correct position, dragging becomes really slow so it is not an option. Also, editing the clone css also becomes really slow.
In the drag event, I use:

drag: function(e) {

console.log("x: ", e.screenX, "y: ", e.screenY);

}

This returns undefined. When I look to the object "e", the real x and y axis positions are in e.x.screen and e.y.screen. Is there a way to use this positions?

Drag and Drop

answered on 08 Jan 2014

1 answer

90 views

Sorting not working

Hello my sorting is not working at all, no matter what I do. If I look in firebug the json-encoded response shows up but it is not sorted correctly, if I put a breakpoint in the "Get" method the request.Sorts parameter is null. It shows the arrows inside the columns but nothing else happens.

here is the code for the view

@(Html.Kendo().Grid<ModelNewsletter>().Name("NewslettersGrid").Columns(c => {

c.Bound(m => m.Title);

c.Bound(m => m.DateCreated).Format("{0:dd/MM/yyyy}");

c.Bound(m => m.AccommodationName);

}).DataSource( d => d

.Ajax()

.Read(r => r.Action("Get", "Newsletter"))

.PageSize(5)

)

.Pageable()

.Sortable(sb => sb.AllowUnsort(true).SortMode(GridSortMode.SingleColumn))

.ToolBar(toolbar => toolbar.Custom().Action("Create", "Newsletter").Text("Create"))

)

And here is the controller action that gets called

[HttpGet]

public JsonResult Get([DataSourceRequest]DataSourceRequest request) {

uow.SetContextProxyCreation(false);

var newsletters = uow.NewslettersRepository.GetNewslettersByCompanyForGrid(SessionHandler.User.IDCompany);

var ds = newsletters.ToDataSourceResult(request);

return this.Json(ds, "text/x-json", JsonRequestBehavior.AllowGet);

}

Grid

answered on 08 Jan 2014

1 answer

118 views

ImageBrowser with flat kendoui by asp.net AJAX

sorry,
I have read all the getstart and api document abount the ImageBrowser, but still can't get it to work. Maybe I missed something.

I am use flat kendoui( only js, not for asp.net MVC)
this is my js:

jQuery("#Script1").kendoEditor({

imageBrowser: {

path: "/KPIupload/OADocument/PublicPhoto/",

transport: {

read: "/KPIGetData/FileData.aspx?SearchType=photodocument",

//destroy: "imagebrowser/destroy",

//create: "imagebrowser/createDirectory",

//uploadUrl: "imagebrowser/upload",

//thumbnailUrl: "imagebrowser/thumbnail",

imageUrl: "/KPIupload/OADocument/PublicPhoto/{0}"

}

},

tools: [

"bold",

"italic",

"underline",

"justifyLeft",

"justifyCenter",

"createLink",

"unlink",

"insertImage",

"createTable",

"addRowAbove",

"addRowBelow",

"addColumnLeft",

"addColumnRight",

"deleteRow",

"deleteColumn",

"viewHtml",

"fontSize",

"foreColor"

]

});

The editor works fine, but when I click the image browser, no image is showed.
There are 3 images on the /KPIupload/OADocument/PublicPhoto/, I am sure of that. In fact, if I don't use ImageBrowser, just use the simple image handle of the editor, I can show the images, that means the images are there.

I see the document, and it said the "read" expects a json, so I test my read url, and found it returns:
[{"name":"111.JPG","type":"f","size":"6832"},{"name":"book2.png","type":"f","size":"9692"},{"name":"BSCTool.png","type":"f","size":"5773"}]
I think it's right.

So, I don't know why it can't show any images. Maybe I missing something. Need your help!

yours,
Ivan

Editor

answered on 07 Jan 2014

2 answers

129 views

dees Kendo UI support 3d, gantt chart, copy and print of charts

Hi Team,

We are evaluating kendo UI for our project and will be buying it shortly. In our project, we are in need of 3d view of charts and also wanted to know whether
copy and printing of charts is possible using kendo UI.

Also in our project, gantt chart play a major role. So just wanted suggestions/recommendations from you guys whether gantt view or anythng equivalent would be possible using kendo UI.

Please provide us an update ASAP since we are waiting to buy this product.

Regards,
Ashwan Kumar

General Discussions

answered on 07 Jan 2014

1 answer

155 views

Responsive Grid without affecting page scrollbars

Hi, I'm working on trying to implement the responsive grid that was shown in the latest Keynote
http://youtu.be/JWEtMNstjyc?t=34m16s

Here's my try using jsBin
http://jsbin.com/OZuJUGA/2

The idea is to have the page be responsive (and the grid to be mobile friendly) and be used by all kinds of devices. When I setup the mobile app using "new kendo.mobile.Application", the scrollbars for the page go away and the only way to scroll down the page on the desktop browser is to click and drag the page as if you were using a finger on a mobile device.

I want the page scrollbars to remain but have the grid be responsive per the Keynote. How can I achieve that?

Also, I found it odd that the row containing the grid must have its height set otherwise the content below the grid will overlay the grid. This too does not happen until I setup the mobile app with "new kendo.mobile.Application".

Note, I did not put this in the Mobile forum section since it does not have a bin for "Grid"

Thanks,
--Ed

Grid

answered on 07 Jan 2014

3 answers

537 views

Editable Grid - cancel button destroying all changes

When using editable grids, while editing a row for the second time and clicking cancel, all changes are lost to the row. Expected behavior is for the current changes to be cancelled only.

To reproduce:

http://jsfiddle.net/getBalian/gHZMp/
1. Edit a row and click update
2. Edit the same row and click cancel

The row reverts back to its starting state.

If you uncomment the transport update options, the jsfiddle will work but it is not an option for us to use the ajax transport update option, as there are multiple grids on the same page which must be submitted at the same time. Is there a workaround for this, so the grid rows will not reset?

Any help would be greatly appreciated.

Grid

answered on 07 Jan 2014

1 answer

112 views

Formatting currency with big amounts from variable not working.

Hi,

I've created a template that displays a big amount of money (> 1.000.000.000). Unfortunately the formatter doesn't seem to handle big numbers from an input variable.

// transactionAmount = 1000000000 and is stored in the field of a model

// In the template definition I see this unexpected result:

#: kendo.toString(get("transactionAmount"), "c") # // result: 1000000000

// Smaller or hard-coded amounts work fine:

#: kendo.toString(get("transactionAmount")/1000, "c") # // result: € 1.000.000,00

#: kendo.toString(1000000000, "c") # // result: € 1.000.000.000,00

Am I doing something wrong, or is this a bug? Thanks for your help!

Best regards,

Harry van Mierloo

Globalization