Questions on Kendo UI for jQuery Forum

4 answers

285 views

Syntax for string[] template attr binding?

If I just have a simple array of strings in a property, how do you access that in the bound template seeing as there's no object to bind properties to?

Example:

<ul id="results" data-template="item-template" data-bind="images">

</ul>

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

<li><img data-bind="attr: {src: ??? }" /></li>

</script>

MVVM

answered on 03 Apr 2018

3 answers

1.3K+ views

Unwanted border

Hello

I recently updated to KendoUI 2018.1.221 and have to do some adjustments now. It looks like that the kendoMaskedTextBox is acting different now and I can't find a (proper) solution for this problem to fix it: There is always a rounded border as soon as I put a kendoMaskedTextBox on a input. I have prepared a simple example or you can use this code to show you the effect:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<link href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css" rel="stylesheet" />

<script src="http://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>

<script>

$(document).ready(function() {

$("#starttime").kendoMaskedTextBox({

mask: 'h0:t0:t0',

rules: { 'h': /[0-2]/, 't': /[0-5]/ }

});

</script>

</head>

<body style="background-color: #f1f1f1">

<div>

<input id="starttime" style="border:1px solid blue;">

</div>

</body>

</html>

As you can see there are two borders:
The inner one seems to be set by the widget.
The outer one is set by me (style). I don't know why that widget puts a border by default (that I don't want). The widget should only mask the input and not style it, imho.

I've checked all your samples on the API page of MaskedTextBox and they all have rounded corners.

How do I get rid of that rounded border inside the input?

Regards

MaskedTextBox

answered on 03 Apr 2018

2 answers

153 views

Splitter in Partialview with Grid do not display horizontal splitting

Hello,

i am displaying splitter in a Pop up window and have 2 vertical panes. Top one with search text box and bottom one has 2 horizontal panes. Left side has a treeview and right side has a grid. When i view this page as normal view everything Displays fine. But when i Display this page as partialview inside an window i see 3 horizontal panes rather than treeview and grid lying side by side. Somehow the grid is wrapping to next line and i do not see splitter resize Options as well.

Attached my view file. the Moment i replace right pane Content from grid to some text it will start showing splitter.

Anamika

Splitter

answered on 02 Apr 2018

6 answers

158 views

Kendo SaveAs removes whitespaces

Hi,

On the click of a button, I am saving the content (json) to a file. The problem I am facing is that the file has whitespaces stripped out.

saveContent : function () {

var format = "data:application/json";

var fileName = "content.json";

var dataURI = format + "," + this.content;

kendo.saveAs(

{

dataURI: dataURI,

fileName: fileName

}

);

}

For e.g. if the json is something like this

{"productDescription" : "Bag of wheat 15 kilogram"}

the content of file is the following. How can I make sure that saved file has whitespaces preserved?

{"productDescription" : "Bagofwheat15kilogram"}

General Discussions

answered on 02 Apr 2018

1 answer

584 views

##Kendo grid multiple group in same tab.

Hi,

I have a problem with Kendo grid multiple grouping.

I want to display multi column grouping with a single header. Currently it is showing as tree hierarchy for multi column grouping.

I have attached a file which shows Radgrid grouping demo and I want to show this by using Kendo grid grouping.

Could you pls suggest any overcome for this?

Grid

answered on 02 Apr 2018

4 answers

1.0K+ views

Kendo Checkbox / Radiobutton styling without ID

Hello,

is it possible to use the Kendo styling of Checkboxes and Radiobuttons without specifying an id-field on the input-element? If I remove the ID and the "for"-attribute the checkbox is not working anymore.

The elements are generated dynamically and I don't want to specify an ID just for the styling.

Best regards

General Discussions

answered on 30 Mar 2018

1 answer

7.5K+ views

Cannot read property 'data' of undefined when calling Create operation on Grid

Hello, I am trying to get the create operation to work on this grid, but it is showing a "cannot read property 'data' of undefined" when I click "Update" in the popup editor.

// DATA SOURCE

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "GetSiteRoleCategoryInstances_Result_Read",

data: {

userID: "24",

isCompletedFilter: false

},

create: {

url: "QT_CreateSRCI",

dataType: "json"

},

parameterMap: function (options, operation) {

if (operation !== "read" && options.models) {

console.log(operation)

console.log(options.models)

return { models: kendo.stringify(options.models) };

}

},

batch: true,

schema: {

model: {

id: "SrciID",

fields: {

SrciID: { editable: false, nullable: true },

FK_SiteRoleCategory_ReqID: { type: "number" },

ReviewName: { type: "string"},

InstanceName: { type: "string" },

StartDate: { type: "date" },

DueDate: { type: "date" },

InspectionReport: { type: "string" },

InspectionReportDate: { type: "date" },

Note: { type: "string" },

CreatedDate: { type: "date" },

CreatedBy: { type: "string" },

RequiredNumber: { type: "number" },

IsCompleted: { type: "bool" }

}

},

})

