Questions on Kendo UI for jQuery Forum

0 answers

250 views

kendoWindow custom action button click triggers browser window popstate handler

Hello,

Can anyone confirm the kendoWindow custom action, as shown below, triggers the browser window's popstate event handler?

 $("#window").kendoWindow({
      actions: ["Custom", "Minimize", "Maximize", "Close"],
      title: "Window Title"
  }).data("kendoWindow").wrapper.find(".k-custom").click(function(e) {
      alert("Custom action button clicked");
      e.preventDefault();
  });

It does in my case. Here's the relevant popstate code:

function popStateHandler(e) {

var State = e.state;

if (State != null) {

console.log(State);

switch (State.stateTitle) {

case "Landing Page":

console.log('transitioning to landing page ...');

// show the content div and hide the hide the login panel

//

Transitions.PrimaryElementTransitions.HideLoginPanel();

break;

default:

break;

} // end switch ...

} else if (window.processingLogin == true) {

console.log('Processing login flag is true.');

window.ProcessingLogin = false;

} else {

console.log('transitioning to login state ...');

// show the login panel and hide the content div

//

Transitions.PrimaryElementTransitions.ShowLoginPanel();

}

// Attach the window.history popstate event handler defined above.

//

window.addEventListener("popstate", popStateHandler, false); // end function definition and addEventListener method invocation ...

Thanks,

Dan

Window

asked on 04 Sep 2012

2 answers

1.1K+ views

Kendo Kendo Grid with dropdownlist Model

Kendo Hello Friends Have a grid with inline editing and to 3 drop-down lists. The display and fill the drop-down lists ok. Works but if I want to save changes, so do not get the desired data to the controller? The list the values I need are the IDs of the selected items from the drop! But come on, only the new text of the drop-down lists for the controller.
Here is my code and annexed the image on the controller

function loadTable() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/Customer/LoadOperatingPictureTable",

dataType: "json",

type: "POST",

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

data: {}

},

update: {

url: "/Customer/UpdateAnimalValues",

dataType: "json",

type: "POST",

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

},

parameterMap: function (data, operation) {

if (operation !== "read") {

return JSON.stringify({ model: data });

}

},

autoSync: false,

schema: {

model: {

id: "Id",

fields: {

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

Name: { editable: false },

AnimalCount: {

type: "number",

validation: {

required: {

message: "Das Feld darf nicht leer sein!"

}

},

Distributor: { editable: true },

Label: { editable: true },

Marketer: { editable: true }

}

},

error: function (e) {

alert(e.status + ' ' + e.statusText);

}

});

$("div#operatingPictureTable").kendoGrid({

dataSource: dataSource,

scrollable: true,

sortable: true,

editable: "inline",

columns: [

{

field: "Name",

title: "Tierkategorie"

},

{

field: "AnimalCount",

title: "Anzahl Tiere",

template: '<div style="text-align: right">#= AnimalCount #</div>',

width: 80

},

{

field: "Distributor",

title: "Lieferant",

editor: onDrpDistributor

},

{

field: "Label",

title: "Label",

editor: onDrpLabel

},

{

field: "Marketer",

title: "Vermarkter",

editor: onDrpMarketer

},

{

command: "edit",

titel: " ",

width: 110

}

],

});

