Questions on Kendo UI for jQuery Forum

1 answer

93 views

Setting focus in datasource change event

Below is the definition for my datasource object. In the change event, I am setting focus based on whether or not the datasource contains any items. Focusing on the dropdownlist ("custom1combo") is working, however the part where focus is set on "portraitNotes", which is a text area, is not working.

This is the line in question:
$("#portraitNotes").focus();

The weird thing is it works fine in other areas of my site, just not here.

custom1DataSource = new kendo.data.DataSource({

serverFiltering: true,

transport: {

read: {

url: "wsRest.svc/custom1/",

data: {

user: function () {

return userField.value;

},

client: function () {

return $("#clientCombo").val();

},

matter: function () {

return $("#matterCombo").val();

}

},

change: function () {

//when data is updated, if there is more than 1 item we need to enable the menu

var custom1 = $("#custom1Combo").data("kendoDropDownList");

custom1.enable(false);

if (custom1DataSource.data().length > 1) {

custom1.enable(true);

$("#custom1Combo").focus();

}

else {

$("#portraitNotes").focus();

}

});

General Discussions

answered on 19 Mar 2013

1 answer

64 views

Scroll a pane in a split view to top

How do I scroll to top, in a pane in a split view, from javascript?

I have tried several hours with different things but cant get it to work.

Thanks

General Discussions

answered on 19 Mar 2013

2 answers

289 views

Read single row datasource into DIV

Hi

I've got the URL below which always returns a single record. How do I return the Content field and update the html of a div on the page?

http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent?BookMenuID=4

Returns:
{"BookMenuID":4,"Content":"<span>DSDM advocates........"}

I've tried the code below so far (amongst many others) but the alert shows "undefined" as the result...

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent?BookMenuID=4", // the remove service url

dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX

}

});

dataSource.read();

alert(dataSource.length);

var dataItem = dataSource[0];

$('#divContent').html(dataItem.Content);

Cheers
Cliff

Data Source

answered on 19 Mar 2013

1 answer

169 views

Kendo.ns is improperly documented / not working.

Just a note for your documentation team, and a bug report.

kendo.ns

Is documented extremely briefly in the declarative syntax section of your online docs, the gist of the docs go like this:

set kendo.ns e.g.

kendo.ns = "kendo"

This would change your data declarations to : data-kendo-role= (etc.)

This is not correct (as per the latest code drop) setting...

kendo.ns = "kendo"

Recognizes data attributes in the following form...

data-kendorole=

You can set kendo.ns="kendo-" and then be able to use data attributes in the form

data-kendo-role

However, even with enough data attributes recognised to get the app to start, large chunks of declarative markup simply don't work anymore. (As a very basic example, layouts don't recognise data-kendo-header / data-kendo-footer ... there's many more problems with it.)

Switching off kendo.ns and renaming data- attributes back to their non ns'ed form fixes everything.

Where is your issue tracking system, or do you guys pull bug reports in from here?

Jason.
Fishvision.

MVVM

answered on 19 Mar 2013

3 answers

215 views

How to open actionsheet on the click of button

Hi,

<a data-role="button" data-click="onClick" >Open</a>

<ul data-role="actionsheet" id="actionsheet">
<li><a data-action="foo">Foo</a></li>
<li><a data-action="bar">Bar</a></li>
</ul>

function onClick(){

if(i>5)
{
// I want to open above action sheet here if condition satisfy,
}
else
{
alert("Cannot open action sheet");
}
}

I want to open the actionsheet on the click of button.
After clicking button, onclick function is invoking where i am doing some condition checking.If condition satisfy i want to open action sheet.

Please do the needful.If possible please provide demo in JS Bin

ActionSheet

answered on 19 Mar 2013

3 answers

126 views

Embarrassed by default date/month picker animations used inside grid

The date/month picker animation is just horrible in some browser/video card setups. What's worse is I'm so embarrassed when my customers see demos of our large enterprise-level apps. I don't have anything to tell them other than Telerik won't let us turn them off. Yes, we could use custom cell editors everywhere, but what a productivity killer...we have tons of grids and tons of dates in our apps...there's no way we could do that.

The picker widgets have the setting. Please.......provide us with a simple setting in the grid to turn them off.

This is so embarrassing.

Thanks.

Grid

answered on 19 Mar 2013

1 answer

89 views

kendo.data.DataSource no longer working?

Hello,
I am attempting to upgrade from Kendo v2012.2.71 to the latest internal build: v2012.3.1512 (I also tried the latest official release build).

In my existing code, I was previously defining a datasource and grid like the following:

var testDataSource = new kendo.data.DataSource(

{

transport: {

read: {

url: "/api/Grids/Events",

dataType: "json",

contentType: "application/json; charset=utf-8",

type: "POST",

data: function () {

return {

filterId: filterId

};

}

},

parameterMap: function (options) {

return JSON.stringify(options);

}

},

schema: {

model: {

id: "organizationDeviceId",

fields: {

organizationDeviceName: { type: "string" },

EventName: { type: "string" },

EventDetails: { type: "string" },

EventSeverity: { type: "string" },

EventDate: { type: "date" }

} // End of fields

}, // End of model

data: "Entries",

total: "TotalCount"

},

sort: {

field: "EventDate",

dir: "desc"

},

pageSize: 14,

serverPaging: true,

serverSorting: true,

serverFiltering: true

}

);

