Questions on Kendo UI for jQuery Forum

1 answer

281 views

Hello,

I have a grid with 2 columns. One column is a product code that the user should enter, and the other is product quantity that should be filled automatically after the user enter the product code. This should be done on change event.

The product quantity is obtained by a service.

Atm the user Inserts the Product Code in the first cell, and in the second cell the value is showed.

I had to make a few workarounds since i wanted that the cell after losing focus, or hit enter should save the row. (I made this due to the fact I wasn't able to make the second row not editable).

Because of this, the user experience a bit of delay, between entering the value and updating the other cell.

How can i make this quicker? Or put a loading gif until it updates?

My code is:

01.var dataSource = new kendo.data.DataSource({

02. batch: false,

03. autoSync: false,

04. data: [],

05. pageSize: 20,

06. schema: {

07. model: {

08. id: "ProductID",

09. fields: {

10. ProductCode: { type: "string", validation: { required: true } },

11. ProductQuantity: { type: "number", validation: { required: false, editable: false } }

12. }

13. }

14. },

15. edit: function (e) {

16. if (e.model.isNew() == false) {

17. $('[name="ProductQuantity"]').attr("readonly", true);

18. }

19. },

20. change: function (e) {

21. if (e.action == "itemchange" && e.field == "ProductCode") {

22.

23. apModel.getProductQuantities(e.items[0].ProductCode).ifFetched().then(function (data) {

24. var obj = JSON.parse(data.Response);

25. var grid = $("#ap-grid").data("kendoGrid");

26. var data = grid.dataSource.data();

27.

28. data[0].set('ProductQuantity', obj[0].qty);

29. })

30. $("#ap-grid").data("kendoGrid").saveRow();

31.

32. }

33.

34. }

35.});

36.

37.$("#ap-grid").kendoGrid({

38. dataSource: dataSource,

39. pageable: false,

40. height: 550,

41. toolbar: ["create"],

42. columns: [

43. { field: "ProductCode", title: "Product Code" },

44. { field: "ProductQuantity", title: "Quantity" },

45. { command: ["destroy"], title: " ", width: "250px" }],

46. editable: "inline",

47.});

Any suggestions?

thanks in advance

Grid

answered on 23 Mar 2016

1 answer

150 views

Resize kendoComboBox based on remote content

I am using a Kendo UI kendoComboBox that fetches remote data using a DataSource. Sometimes the values fetched are too large to fit in the kendoComboBox, so is it possible to adjust/autofit the width of the kendoComboBox after the data has been loaded ?

Thanks.

General Discussions

answered on 23 Mar 2016

4 answers

282 views

Masked textbox not guaranteed

Hello

I wanted to let you know that you can "cheat" masked textbox. I created a masked textbox allowing hours, minutes and seconds in format: hh:mm:ss while "mm" and "ss" cannot be higher than 59 as it makes sense:

$("#eventobjecttime").kendoMaskedTextBox({
mask: "00:~0:~0",
value: "00:00:00",
rules: {
"~": /[0-5]/,
}
});

That works fine but if I enter f.e. "05:47:58" (what is fine and allowed by set rule), set the cursor behind the "05" (hours) and press DEL left key (as I want to delete the "5" the part right (mm:ss) shifts to left. You now see: 04:75:8_ Ooops! I can jump out of the textbox and nothing is complaining. The other way around (f.e. pasting something in between) is possible to. So the masked textbox does not guarantee the user can not override the rules.

Do you have any idea how I can make sure the masked textbox can not be overridden?

MaskedTextBox

answered on 23 Mar 2016

2 answers

114 views

[Solved] kendo-date-picker nested in kendo-panel-bar hangs IE11 (long running script)

Hello,

We' ve got a problem nesting a kendo-date-picker in a kendo-panelbar.

This works fine in Chrome (49.0.2623.87) and Firefox (45.0.1) but crashes in IE11 (11.0.96000.18231) ==> long running script.

Is this a known issue ? What is the solution ?

Attached a very basic setup to illustrate the problem.

Grtz,

Jurgen

DatePicker

answered on 23 Mar 2016

1 answer

134 views

Scheduler context menu

Hi,

Seeing a strange behaviour in my scheduler, following the documentation I have implemented a context menu that opens when a cell is clicked on. The problem is it opens off target (see attachment). I haven't found a way to fix this and I'm hoping someone can help?

Thanks

Matthew

Scheduler

answered on 23 Mar 2016

5 answers

450 views

Add text to the resource group header, and adding another column

I have two things I'm trying to do using the Kendo UI scheduler in Timeline view:

1. I want to add some text above all of the resources, to specify what the resources are. The attached picture shows the location where I want to add the text. Is there a way to do this?

2. I would also like to add a second column next to the resource column that contains additional information from the event. Is there a way to do this as well?

Scheduler

answered on 23 Mar 2016

3 answers

133 views

Custom XMLHTTPRequest on save

I have a not fully implemented REST endpoint I'm working against. So I cannot use a simple URL as save location. I need to customize the save action. Is that possible with the upload widget.

Upload

answered on 23 Mar 2016

7 answers

1.2K+ views

Hierarchy grid bind on button click

Dear admin,
I need to bind Hierarchy grid on main grid by button click. Following is my example code.

001.var people = new kendo.data.DataSource({

002. data: {!Output},

003. batch: true,

004. schema: {

005. model: {

006. fields: {

007. carId: { type: "string" },

008. vehicleId: { type: "string", editable:false },

009. Percentage: { type: "number", editable:false },

010. Price: { type: "string", editable:false},

011. CarType: { type: "string", editable:false},

012. CarSize: { type: "string", editable:false},

013. CarPerCase: { type: "number", editable:false },

014. Family: { type: "string", editable:false},

015. ModelType: { type: "string", editable:false},

016. EPId: { type: "string" },

017. Tax: { type: "string" }

018. }

019. }

020. },

021. pageSize: 20,

022. sort: { field: "vehicleId", dir: "asc" }

023. });

024.var element = $("#grid").kendoGrid({

025. dataSource: people,

026. navigatable: true,

027. pageable: true,

028. toolbar: [

029. "save",

030. "cancel",

031. {

032. name: "Add",

033. text: "Show Car Price",

034. click: function(e) {

035. return false;

036. }

037. },

038. {

039. name: "Delete",

040. text: "Hide Car Price",

041. click: function(e) {

042. return false;

043. }

044. }

045. ],

046. columns:[

047. {

048. field: "carId",

049. title: "Car ID",

050. width: 150,

051. hidden:true

052. },

053. {

054. field: "vehicleId",

055. title: "Vehicle ID",

056. width: 100

057. },

058. {

059. field: "Percentage",

060. title: "Percentage",

061. width: 70

062. },

063. {

064. field: "Price",

065. title: "Price",

066. width: 250

067. },

068. {

069. field: "CarType",

070. title: "Car Type"

071. },

072. {

073. field: "CarSize",

074. title: "Car Size"

075. },

076. {

077. field: "CarPerCase",

078. title: "Car Per Case"

079. },

080. {

081. field: "Family",

082. title: "Family"

083. },

084. {

085. field: "ModelType",

086. title: "Model Type",

087. width: 100

088. },

089. {

090. field: "EPId",

091. title: "EP Id",

092. hidden: false

093. },

094. {

095. field: "Tax",

096. title: "Tax",

097. format: "{0:c}",

098. width: 100

099. }

100. ],

101. editable:true

102. groupable: true,

103. filterable: true,

104. sortable: true,

105. reorderable: true,

106. resizable: true,

107. columnMenu: true,

108. pageable: {

109. refresh: true,

110. pageSizes: [10, 20, 50],

111. buttonCount: 5

112. },

113. editable: "incell",

114. detailInit: detailInit

115. });

116.// hierarchy grid

117. function detailInit(e) {

118. var detailRow = e.detailRow;

119. codeDetailData = e.data;

120.

121. $("<div/>").appendTo(e.detailCell).kendoGrid({

122. dataSource: e.data.ItemPrices.toJSON(),

123. editable:true,

124. navigatable: true,

125. scrollable: false,

126. sortable: true,

127. pageable: true,

128. columns: [

129. {

130. field: "Engine",

131. width: "200px",

132. editor: serviceItemAutoCompleteEditor

133. },

134. {

135. field: "TN",

136. title:"TN",

137. width: "110px"

138. },

139. {

140. field: "TaxApplied",

141. title:"Tax Applied"

142. },

143. {

144. field: "TaxChange",

145. title: "Tax Change",

146. width: "300px"

147. },

148. {

149. field: "StartDate",

150. title: "Start Date",

151. format:"{0:dd-MM-yyyy}",

152. editor: dateTimeEditor

153. },

154. {

155. field: "EndDate",

156. title: "End Date",

157. format:"{0:dd-MM-yyyy}",

158. editor: dateTimeEditor

159. }

160. ]

161. });

162.

163. }

My requirement is that the line 114 detailInit: detailInit (responsible for hierarchy grid), should not be there at the time of load of grid. There should be a button, that bind/attach hierarchy grid to main grid on click.
Hiding columns of arrows is not an option.

Hierarchical Data Source

answered on 23 Mar 2016

1 answer

123 views

Image as dropzone for instant upload

Hello,

is it possible to use an <img> a target for a file upload, so that when I drop files on the image they get uploaded?

Upload

answered on 23 Mar 2016

3 answers

130 views

Dynamic Columns Issue

I have a problem with the grid in that when columns are being added dynamically if the column that is being added is beyond the right side of the view-able right edge of the grid the column does not appear added when scrolled to the right.It takes a refresh to do this. This behavior should not exist ideally. When the column is added I want it view-able. As I recall, you have to add another column so the column that was not view-able is pushed to the left now in the view-able area. How do we solve this problem?

Grid

answered on 23 Mar 2016