// Grid

$("#reviewGrid").kendoGrid({

dataSource: dataSource,

columns: [

{ field: "FK_SiteRoleCategory_ReqID"},

{

field: "ReviewName",

title: "Review Name",

editor: src_rDropDownEditor,

width: 400

},

{ field: "InstanceName" },

{ field: "StartDate", title: "Start Date", type: "datetime", format: "{0:MM/dd/yyyy}" },

{ field: "DueDate", title: "Due Date", type: "date", format: "{0:MM/dd/yyyy}" },

{ field: "InspectionReport" },

{ field: "InspectionReportDate", title: "Last Inspection Date", type: "date", format: "{0:MM/dd/yyyy}" },

{ field: "Note" },

{ field: "CreatedDate", title: "Created Date", type: "date", format: "{0:MM/dd/yyyy}" },

{ field: "CreatedBy" },

{ field: "RequiredNumber" },

{ field: "IsCompleted"}

//{command: [ "edit" , "destroy"], width: 180 }

],

//toolbar: ["create", "pdf"],

//serverPaging: true,

//serverSorting: true,

editable: "popup",

sortable: {

mode: "single"

},

toolbar: ["create"],

detailExpand: function onDetailExpand(e) {

//Implement the event handler for detailExpand

DetailExpandEvent(e);

},

// detailCollapse: function onDetailCollapse(e) {

//Implement the event handler for detailCollapse

// },

//change: onChange,

scrollable: false,

resizable: true,

selectable: true,

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

detailInit: DetailInit,

dataBound: GridDataBind,

autoBind: true,

autoSync: true,

serverOperation: false

});

// CUSTOM EDITOR FOR ReviewName

function src_rDropDownEditor(container, options) {

console.log(container)

console.log(options)

$('<input data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

dataTextField: "ReviewName",

dataValueField: "ID",

dataSource: src_rDs

});

}

Any idea as to why am I getting this error?

Data Source

answered on 30 Mar 2018

26 answers

1.3K+ views

Issues loading latest Kendo version using requireJS

I'm loading the Kendo framework using requireJS, it is being loaded but the global variable isn't being set (window.kendo) and it is not being injected into my modules, sample:

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

General Discussions

answered on 30 Mar 2018

3 answers

612 views

kendo.saveAs pdf on Chrome mobile and iOS "open in" sharing

On Chrome for Ipad (latest versions), rendering the page using kendo.drawing & kendo.saveAs pdf the page will be converted to pdf as expected. However, tapping the page and clicking iOS's "open in" sharing menu in the bottom right corner of the document displays an error "the file could not be downloaded at this time". The "open in" functionality is needed so users can attach the generated pdf to email/upload to another service.

To replicate visit the Kendo-UI pdf export demo page using and iPad + Google chrome. You need to be in portrait view for responsive export to pdf menu to display.

I'm aware that kendo-ui's pdf export feature technically does not support mobile browsers. However, unofficially it is mostly working for me with one exception. Adding to my frustration and confusion, iOS + safari exports the pdf correctly and maintains the "open in" functionality. It is just chrome mobile that I am encountering the bug.

I tried saving the generated pdf on the server and requesting directly and the "open in" functionality works... so it is not a problem with the pdf itself. The only difference I can think of is the local generated one also contains POST header data? I thought a possible work around would be saving the generated file using the force-proxy option on the server and returning a response of the resource url. However, I would like to keep offline client side only functionality.

Does anyone have suggestions for a possible work around? Recommendations for a different pdf generation JS library? It feels like I am 99% there using Kendo and would be thrilled if anyone could help.

General Discussions

answered on 30 Mar 2018

1 answer

1.3K+ views

Print kendoGrid

I have a grid that contains footers with totals, sums, etc. I've implemented the printing feature as shown in this example here: https://docs.telerik.com/kendo-ui/controls/data-management/grid/print-export

However, there isn't listed a way to include the print-friendly footers of the grid in the example shown in the link above. I've attached two images of what my grid looks like with footers and how the javascript shows the footers from the print example.

Is there a way to format the k-grid-footer so that it shows only 3 columns like in the grid and spaced correctly?

Grid

answered on 30 Mar 2018