var EventsDataGrid = $("#eventsGrid").kendoGridWithTitles({

selectable: "row",

dataSource: testDataSource,

columnMenu: true,

filterable: true,

scrollable: true,

sortable: true,

resizable: true,

height: 500,

toolbar: kendo.template($("#filterToolbarTemplate").html()),

columns: [ { title: Globalize.localize("Dashboards_Events_DeviceName"), field: "organizationDeviceName", template: "<a href='//OrganizationDevice?organizationDeviceId=#= organizationDeviceId #'>#= organizationDeviceName #</a>" },

{ title: Globalize.localize("Dashboards_Events_EventName"), field: "EventName" },

{ title: Globalize.localize("Dashboards_Events_EventDetails"), field: "EventDetails" },

{ title: Globalize.localize("Dashboards_Events_EventSeverity"), field: "EventSeverity" },

{ title: Globalize.localize("Dashboards_Events_Date"), field: 'EventDate', template: "<div>#= kendo.toString(EventDate, CloudSAAS.GeneralDateTimeFormat) #</div>" }

],

pageable: { input: true, numeric: false },

}).data("kendoGrid");

Notice that a define testDataSource then use it as the value of the grids datasource. This however seems to lo longer work. Instead I get a blank grid.

If I instead change the code to the following it does work:

var EventsDataGrid = $("#eventsGrid").kendoGridWithTitles({

selectable: "row",

dataSource: {

transport: {

read: {

url: "/api/Grids/Events",

dataType: "json",

contentType: "application/json; charset=utf-8",

type: "POST",

data: function () {

return {

filterId: filterId

};

}

},

parameterMap: function (options) {

return JSON.stringify(options);

}

},

schema: {

model: {

id: "organizationDeviceId",

fields: {

organizationDeviceName: { type: "string" },

EventName: { type: "string" },

EventDetails: { type: "string" },

EventSeverity: { type: "string" },

EventDate: { type: "date" }

} // End of fields

}, // End of model

data: "Entries",

total: "TotalCount"

},

sort: {

field: "EventDate",

dir: "desc"

},

pageSize: 14,

serverPaging: true,

serverSorting: true,

serverFiltering: true

},

columnMenu: true,

filterable: true,

scrollable: true,

sortable: true,

resizable: true,

height: 500,

toolbar: kendo.template($("#filterToolbarTemplate").html()),

columns: [ { title: Globalize.localize("Dashboards_Events_DeviceName"), field: "organizationDeviceName", template: "<a href='//OrganizationDevice?organizationDeviceId=#= organizationDeviceId #'>#= organizationDeviceName #</a>" },

{ title: Globalize.localize("Dashboards_Events_EventName"), field: "EventName" },

{ title: Globalize.localize("Dashboards_Events_EventDetails"), field: "EventDetails" },

{ title: Globalize.localize("Dashboards_Events_EventSeverity"), field: "EventSeverity" },

{ title: Globalize.localize("Dashboards_Events_Date"), field: 'EventDate', template: "<div>#= kendo.toString(EventDate, CloudSAAS.GeneralDateTimeFormat) #</div>" }

],

pageable: { input: true, numeric: false },

}).data("kendoGrid");

The only difference being that the datasource is now created directly inline with the grid.

Why has this behavior changed? Can I no longer define a remote datasource separate from my grid? Note that if the datasource is not remote (locally defined array) then it does seem to work properly.

Grid

answered on 19 Mar 2013

1 answer

41 views

Scroll view orientation Problem in iPod.

Scroll view is working fine in landscape when we change the orientation to portrait design scroll page is not align properly. Please find the attachment for reference.

ScrollView (Mobile)

answered on 19 Mar 2013

5 answers

560 views

Update Editor content on paste

Hello,

I have an Editor where I have setup with the "paste" event. I am having no problem with the event firing it is that I can't get it to replace the content correctly. Here is a working example of the problem http://jsfiddle.net/WgvNr/3/. To test paste in some Microsoft Word content with some formatting. The paste event will strip the Word formatting. This works also, but it leaves the original content and the edited content. How can I just have the edited content show in the editor?

$("#txtActions").kendoEditor({

tools: [

"bold",

"italic",

"underline",

"insertUnorderedList",

"insertOrderedList",

],

paste: function (e) {

var editor = $("#txtActions").data("kendoEditor");

editor.value(CleanWordHTML(e.html));

//console.log(editor);

}

});

Editor

answered on 19 Mar 2013

6 answers

241 views

Is there a way to only show the last uploaded files in k-upload-files sections

My control only allows one file to be uploaded, and I want the k-upload-files section only show the latest file , not the list of files. Is there a configuration that I can change to achieve this?

In my attached image, I only want the second file displayed when the user choose to upload a different image.

Upload

answered on 19 Mar 2013