Questions on Kendo UI for jQuery Forum

1 answer

357 views

[Solved] Kendo 2016.2.714 transparent/invisible objects

I have an web app that was built using kendo 2016.2.504 which has been displaying fine. I upgraded using the wizard to 2016.2.714 and now many objects are transparent or invisible. Has this been experienced by anyone else?

No errors were given in the upgrade results although for some reason the whole process took 4+hours to complete.

The only thing I noticed was that in my _Layout.vbhtml there was still a link to one of the 2016.2.504 css files although there was a correctly referenced file to the corresponding 2016.2.714 version above it. I removed the reference to the .504 version but this made no difference.

Is there anything else I can try before I revert back to my backed-up 504 version?

Thanks

General Discussions

answered on 20 Jul 2016

1 answer

133 views

Splitter

Thank you in advance for any feedback!

I am trying to have one left pane and two middle pane split on the middle. So one vertical left splitter and one horizontal splitter.

So far this is the code that I have, it does the split ok but it doesn't show in the whole page.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />

<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.mobile.min.css" />

<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>

</head>
<body>
<div id="example">
<div id="vertical" style="height: 100%; width: 100%" >

<div id="horizontal" style="height: 100%; width: 100%;">
<div id="left-pane">
<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
<div id="center-pane">
<div class="vertical">
<div id="center-top">
<div class="pane-content">
<h3>Inner splitter1 / center pane</h3>
<p>Resizable only. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
</div>
<div id="center-bottom">
<div class="pane-content">
<h3>Inner splitter2 / center pane</h3>
<p>Resizable only.</p>
</div>
</div>
</div>
</div>

</div>
</div>

<script>
$(document).ready(function() {
$(".vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, size: "80%" },
{ collapsible: false, size: "20%" }
]
});

$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, size: "100%" },
]
});

$("#horizontal").kendoSplitter({
panes: [
{ collapsible: false, size: "400px" },
{ collapsible: false },
{ collapsible: true}
]
});
});
</script>

<style>
#vertical {
height: 100%;
margin: 0 auto;
}

#middle-pane {
background-color: rgba(60, 70, 80, 0.10);
}

#bottom-pane {
background-color: rgba(60, 70, 80, 0.15);
}

#left-pane, #center-pane, #right-pane {
background-color: rgba(60, 70, 80, 0.05);
}

.pane-content {
padding: 0 10px;
}
</style>
</div>
</body>

</html>

General Discussions

answered on 20 Jul 2016

1 answer

423 views

Grid with Batch editing and custom ParameterMap

Hi,

I encounter one issue while try to implement the grid to my project:

My current source:

01.skillsGrid_DS = new kendo.data.DataSource({

02. transport: {

03. read: {

04. url: skillsGrid_svc,

05. dataType: "json",

06. beforeSend: function (xhr) {

07. return Core.RESTFulSettings(xhr, site.sessionToken);

08. }

09. },

10. create: {

11. url: skillsGrid_svc,

12. dataType: "json",

13. type: "POST",

14. beforeSend: function (xhr) {

15. return Core.RESTFulSettings(xhr, site.sessionToken, "POST");

16. }

17. },

18. update: {

19. url: skillsGrid_svc,

20. dataType: "json",

21. type: "POST",

22. beforeSend: function (xhr) {

23. return Core.RESTFulSettings(xhr, site.sessionToken, "POST");

24. }

25. },

26. parameterMap: function(options, operation) {

27. if (operation !== "read" && options.models) {

28. return kendo.stringify(postData);

29. }

30. }

31. },

32. serverPaging: true,

33. batch: true,

34. pageSize: 20,

35. schema: {

36. model: {

37. fields: {

38. SkillCode: { type: "number", validation: { required: true} },

39. Core: { type: "boolean" },

40. YearOfExperienceCodeId: { type: "number", validation: { required: true } }

41. }

42. }

43. }

44. });

45.

46.$('#SkillsGrid').kendoGrid({

47. dataSource: skillsGrid_DS,

48. editable: "inline",

49. pageable: true,

50. toolbar: ["create", "save", "cancel"],

51. columns: [

52. {field: "ClassificationCode", editor: vm.editor_Classifications, validation: { required: true } },

53. {field: "ElementCode", editor: vm.editor_Elements, validation: { required: true } },

54. {field: "SkillRequired", title: "Skill Required", editor: vm.editor_SkillResource, validation: { required: true } },

55. {field: "Core", width:"75px", validation: { required: true }},

56. {field: "YearOfExperienceCodeId", width:"150px", validation: { required: true }, editor: vm.editor_YrsExperience, title: "Yrs of Experience"},

57. {title: " ", width:"75px", command: "destroy"}

58. ]

59. });

