Questions on Kendo UI for jQuery Forum

1 answer

245 views

Change formatting of Grid column in response to event

Hello,
I have a Kendo Grid (called 'overallGrid' in my example) with some columns formatted as percentages with one decimal place ( format: "{0:p1}" ). I also have a View Model with a Select element, where the user can change what values they wish to see in the columns. What I need to do is, when they pick a certain option in the Select element, the formatting of the columns should be changed to be a decimal with 1 decimal place, rather than a percentage.

At the moment, I have this in the "click" event of a "update grid" button;

if (viewModel.score == 'Mean') {

overallGrid.columns[1].format = '{0:n1}';

overallGrid.columns[3].format = '{0:n1}';

}

overallGrid.dataSource.filter( [

{ field: "score", operator: "eq", value:viewModel.score},

]);

overallGrid.dataSource.read();

overallGrid.refresh();

When run, the formatting on the rendered grid does not change, even though I can see that the "columns.formatting" of the Grid object has been changed when I inspect the object in Firebug.

What am I doing wrong? Thanks!

Grid

answered on 12 Dec 2013

3 answers

3.1K+ views

Fetch vs. Read

The documentation is not clear on the differences between dataSource.fetch() and dataSource.read(). Can you explain the differences?

Data Source

answered on 12 Dec 2013

6 answers

1.4K+ views

difference between data-show and data-init

what is the difference between data-show and data-init? and when should you use each one?

General Discussions

answered on 12 Dec 2013

6 answers

353 views

create fire multiple request

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

194 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

49 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.2K+ 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

273 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

167 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

264 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