Questions on Kendo UI for jQuery Forum

1 answer

94 views

Best place to override onDraw or Render for a column

Greetings,

In the grid, I need to override the columns' draw (or render) functionality, so that I may render a custom "kendo.dropdownlist" for the column, and fill it appropriately.

I see that there is an "editor" which can be used, but I need to create and fill the widget prior to this event firing.

Where is the best place to accomplish such? Sample snippet also much appreciated.

Many thanks...

Grid

answered on 01 Dec 2015

3 answers

138 views

useNativeScrolling on particular view

I need to set useNativeScrolling = true on a particular view (for Android only) and can't seem to figure it out. I assumed it would be as easy as:

if (device.platform === "iOS")

//        {

console.log("ios");

    app.view().useNativeScrolling = false;

}

But that doesn't seem to do anything. I'm sure it's simple.

View

answered on 01 Dec 2015

1 answer

644 views

Export multiple data sources into one excel file

I am trying to export multiple data sources into one excel file, each data source has their own sheet in the excel.
I notice that If I move the following code out from the datasource.fetch() cluster, no data from the data source will be inserted.

var workbook =new kendo.ooxml.Workbook( {
sheets: [
{
columns: [
// Column settings (width)
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true }
],
// Title of the sheet
title: "Orders",
// Rows of the sheet
rows: rows
},
{
columns: [
// Column settings (width)
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true }
],
// Title of the sheet
title: "Orders2",
// Rows of the sheet
rows: rows
}
]
});

//save the file as Excel file with extension xlsx
kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});

The problem is datasource.fetch() are skipped or temporary ignored, the above code will be executed before datasource.fetch() are execute.
To overcome that problem, I have to put a timeout function() at the setTimeout(function(){kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});},20000);. By doing this way, the exported excel file will contain data from the data source which I find it is not a very appropriate way of doing it.

Here is the snippets code of that I used from the sample provided by telerik with some code modification.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</script>
</head>
<body>

<script>
var ds = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
}
});

var rows = [{
cells: [
// First cell
{ value: "OrderID" },
// Second cell
{ value: "Freight" },
// Third cell
{ value: "ShipName" },
// Fourth cell
{ value: "OrderDate" },
// Fifth cell
{ value: "ShipCity" }
]
}];

//using fetch, so we can process the data when the request is successfully completed
ds.fetch(function(){
var data = this.data();
for (var i = 0; i < data.length; i++){
//push single row for every record
rows.push({
cells: [
{ value: data[i].OrderID },
{ value: data[i].Freight },
{ value: data[i].ShipName },
{ value: data[i].OrderDate },
{ value: data[i].ShipCity }
]
})
}
});

var workbook =new kendo.ooxml.Workbook( {
sheets: [
{
columns: [
// Column settings (width)
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true }
],
// Title of the sheet
title: "Orders",
// Rows of the sheet
rows: rows
},
{
columns: [
// Column settings (width)
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true }
],
// Title of the sheet
title: "Orders2",
// Rows of the sheet
rows: rows
}
]
});

//save the file as Excel file with extension xlsx
setTimeout(function(){kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});},20000);
</script>
</body>
</html>

Currently I am showing the code exporting the same data source into different sheet in the excel file, just to keep the code short. Or you can access it from here,http://dojo.telerik.com/Otahe/3
It will be much appreciated if there is a better solutions to do this.

Data Source

answered on 01 Dec 2015

4 answers

466 views

dataSource not reading remote data

I am trying to read json data from a remote service and its not working.

my code:

var schema = {

data: "data",

model: {}

};

var warmup = new kendo.data.DataSource({

schema: schema,

transport: {

read: function(options) {

$.ajax( {

url: kendo.toString(baseUrl + wkdayID),

success: function(result) {

console.log(kendo.toString(baseUrl + wkdayId));

options.success(result);

}

});

}

},

filter: { field: "IS_WARMUP", operator: "eq", value: "1" },

error: function() {

console.log(arguments); }

});

warmup.fetch();

however when I modify the url portion to a string and add it to the baseUrl like this:

url: kendo.toString(baseUrl + "21")

it works for some reason. does anyone know whats going on? I would like to be able to set that "21" dynamically.

Data Source

answered on 01 Dec 2015

2 answers

559 views

[Solved] Grid - FilterMenu prevent keydown close filter menu

Hello,

Im trying to create a way to filter the set of available checkboxes in my filter menu. I have created a dropdown list which specifies the operator and a input field which allows the user to enter a value. The filtering part works however I would like to provide a way to filter the checkboxes when the user presses enter in the input field.

The keyup event on the input field seems to close the filter menu automatically. I have tried to search in the kend.ui.filtermenu.fn._keydown events but no luck there.

You can see the behaviour in: http://dojo.telerik.com/IPAgo

Is there a way I could overwrite the keyup event and prevent the filter menu from closing?

It seems like its bind to the k-textbox class because if i remove the class from the textbox it's working as intended.

Thanks in advance!

Grid

answered on 01 Dec 2015

1 answer

143 views

TreeListColumn object TypeScript definition is missing 'editor' property

I am using TypeScript 1.6 and the compiler is complaining that TreeListOptions.columns.editor cannot be set because the TreeListOptions is not expecting the 'editor' property. When I check the kendo.all.d.ts file, this is what I see:

interface TreeListOptions {
name?: string;
autoBind?: boolean;
columns?: TreeListColumn[];
...
}

...

interface TreeListColumn {
attributes?: any;
command?: TreeListColumnCommandItem[];
encoded?: boolean;
expandable?: boolean;
field?: string;
filterable?: TreeListColumnFilterable;
footerTemplate?: any;
format?: string;
headerAttributes?: any;
headerTemplate?: any;
minScreenWidth?: number;
sortable?: TreeListColumnSortable;
template?: any;
title?: string;
width?: any;
hidden?: boolean;
menu?: boolean;
locked?: boolean;
lockable?: boolean;
}

I am using version 2015.2.805, but I verified that this problem exists in the latest version 2015.3.1111 as well.

Michelle

TreeList

answered on 01 Dec 2015

1 answer

144 views

Don't hide submit button when upload fail

I don't want to hide my submit button when my upload fails, im aware there is a retry button, but as my submit button has internacionalization text logic, it will much easy if the submit button just don't disapear.

I already know how to hide the retry button, i just need to keep the submit button there. In addition i will have to make the submit disapear on success.

Very tnks.

Alec Ventura.

Upload

answered on 01 Dec 2015

1 answer

94 views

[Solved] Stacked Chart Remote Data not displayed correctly

Hello,

I used the following snippet:

http://dojo.telerik.com/AnEqA/2

Jun 2015 and Okt 2015 are ok fine because they don't contain stacked values. But I would expect Aug 2015 to display 50 € für Sales and 50 € for Rent.

How can I archive this? I tried to group the datasource but that didn't work out.

Regards

Charts

answered on 01 Dec 2015

2 answers

1.2K+ views

Checkbox not work with validation

Hello ,

I`m trying to create a simple contact form with Kendo validation. Everything works fine ,but if i want to use Kendo default styles , controls have unexpected behavior. You can see demo here: http://dojo.telerik.com/OHiDo/2 , can`t click on chechbox when it has class : k-checkbox and label has class : k-checkbox-label

If remove these styles , everything works fine .. Can you help me with these issue ? I want to use Kendo styles with Kendo validation.

Thanks.

Regards,
Harry.

Validation