And the issues are:

- As soon as I click on "CREATE" button, the row I entered gone and replaced by a blank row

- I want to submit the batch in format below but the requested data is included all columns content

1.[{"SkillCode": "1", "Core": "true", "YearOfExperienceCodeId":"4"},

2. {"SkillCode": "132", "Core": "false", "YearOfExperienceCodeId":"1"}]

I'm looking a lot from the forum and cant find my answers. Could you please help me for more information about it.

Thank you and Best regards,

Grid

answered on 20 Jul 2016

1 answer

179 views

Embed custom view inside scheduler

This look strange, but it is a requirement of a customer,

I'd like to add a kendo gird as a custom view in kendo scheduler. However, the grid is not involved with scheduler but it should be accessed form the scheduler toolbar and should be displayed inside the scheduler frame.

Any suggestions will be greatly appreciated.

Scheduler

answered on 20 Jul 2016

1 answer

994 views

How can I catch changed event from textbox in the grid editable row

I am putting onchange evet in grid option but when ı edit or add new row the event doesnt fire

Grid

answered on 20 Jul 2016

3 answers

436 views

kgrid Grouping expand / collapse bug with virtual scrolling

Hi all,

I'd like a report a bug I seem to be experiencing with the kendo grid when grouping with virtual scrolling.

When collapsing/expanding groups with virtual scrolling enabled, the scroll height of the grid content does not get updated, and this unfolds into all sorts of weird side effects.

Does anyone know of a workaround?

-Michael

Grid

answered on 20 Jul 2016

3 answers

207 views

Data Transfer between views

Hi,

Is there any proper way or functionality to transfer data between views. I think currently we can send only using sample.html?<param>=<value> method or need to store in some global variable. If need to send array of data then "?" method will not work. Any other solutions.

Thanks,

Velu

View

answered on 20 Jul 2016

1 answer

225 views

Retrieve selected detail row data

I have a Parent/Child grid and have 2 custom buttons (Show & Delete)

1. On Show button click, I need to get selected child rows data.

2. On Delete Button Click, I need to delete child rows from grid

Appreciate any help.

Best Regards,

Sanjay

Grid

answered on 20 Jul 2016

2 answers

335 views

[Solved] How to call a different removeUrl for each file on remove?

Hello,

The endpoints that I'm using to save & remove files with the uploader is implemented as a restful service. The endpoints look something like this:

POST : api/resource/{resourceId}/attachments

DELETE api/resource/{resourceId}/attachments/{attachmentId}

The post works no problem. I'm having trouble with the DELETE however because I need to the URL called for each file to include the id of the attachment being deleted.

My config looks like this at the moment:

Is it possible for me to change the removeUrl based on the file selected?

Thanks for your help

Upload

answered on 20 Jul 2016

9 answers

214 views

Failure to read remote DataSource

This (http://dojo.telerik.com/OpupU) is a Dojo example that prints the length of a remote DataSource's data. When I substitute in a different URL (one running on my local machine) but don't change anything else, nothing gets logged to the console. In particular, the change function is never called.

Here is information about the data I'm trying to pull in:

The JSON data:

[{

"tradeVolume": "33454327",

"numberOfTrades": "130498",

"tradeSizeStdDev": 13048.15096724034,

"quoteSizeStdDev": 1306.394869511115,

"medianTrade": 100.0,

"eightiethTradeSize": 200.0,

"ninetiethTradeSize": 334.2000000000029,

"ninetyFifthTradeSize": 334.2000000000029,

"ninetyEighthTradeSize": 1100.0,

"ninetyNinthTradeSize": 2000.0,

"medianQuoteSize": 1000.0,

"eightiethQuoteSize": 1550.0,

"ninetiethQuoteSize": 2050.0,

"ninetyFifthQuoteSize": 2050.0,

"ninetyEighthQuoteSize": 4300.0,

"ninetyNinthQuoteSize": 5600.0,

"ninetyNinthFiveQuoteSize": 7850.0

}]

Screenshots of the Chrome DevTools Network Headers and Response are linked here: https://i.imgsafe.org/6d2625717d.png and https://i.imgsafe.org/6d29a5a600.png

Can someone explain why the Dojo example isn't working when I substitute in my url containing the above data and tell me how I could fix it? I wonder if it has to do with the "keep-alive" connection.

Thanks!

Data Source

answered on 19 Jul 2016