Questions on Kendo UI for jQuery Forum

1 answer

91 views

Required Field

How to check required field into a KendoUI Mobile form?
Thank you

General Discussions

answered on 12 Dec 2013

1 answer

420 views

ComboBox z-index

Hi, I'm trying to create a dashboards using windows as widget containers. In the top of the dashboard I have a toolbar with some comboboxes that are filters for my widgets. However when I open the comobobox, the list of values appear under de widgets (window). I tried to change the z-index using styles, I try to change the z-index in the combobox open event .. but nothing works ...

How I can change the combobox z-index? (I'm using MVVM)

Thanks in advance

ComboBox

answered on 12 Dec 2013

1 answer

255 views

Agenda view customisation

Can you provide a code snippet on how to modify the agenda view? Specifically I want to modify the default headers Date, Time and Event to say something else.

Scheduler

answered on 12 Dec 2013

1 answer

248 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

365 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

201 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