function onDrpDistributor(container, options) {

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

.appendTo(container)

.kendoDropDownList({

dataTextField: "Value",

dataValueField: "Id",

autoBind: false,

dataSource: new kendo.data.DataSource({

transport: {

read: {

url: "/Main/GetDistributors",

dataType: "json"

},

schema: {

model:{

id: "Id",

value: "Value"

}

})

});

}

function onDrpLabel(container, options) {

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

.appendTo(container)

.kendoDropDownList({

dataTextField: "Value",

dataValueField: "Id",

autoBind: false,

dataSource: {

type: "json",

transport: {

read: "/Main/GetLabels"

}

});

}

function onDrpMarketer(container, options) {

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

.appendTo(container)

.kendoDropDownList({

dataTextField: "Value",

dataValueField: "Id",

autoBind: false,

dataSource: {

type: "json",

transport: {

read: "/Main/GetMarketers"

}

});

}

Grid

answered on 04 Sep 2012

1 answer

177 views

MVVM in templates for ListView and Grid editing

Hello,

I use MVVM style databinding in my templates for the ListView and Grid widget (in case of the Grid I have a template per column).

That works fine, also when switching to edit mode.

The problem is that when I switch back from edit mode to readonly. I can see in the debugger that the template is applied again, but the MVVM binding is not done, so no data is displayed. Using a regular template (no MVVM) would work fine.

(Using Kendo version 2012.1.710)

Regards, Jaap

MVVM

answered on 04 Sep 2012

0 answers

64 views

Changing groupable property for existing grid

Hi,

I'm trying to change the "groupable" property of a grid on an existing grid.

I tried to do the following:

var grid = $("#usersGrid").data("kendoGrid");
grid.groupable = false;

Didn't work...

Anyone knows how can I do that?

Thanks,

Grid

asked on 04 Sep 2012

1 answer

174 views

Grid Refresh Button

Hi,

My grid has a refresh Icon at the bottom right. How can I receive the click event of this image. I have already searched the API and could not find any reference.

Can you help me ???
Thanks in advance

Grid

answered on 04 Sep 2012

0 answers

185 views

Kendo UI Date/time picker does not work in safari.

Hi,

I am using kendo grid in salesforce (apex). Which is similar to java and html.

Kendo grid is working fine for mozilla and chrome but not for safari.

In safari I am able to view kendo date picker on view mode but can't work on edit mode. And but when I change the value it displays null.

Regards,
Piyush Parmar

DatePicker

asked on 04 Sep 2012

4 answers

692 views

Custom Button to Embed YouTube Video

Greetings to everyone!

As title says I'm trying to create custom tool - button to embed YouTube video.
The way it supposed to work - you click button - dialog appears - you insert video URL and it then add youtube iframe embed code into editor. At this moment I expect to see iframe in editor and iframe should show video.

I have most of this done, but last step do not work properly. iframe is added correctly, but video wont load. I get JS error saying "ReferenceError: yt is not defined". It looks like that JS file with YouTube API wont load properly.

Any help will be greatly appreciated.

Here is HTML code (make sure to add Script and CSS references to Kendo and jQuery)

<body>

<h2>Kendo Editor Example</h2>

<textarea cols="20" id="Description" name="Description" rows="5" style="width:600px; height:400px"></textarea><script>

jQuery(function(){jQuery("#Description").kendoEditor({tools:[{name:"bold"},{name:"italic"},{name:"createLink"},{name:"unlink"},{name:"Insert Video",tooltip:"Insert Video",exec:insertVideo},{name:"insertImage"},{name:"insertUnorderedList"},{name:"formatBlock"}]});});

</script>

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

<div>

<label for="videoUrl">Enter a URL from YouTube or Vimeo:</label>

<input type="text" id="videoUrl" name="videoUrl"/>

<div class="insertVideo-actions">

<button class="k-button insertVideo-insert">Insert</button>

<button class="k-button insertVideo-cancel">Cancel</button>

</div>

</script>

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

<iframe class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/#= source #?fs=1&feature=oembed&wmode=transparent" frameborder="0" allowfullscreen></iframe>

</script>

<script>

function insertVideo(e)

{

var editor = $(this).data("kendoEditor");

var dialog = $($("#insertVideo-template").html())

.find(".insertVideo-insert")

.click(function ()

{

var media = testUrlForMedia(dialog.element.find("input").val());

if (media)

{

var template = kendo.template($("#youTube-template").html());

editor.exec("insertHTML", { value: template({ source: media.id }) });

}

dialog.close();

})

.end()

.find(".insertVideo-cancel")

.click(function() {

dialog.close();

})

.end()

.kendoWindow({

modal: true,

title: "Insert Video",

deactivate: function() {

dialog.destroy();

}

}).data("kendoWindow");

dialog.center().open();

}

function testUrlForMedia(pastedData) {

var success = false;

var media = {};

if (pastedData.match('http://(www.)?youtube|youtu\.be')) {

if (pastedData.match('embed')) { youtube_id = pastedData.split(/embed\//)[1].split('"')[0]; }

else { youtube_id = pastedData.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; }

media.type = "youtube";

media.id = youtube_id;

success = true;

}

else if (pastedData.match('http://(player.)?vimeo\.com')) {

vimeo_id = pastedData.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];

media.type = "vimeo";

media.id = vimeo_id;

success = true;

}

else if (pastedData.match('http://player\.soundcloud\.com')) {

soundcloud_url = unescape(pastedData.split(/value="/)[1].split(/["]/)[0]);

soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0];

media.type = "soundcloud";

media.id = soundcloud_id;

success = true;

}

if (success) { return media; }

else { alert("No valid media id detected"); }

return false;

}

</script>

Editor

answered on 04 Sep 2012

4 answers

186 views

Possible Bug: Bound checkbox with value attribute can't be checked in the browser

Seems like i have discovered a bug in Kendo UI MVVM. When binding a checkbox with a value attribute in a nested binding, the checkbox can't be checked anymore by the user, just programmatically.

This fiddle demonstrates the bug:

http://jsfiddle.net/fbuchinger/CagJG/

Any ideas for a workaround or is a hotfix on the way.

MVVM

answered on 04 Sep 2012

1 answer

117 views

accessing switch in another view

i have 2 views, the "main page" view and the "settings" view.

the "main page" view fires up as soon as the app starts and the "settings" view fires up when the user clicks on the settings icon.

i want to access a switch in the "settings view" from the "main view".

the problem is that right now unless the user clicks the "settings view" first, the switch is not initialised so it is inaccessible.

what options do i have to make the switch on the "settings view" initialised from the very start?

thanks

Switch (Mobile)

answered on 04 Sep 2012

1 answer

205 views

Customize the sections of the grid

hi everyone!

i want to know if is posible customize the sections of the grid for mvc.

i need to add a div between the div content and the div pager and show data that i obtain in the server side, this can be fill it in the same action that fills the grid,

the attached image shows the example that i want to do, the blue section is the div that i want to add in the grid

Grid

answered on 04 Sep 2012