Questions on Kendo UI for jQuery Forum

2 answers

286 views

Hi,

I am using multi row drag & drop Grid Feature. I have 2 grids, first contains master detail grid (#grid1) and second grid (#grid2) contains list of items. I am able to select multiple rows from grid2 and drop to grid1 as master successfully. My requirement is to add selected rows from grid2 to grid1 as child to one of the row. Once data is dropped to grid 2, how to refresh the detail grid?

Thanks,

Sanjay

Grid

answered on 21 Jul 2016

1 answer

1.2K+ views

Kendo grid Datasource transport read for POST method making multiple ajax calls

hi ,
I am using Kendo datasource transport read method in the read i am calling POST API but the API is getting called multiple times and also when the complete callback is called the API is infinitely called can you please give me the solution for this

Here is my transport function

var transportFunction = function(pageurl, reqObject) {

return {

read: {

url: pageurl,

contentType: "application/json; charset=utf-8",

type: "POST",

dataType: "json",

beforeSend: function(xhr) {

xhr.setRequestHeader('Authorization', token);

}

},

parameterMap: function(options) {

reqObject.PageSize = options.pageSize;

reqObject.PageNum = options.page;

var request = JSON.stringify(reqObject);

return request;

}

and we are calling as below:

vm.gridOptions.dataSource.transport=transportFunction(apiUrl, reqObj);

vm.gridOptions.dataSource.schema.data="docDetailsArray"

vm.gridOptions.dataSource.schema.total="totalCount"

response from server:

{

demoDetails:[],

ErrorMsg:[],

Success: true,

docDetailsArray:[

{list_of_keys_with_value1},

{list_of_keys_with_value2},

.....

]

};

Anyone face the same issue. can any body help me out why multiple xhr reqest are going

Thanks

Grid

answered on 21 Jul 2016

2 answers

1.2K+ views

Grid with 100,000s records. Issue with ServerOperation & filtering

I have a Kendo grid that is pulling 100,000s of records.
If the .ServerOperation(false) Kendo does not load any data.
If I set it to .ServerOperation(true) it will load the data however the search filters do not work.

What am I missing?
Is there a way to use .ServerOperation(false) with 100,000ss of records?

<div class="grid">

@(Html.Kendo().Grid<BusinessApplication.DTO.DTOMemberGrid>().Name("grid")

.Columns(col =>

{

col.Bound(m => m.MemberID).ClientTemplate("<a href='/members/view/#=MemberID#' class='block'>#=MemberID#</a>").Width(100).Title("ID");

col.Bound(m => m.PersonsTitle).Width(100).Title("Title");

col.Bound(m => m.FirstName);

col.Bound(m => m.LastName);

col.Bound(m => m.JobTitle);

col.Command(command => command.Custom("View")

.Click("EditItem"))

.Width(100)

.Title("View")

.HtmlAttributes(new { @class = "k-grid-details text-center", title = "View" })

.HeaderHtmlAttributes(new { title = "View" });

})

// Source & configuration

.DataSource(src => src

.Ajax()

.PageSize(10)

.ServerOperation(true)

.Sort(sort => sort.Add("MemberID").Descending())

.Read(read => read.Action("GetMembersGridItems", "Members")))

.AutoBind(true)

.Sortable()

.Resizable(resize => resize.Columns(true))

.ColumnMenu()

.Scrollable(s => s.Height("auto"))

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(new[] { 10, 50, 100, 500 })

.ButtonCount(10))

.Filterable(filter => filter

.Operators(op => op.ForDate(date => date

.Clear()

.IsGreaterThanOrEqualTo("Is after or equal to")

.IsLessThanOrEqualTo("Is before or equal to"))))

.Reorderable(reorder => reorder.Columns(true))

)

</div>

Thanks

Tom

Grid

answered on 20 Jul 2016

2 answers

185 views

treeview expandpath doesn't always call the complete function

Hi,
I'm making use of the expandPath function of the treeview, but is doesn't always call the complete function the first time, as if it doesn't do this if it takes to long or something. It works perfectly if I call the function twice but that shouldn't be the solution.

treeView.expandPath(arrPath);

treeView.expandPath(arrPath, function() {

var getitem = treeView.dataSource.get(path);

var selectitem = treeView.findByUid(getitem.uid);

treeView.select(selectitem);

treeView.trigger('select', { node: selectitem });

});

Am I missing something here what I should do different?

TreeView

answered on 20 Jul 2016

7 answers

980 views

[Solved] Disable "Edit Recurring Item" dialog for some events

We are using the Kendo Scheduler control to display a merged calendar containing events (appointments) for the current user as well as for other users. The user is allowed to modify appointments that they "own" but cannot modify other users' appointments. We use the "edit" event to check on ownership of the appointment and prevent modification if it is not owned by the current user. However, for recurring appointments we still see the "Edit current occurrence" / "Edit the series" popup dialog even if the user doesn't own the appointment. Is there any way to prevent this dialog from appearing for appointments not owned by the user?

Scheduler

answered on 20 Jul 2016

1 answer

357 views

Splitter to display on whole window

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>

Splitter

answered on 20 Jul 2016

3 answers

442 views

How to prevent the item drag n drop from one node to another

Hi,

I'm working on drag and drop the node item with in the same node. It is working as expected. But it allows to drag and drop the child item from one node to another. It should be prevented.

Dojo Example

Appreciate your support to fix the issue.

Thanks in advance.

TreeView

answered on 20 Jul 2016

1 answer

355 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

129 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

418 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