Questions on Kendo UI for jQuery Forum

6 answers

325 views

Hello!

I have a problem while creating more than one object in a grid. Creating the first object is okay. But when I save the second object it send the request to the server and saves it (it returns a json object with the required ID) but a second request with previous data is fired too. How can i avoid that?

The "batch" flag in DataSource is set to false.
(Version: Kendo UI Complete v2013.1.614)

Thank you in advance.

Jörg Bergner

Grid

answered on 12 Dec 2013

2 answers

185 views

app.navigate in MVC

I have been searching for how to do this, but am unable to find the right answer.

In JavaScript I can do this:

var app = new kendo.mobile.Application();

Then use the app variable to navigate between pages.

But how do I do this in MVC? I can't set the MVC razor tag to a JavaScript variable, so how do I call .navigate after doing:

@(Html.Kendo().MobileApplication()
.Name("KendoMobileApplication")
.PushState(true)
.Transition("slide")
.ServerNavigation(false)
.Layout("databinding")
)

I have tried this, but it seems less than ideal that I create a new application every time I navigate:

var app = new kendo.mobile.Application();
app.navigate("/Home/AccountType");

I've also tried

$("#KendoMobileApplication").context.navigate("/Home/AccountType");

But that doesn't work. It has no navigate method.

So what is the correct way of doing this?

Application

answered on 11 Dec 2013

1 answer

46 views

Kendo Scrollview - Quoted text issue

Hello!

We have a label, which renders inside ScrollVew. If we assign quoted text like "General Ref ID" to the label. It does not render it. Normal text without quotes works fine.
Any suggestion would be appreciated.

ScrollView (Mobile)

answered on 11 Dec 2013

3 answers

1.1K+ views

custom validation for a custom editor (kendoDropDown) in a kendoGrid

Hey,

In one of those columns I have a custom editor in the form of a dropdown list. The first value of the list is "Please select a function" with value 0.
When the user creates a row and does not select a function it should give an error. The function field is required and I want validation on it.

I have it "working" but I think that this is not the way it should be. And however it works I still can't add z-index or any style to my tooltip because the syle get overriden when the message is shown in the grid.

The code is:

001.<script id="tooltip" type="text/x-kendo-template"> //Custom Tooltip created by me

002. <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="#= Key #" role="alert">

003. <span class="k-icon k-warning"> </span>

004. #= Message #

005. <div class="k-callout k-callout-n"></div>

006. </div>

007. </script>

008. <script>

009. var tooltip = new kendo.template($("#tooltip").html());

010.

011. $(document).ready(function () {

012. $("#grid").kendoGrid({

013. dataSource: new kendo.data.DataSource({

014. transport: {

015. create: {

016. url: "/Beheer/Medewerker/CreateJson",

017. type: "POST",

018. dataType: "json"

019. },

020. read: {

021. url: "/Beheer/Medewerker/ListJson",

022. dataType: "json"

023. },

024. update: {

025. url: "/Beheer/Medewerker/UpdateJson",

026. type: "PUT",

027. dataType: "json"

028. },

029. destroy: {

030. url: "/Beheer/Medewerker/DestroyJson",

031. type: "DELETE",

032. dataType: "json"

033. }

034. },

035. schema: {

036. model: {

037. id: "Id",

038. fields: {

039. Id: {

040. editable: false

041. },

042. Naam: {

043. validation: {

044. required: {message: "De naam is verplicht."}

045. }

046. },

047. Actief: {

048. defaultValue: true,

049. validation: {

050. required: false

051. }

052. },

053. FunctieId: {

054. defaultValue: 0,

055. validation: {

056. required: true,

057. //Custom validation rule

058. customFunctieId: function (input) {

059. if (input.attr("data-bind") == "value:FunctieId" && input.val() == 0) {

060. input.attr("data-customFunctieId-msg", "Geen functie geselecteerd.");

061. input.parents("td").append(tooltip(Message = "", Key = "sl" + input.attr("data-bind").split(":")[1]));

062. return false;

063. }

064. return true;

065. }

066. }

067. },

068. Functie: {

069. validation: {

070. required: false

071. }

072. },

073. AfdelingId: {

074. defaultValue: 0,

075. validation: {

076. required: true,

077. //Custom validation rule

078. customAfdelingId: function (input) {

079. if (input.attr("data-bind") == "value:AfdelingId" && input.val() == 0) {

080. input.attr("data-customAfdelingId-msg", "Geen afdeling geselecteerd.");

081. input.parents("td").append(tooltip(Message = "", Key = "sl" + input.attr("data-bind").split(":")[1]));

082. return false;

083. }

084. return true;

085. }

086. }

087. },

088. Afdeling: {

089. validation: {

090. required: false

091. }

092. }

093. }

094. }

095. },

096. sort: {

097. field: "Naam", dir: "asc"

098. }

099. }),

100. sortable: true,

101. scrollable: true,

102. editable: "inline",

103. toolbar: [

104. { name: "create", text: "Voeg medewerker toe" }

105. ],

106. columns: [

107. {

108. field: "Naam",

109. template: "<a href=\"/Beheer/Medewerker/Details/#= Id #\">#= Naam #</a>"

110. },

111. {

112. field: "FunctieId",

113. title: "Functie",

114. template: "#= Functie #",

115. //Custom editor for dropdown

116. editor: FunctieDropDownEditor

117. },

118. {

119. field: "AfdelingId",

120. title: "Afdeling",

121. template: "#= Afdeling #",

122. //Custom editor for dropdown

123. editor: AfdelingDropDownEditor

124. },

125. {

126. field: "Actief",

127. title: "Actief",

128. template: "<input name='Actief' type='checkbox' data-bind='checked: Actief' #= Actief ? checked='checked' : '' # disabled />",

129. editor: "<input name='Actief' type='checkbox' data-bind='checked: Actief' #= Actief ? checked='checked' : '' # />",

130. width: 70

131. },

132. {

133. command: [{ name: "edit", text: "Wijzig" }, { name: "destroy", text: "Verwijder" }]

134. }

135. ]

136. });

137. });

