Questions on Kendo UI for jQuery Forum

2 answers

572 views

What is the best way to call my short_text() function so that I have a new shortMessage field in my datasource schema? I want to pass the Message field to the function and create a new field called shortMessage and have this used in the template. Is this even possible at all?

<div data-role="view" data-title="Control Panel - Mobile" id="listmessages" data-init="listMessagesInit">

<h2>Customer Messages</h2>

<p><?php echo $unread_messages . ' - unread messages'; ?></p>

<ul id="message_list"></ul>

</div>

<script id="message_list_template" type="text/x-kendo-template"><a href=""><div style="float:left; width:150px; height: 50px" class="isnew_#= isnew #">#= customer_name #<br />#= created #</div><div style="height: 50px"id="message_#= id #" class="isnew_#= isnew #">#= message #</div></a></script>

<script>

function listMessagesInit(){

function short_text(id, message){

if (message.length > 100){

var shortText = jQuery.trim(message).substring(0, 100).split(" ").slice(0, -1).join(" ") + "...";

} else {

var shortText = message;

}

$(id).text(shortText);

}

var dataSource = new kendo.data.DataSource({

transport: {

read: "/messages/data",

dataType: "json",

update: {

url: function() {

var url = "/messages/markasread/" + id + "/" + read;

return url;

},

type: "POST",

dataType: "json"

},

destroy: {

url: function() {

//where id is a global variable

var delurl = "/messages/delete/" + id;

return delurl;

},

type: "DELETE",

dataType: "json"

}

},

schema: {

model: {

id: "id",

fields: {

created: { type: "string" },

message: { type: "string" },

//shortMessage: - how to call the short_text() function here? Is it possible??

customer_name: { type: "string" },

customer_telephone: { type: "string" },

ip: { type: "string" },

created: { type: "string" },

email: { type: "string" },

isnew: { type: "string" }

}

});

$("#message_list").kendoMobileListView({

dataSource: dataSource,

//pullToRefresh: true,

//appendOnRefresh: true,

style: "inset",

click: function(e) {

var id = e.dataItem.id;

var selected = dataSource.get(id);

window.kendoMobileApplication.navigate("/messages/view/" + id);

},

template: $("#message_list_template").text()

});

}

</script>

<style>

#listmessages div.isnew_1 {font-weight:bold}

#listmessages div.isnew_0 {font-weight:normal}

</style>

Data Source

answered on 10 Aug 2016

2 answers

588 views

[Solved] ViewModel, Button and the enabled binding

I'm having an issue with the enabled binding of a button. It's bound to function on a view model (kendo.observable) that returns a Boolean value based on the values of properties on the same view model. The binding runs once, when bound, but never again after the properties of the view model have changed. Is there any way that I can get this binding to 'refresh' on property change? Code below:

var viewModel = kendo.observable({

userName: null,

password: null,

isEnabled: function () {

var self = this;

return self.userName != undefined && self.password != undefined;

}

});

And the HTML:

<button class="k-button k-primary" data-bind="click: onClicked, enabled: isEnabled">Click</button>

Button

answered on 10 Aug 2016

1 answer

180 views

parsing JSON from DataDirect OData

I'm attempting to connect an OData datasource from Datadirect's on-premise MS SQL connector to KendoUI instances. I can successfully get a response, but the format of the response seems to be throwing errors for Javascript/Kendo UI. "Uncaught SyntaxError: Unexpected token : " with reference to the URL for the JSON response from Datadirect's connector.

I suspect I need to configure the schema for the datasource to parse beyond the "d" : , but have been unsuccessful so far. There are 2 records in the JSON response below that I am trying to populate to a Kendo UI grid.

{

"d" : {

"results" : [

{

"__metadata" : {

"uri" : "https://place.ontheinternet.com/api/odata/data/table", "type" : "mspsql3.Users"

}, "UserID" : 1, "Username" : "host", "FirstName" : "SuperUser", "LastName" : "Account", "IsSuperUser" : true, "AffiliateId" : null, "Email" : "hjghjg@gvghtrdt.com", "DisplayName" : "SuperUser Account", "UpdatePassword" : false, "LastIPAddress" : null, "IsDeleted" : false, "CreatedByUserID" : -1, "CreatedOnDate" : "\/Date(1365162224930)\/", "LastModifiedByUserID" : 245, "LastModifiedOnDate" : "\/Date(1440941627913)\/", "PasswordResetToken" : "00000000-0000-0000-0000-000000000000", "PasswordResetExpiration" : null

}, {

"__metadata" : {

"uri" : "https://place.ontheinternet.com/api/odata/data/table", "type" : "mspsql3.Users"

}, "UserID" : 2, "Username" : "drew", "FirstName" : "Drew", "LastName" : "SK", "IsSuperUser" : true, "AffiliateId" : null, "Email" : "fdjk@fjkndnj.com", "DisplayName" : "DrewSK", "UpdatePassword" : false, "LastIPAddress" : "127.0.0.1", "IsDeleted" : false, "CreatedByUserID" : 1, "CreatedOnDate" : "\/Date(1365176462207)\/", "LastModifiedByUserID" : -1, "LastModifiedOnDate" : "\/Date(1366149209000)\/", "PasswordResetToken" : null, "PasswordResetExpiration" : null

}

], "__count" : "495"

}

Data Source

answered on 10 Aug 2016

1 answer

195 views

Item grouping

I have implemented the autocomplete item grouping functionality, but need a slightly different implementation.

The first group header item is injected as a disabled item, but the following items are injected as right aligned divs within the list. This is causing issues because I do not have a lot of width to play with and the items are being overlapped by the injected div's

Is there any way that I can get the control to always inject group headers as disabled items? I can add a "IsHeader" attribute and doctor the items inline if needed.

I have attached a screenshot displaying the current render

Is this achievable? Please say it is because I just want one control suite on the site.

AutoComplete

answered on 10 Aug 2016

18 answers

2.4K+ views

Image previews

I would like to see image previews for files being uploaded similar to what you see here: http://blueimp.github.com/jQuery-File-Upload/

How can I do that? Does this require HTML 5 File API support? Is this something on KendoUI roadmap?

Thanks!

Upload

answered on 10 Aug 2016

2 answers

1.0K+ views

[Solved] TabStrip not working properly...

The TabStrip is not working properly when:

- you hide one or multiple tabs

- then navigate with the keyboard(left/right or up/down arrows)

The content of the hidden tag is then showing during navigation while the tab stays hidden. On Chrome the hidden tab even reappeared!

To reproduce the error I've use the navigation demo of the TabStrip (http://demos.telerik.com/kendo-ui/tabstrip/keyboard-navigation) and added the following line

$($("#tabstrip").data("kendoTabStrip").items()[1]).attr("style", "display:none");

as advised in the forum to be able to hide tabs.

TabStrip

answered on 10 Aug 2016

1 answer

185 views

Definition files correction for TypeScript

I propose a fix in TypeScript definition files from:

class DropDownList extends kendo.ui.Widget {

static fn: DropDownList;

options: DropDownListOptions;

dataSource: kendo.data.DataSource;

span: JQuery;

filterInput: JQuery;

list: JQuery;

ul: JQuery;

element: JQuery;

wrapper: JQuery;

static extend(proto: Object): DropDownList;

constructor(element: Element, options?: DropDownListOptions);

close(): void;

dataItem(index?: JQuery): any;

dataItem(index?: number): any;

destroy(): void;

focus(): void;

items(): any;

enable(enable: boolean): void;

open(): void;

readonly(readonly: boolean): void;

refresh(): void;

search(word: string): void;

select(): number;

select(li: JQuery): void;

select(li: number): void;

select(li: Function): void;

setDataSource(dataSource: kendo.data.DataSource): void;

text(): string;

text(text: string): void;

toggle(toggle: boolean): void;

value(): string;

value(value: string): void;

}

to:

class DataBoundWidget extends Widget

{

dataSource: kendo.data.DataSource; //or where it should be

}

class List extends DataBoundWidget

{

dataItem(index?: JQuery): any; //or where it should be

dataItem(index?: number): any; //or where it should be

}

class Select extends List

{

setDataSource(dataSource: kendo.data.DataSource): void; //or where it should be

}

class DropDownList extends Select

{

static fn: DropDownList;

options: DropDownListOptions;

span: JQuery;

filterInput: JQuery;

list: JQuery;

ul: JQuery;

element: JQuery;

wrapper: JQuery;

static extend(proto: Object): DropDownList;

constructor(element: Element, options?: DropDownListOptions);

close(): void;

destroy(): void;

focus(): void;

items(): any;

enable(enable: boolean): void;

open(): void;

readonly(readonly: boolean): void;

refresh(): void;

search(word: string): void;

select(): number;

select(li: JQuery): void;

select(li: number): void;

select(li: Function): void;

text(): string;

text(text: string): void;

toggle(toggle: boolean): void;

value(): string;

value(value: string): void;

}

This should make sense, since all widgets does not inherits from kendo.ui.widget as your kendo.all.d.ts file defines.

I need a type for variable that lists all widgets that implements dataSource property. I don't want to write:

function

myFunction(implementDataSource: kendo.ui.ListView | kendo.ui.DropDownList | kendo.ui.ComboBox | kendo.ui.Grid | kendo.ui...)

{

implementsDataSource.dataSource.data(something);

}

General Discussions

answered on 10 Aug 2016

1 answer

130 views

What type of control is this?

So I really love how Telerik does navigation for different examples. I'm trying to figure out if this is a panelbar or a drawer, so I can replicate similar functionality. Is there a control that encompasses this type of back and forth/list functionality or is it a matter of cobbling together several controls?

General Discussions

answered on 10 Aug 2016

1 answer

165 views

Grid Pager Crashes When DataSource.data = []

We are manually configuring the datasource for our Grid Pager. I realize Kendo UI has provisions for this already, but for reasons I'm currently unsure of, we have found we need to manually manage our grid pager and keep it in sync with our grid, which works quite well.

The issue is that when the server returns no data (zero records), I'd like to set the Pager to zero records, but when I do it this way as shown below, I get a Maximum Call Stack Exceeded in the init._valueExpr function on the line that says comparer = new Function('current', 'values', body); Note that line of code is inside a loop and I'm assuming the loop simply runs until the call stack is exceeded, but I'm not sure.

Is there a better way to handle this?

var data = getPagerData(total);

if (total > 0) {

my.gridPager.dataSource.data(data);

} else {

var empty = [];

my.gridPager.dataSource.data(empty);

}

function getPagerData(length) {

var pagerData = [];

for (var i = 0; i < length; i++) {

pagerData.push({});

}

return pagerData;

}

Grid

answered on 09 Aug 2016

1 answer

211 views

Kendo UI controls not working on server but work fine on dev machine

I'm developing an ASP.NET 4.5 Web Forms app using the Kendo UI controls in Visual Studio. The controls run fine on my development machine, however when the code is uploaded to the server, the Kendo UI controls do not function as they're supposed to. The attached images show the differences between how the software looks on my development machine versus on the server.

I publish the application from my development machine to the test server using Visual Studio's publish function. Please note that pages that don't use the Kendo UI controls look fine, however pages with Kendo UI components are distorted. My API also works fine. Any ideas as to what's going on? Has anyone seen anything like this before?

Grid

answered on 09 Aug 2016