138.

139. function FunctieDropDownEditor(container, options) {

140. $('<input data-text-field="Naam" data-value-field="Id" name="sl' + options.field + '" data-bind="value:' + options.field + '" />')

141. .appendTo(container)

142. .kendoDropDownList({

143. autoBind: false,

144. dataSource: {

145. type: "json",

146. transport: {

147. read: "/Beheer/Functie/ListJson",

148. }

149. }

150. });

151. }

152.

153. function AfdelingDropDownEditor(container, options) {

154. $('<input data-text-field="Naam" data-value-field="Id" name="sl' + options.field + '" data-bind="value:' + options.field + '" />')

155. .appendTo(container)

156. .kendoDropDownList({

157. autoBind: false,

158. dataSource: {

159. type: "json",

160. transport: {

161. read: "/Beheer/Afdeling/ListJson",

162. }

163. }

164. });

165. }

166. </script>

Is there a simple way to create validation rules + error messages for a custom editor, like in this case a dropdownlist.
I want an "error" message if a user does not select a function or he/she selects the first value (which is "Please select a function" with value 0).

Thanks,

Jeroen

Grid

answered on 11 Dec 2013

1 answer

255 views

Problem with finding open window (duplicate dom elements?)

I am declaring a window like this...

in my html
<div id='mywin'></div>

in my js file...
var window = $('#mywin');
if (!window.data("kendoWindow")) {
window.kendoWindow({
width: winWidth + "px",
height: winHeight + "px",
minWidth: winWidth + "px",
minHeight: winHeight + "px",
title: "Place of Interest Search",
actions: ["Close"],
resizable: false
});
}

//open identify window
window.data("kendoWindow").center();
window.data("kendoWindow").open();

this all works but when i attempt to reload content by...

if ($("#mywin").data("kendoWindow")) {

..reload logic here

this ("#mywin").data("kendoWindow") always returns false thus recreating the window every time.

I notice in the dom there is the original div and then a duplicate div for the window at the bottom of the dom with the same id (mywin)

what am i doing wrong here? I want to reuse the original window without having to destroy it and recreate it.

Window

answered on 11 Dec 2013

3 answers

147 views

zoom/pane controls

Hello,

Is there a way to turn off the zoom and pane controls? Ideally I just want the map to sit over a country and not be moved.

Additionally is there an easy way to display hover text in a bubble when hovering over geo polygon location?

Thanks!

Map

answered on 11 Dec 2013

7 answers

251 views

Not able to get datasource for collapsed tree node

Hi all,
I am having treeview with checkboxes on kendo window, treeview datasource bound using ajax call and having some of it's nodes in checked state while loading the treeview, if tree is in collapsed state then while i am doing empTreeview.dataSource.view() then i am not able to get the collapsed node in collection.
I want the checked checkboxes in collapsed node as well.
Please reply.

TreeView

answered on 11 Dec 2013

1 answer

542 views

MVVM binding to ButtonGroup index

I have a button group like the following:

<ul data-role="buttongroup" data-bind="index: selectedTabIndex, events: { select: tabSelected }">

<li>Item1</li>

<li>Item2</li>

<li>Item3</li>

</ul>

However I get the following error when Kendo tries to bind my model:
"The index binding is not supported by the ButtonGroup widget"

Is it not possible to bind widget properties to a view model?

ButtonGroup

answered on 11 Dec 2013

5 answers

240 views

Problem Pasting Email Contents (from Lotus notes and Outlook) into HTML Editor

Hi, we had no problem with copying email contents, rich text and HTML content specially formatted HTML contents with tables, and pasting into HTML Editor in earlier version 2013.2.716 (both IE-10 and Chrome Browser were beautifully ok)!
However, as soon as we upgrade to version 2013.3.1122 yesterday, we have so many problems in pasting contents into HTML Editor.
1. In IE-10 the contents after pasting in the Editor has so many unnecessary line spacing. Also we can no longer paste contents with HTML table (editor does not show it in the table form, just show it in continuous lines with a lots of long line spacing in between lines).
2. In Chrome it's even worse, when we paste the content into the Editor, only partial of the content is being paste (NOT ALL).
Basically, the most beautiful working version of Editor in the previous version (2013.2.716), now in the new version (2013.3.1122) become practically useless!
Please do something about it, as most of our users and online customers are complaining to us on this particular issue since yesterday.
Any solution to quickly solve this tedious problem will be much appreciated.
Thank you.

Editor

answered on 11 Dec 2013

5 answers

102 views

割 character in a listview

Hello Guys,

I have the 割 character for a multiple select. This view is populated by ajax. See screenshot attached.
It does this only on Apple devices.

Regards.

ListView (Mobile)

answered on 11 Dec 2013