Questions on Kendo UI for jQuery Forum

10 answers

139 views

Navigation at top

How can I place the grids navigation at the top

Grid

answered on 19 Oct 2018

3 answers

10.7K+ views

Custom Command Button in Toolbars

Hi Guys,

Has any one attempted to add custom command button in the toolbar? Like the one seen in the inline editing, also how to wire up those command button to custom events.

Thanks,
Jessie

Grid

answered on 19 Oct 2018

2 answers

369 views

[Kendo grid] Filter popup of the last column in the grid closes suddenly without any user actions or mouse movement

The first grid has 11 columns. The second grid has 8 columns. Width (in %) has been set for each column (in CSS).
Whenever the user opens the filter on the last column, the filter popup closes suddenly without any mouse movement (scroll, click).

There are two grids in this page and the issue occurs only for the last column of each grid.

The issue is experienced by a few users only and we are unable to reproduce the issue on our end.

User is using IE 11. Filter works fine when the user zooms the browser view to 125% but when the user views the page in 100%, the issue still exists.
The same user tested this in Chrome and there are no issues on the grid filter.

User's screen resolution is bigger than 1280px*.
*1280px is the minimum screen resolution supported in our application

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

02. transport: {

03. read: function (e) {

04. CSROpenQueueInput.queueType = 'Open';

05. cmsfactory.postByObject(CSRRequestQueueAPI, CSROpenQueueInput)

06. .then(function success(response) {

07.

08. $scope.noOfOpenRecords = response.data.CSROpenRequest.length;

09. e.success(response.data.CSROpenRequest);

10. }, function error(response) {

11. console.log(response);

12. })

13. }

14. },

15. pageSize: 10,

16. schema: {

17. model: {

18. fields: {

19. Csr_Id: { type: "number", editable: false },

20. Priority_Name: { type: "string", editable: false },

21. Request_Payer_Claim_Id: { type: "string", editable: false },

22. Username: { type: "string", editable: false },

23. Type_name: { type: "string", editable: false },

24. Patient_Name: { type: "string", editable: false },

25. Patient_Dob: { type: "date", editable: false },

26. Open_Date: { type: "date", editable: false },

27. Uhi_Last_Action_Date: { type: "date", editable: false },

28. Expected_Resolution_Date: { type: "date", editable: false },

29. Status_name: { type: "string", editable: false }

30. }

31. },

32. }

33.});

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

02. transport: {

03. read: function (e) {

04. CSRCloseQueueInput.queueType = 'Closed';

05. cmsfactory.postByObject(CSRRequestQueueAPI, CSRCloseQueueInput)

06. .then(function success(response) {

07.

08. $scope.noOfClosedRecords = response.data.CSRClosedRequest.length;

09. e.success(response.data.CSRClosedRequest);

10. }, function error(response) {

11. console.log(response);

12. })

13. }

14. },

15. pageSize: 10,

16. schema: {

17. model: {

18. fields: {

19. Csr_Id: { type: "number", editable: false },

20. Request_Payer_Claim_Id: { type: "number", editable: false },

21. Username: { type: "string", editable: false },

22. Type_name: { type: "string", editable: false },

23. Patient_Name: { type: "string", editable: false },

24. Patient_Dob: { type: "date", editable: false },

25. Open_Date: { type: "date", editable: false },

26. Close_Date: { type: "date", editable: false }

27. }

28. },

29. }

30.});

Kendo version is 2017.2.621 (Kendo UI Core)

Grid

answered on 18 Oct 2018

2 answers

1.9K+ views

Multiselect in kendoDialog clear issue.

Hi,

I am using the multiselect in the popup.dojo here:http://dojo.telerik.com/UXIMEwOR/2

The problem is to clear the kendomultiselect when ever the popup is opened after the selection.

steps: 1. click the button to open the popup

2. select the options in the multiselect

3.click ok to close

Again open the popup the selected values are remains. I want to clear the datasource assigned and the values.

I tried few options $("#cboMappingTable").kendoMultiSelect().data("kendoMultiSelect").value([]); but its creating one more element show in attached image

I think the div" dialog" is retaining the controls..not sure how to fix this . let me know your thoughts.

code below:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.default.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.911/js/angular.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script></head>

<body>

<div id="dialog" class="demo-section k-content" style="display:none">

<select id='cboMappingTable' style="width:348px !important;"></select>

<button id='btnCancel' style='height:27px;width:90px'><span>OK</button>

</div>

<input type="button" value="Click" id='btnclick'/>

<script type="text/javascript" >

var cboData = [

{ text: "Test1", value: "Test1" },

{ text: "Test2", value: "Test2" },

{ text: "Test3", value: "Test3" }

];

$(document).ready(function () {

$("#cboMappingTable").kendoMultiSelect({

dataTextField: "text",

dataValueField: "value",

dataSource: cboData

});

$("#btnclick").click(function(){

$("#dialog").css({ display: "block" });

var dialog = $('#dialog');

dialog.kendoDialog({

width: "460px",

title: "test"

});

dialog.data("kendoDialog").open();

});

$("#btnCancel").click(function (){

$("#dialog").data("kendoDialog").close();

});

</script>

</body>

</html>

Thanks

Dev

MultiSelect

answered on 18 Oct 2018

6 answers

761 views

How to implement ng-repeat inside Template

The following code is also available in the dojo at http://dojo.telerik.com/@larkydoo/OGeYi. What I need to be able to do is to iterate through my Authors list within the template. I've tried a few variations without any luck. Help?

Thanks!

Here's the code:

<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>

<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">

<div class="demo-section">
<div kendo-list-view id="listView" k-data-source="source">
<div class="product" k-template>
<h3>#:Title#</h3>
<p>#:Publisher#</p>
<p>#:AuthorsList#</p>
<div ng-repeat="author in #=Authors#">Display FullName Here: {{FullName}}</div>
</div>
</div>
</div>
</div>
</div>

<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.source = new kendo.data.DataSource({
data: [
{
"$id": "1",
"ResourceId": 720,
"Title": "Volleyed and Thundered: A Short, Brutal History of War",
"AuthorsList": "Alfred Lloyd Tennyson",
"Publisher": "University of Hard Knocks",
"Authors": [
{
"$id": "2",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Alfred Lloyd Tennyson",
"IsApproved": false,
"FriendlyPath": "alfred_lloyd_tennyson"
}
]
},
{
"$id": "3",
"ResourceId": 867,
"Title": "Explorations in Imagination",
"AuthorsList": "Vladimir Nabokov, Robert Frost, Virginia Woolf, Ursula LeGuin, and Philip K. Dick",
"Publisher": "University of the Universe",
"Authors": [
{
"$id": "4",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Vladimir Nabokov",
"IsApproved": false,
"FriendlyPath": "vladimir_nabokov"
},
{
"$id": "5",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Robert Frost",
"IsApproved": false,
"FriendlyPath": "robert_frost"
},
{
"$id": "6",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Virginia Woolf",
"IsApproved": false,
"FriendlyPath": "virginia_woolf"
},
{
"$id": "7",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Ursula LeGuin",
"IsApproved": false,
"FriendlyPath": "ursula_leguin"
},
{
"$id": "8",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Philip K. Dick",
"IsApproved": false,
"FriendlyPath": "philip_k_dick"
}
]
},
{
"$id": "9",
"ResourceId": 1031,
"Title": "Stories from Everywhere",
"AuthorsList": "Tobias Wolfe, George Orwell, Ray Bradbury, Doctor Seuss, and Wallace Stevens",
"Publisher": "All Around U",
"Authors": [
{
"$id": "10",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Tobias Wolfe",
"IsApproved": false,
"FriendlyPath": "tobias_wolfe"
},
{
"$id": "11",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "George Orwell",
"IsApproved": false,
"FriendlyPath": "george_orwell"
},
{
"$id": "12",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Ray Bradbury",
"IsApproved": false,
"FriendlyPath": "ray_bradbury"
},
{
"$id": "13",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Doctor Seuss",
"IsApproved": false,
"FriendlyPath": "doctor_seuss"
},
{
"$id": "14",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Wallace Stevens",
"IsApproved": false,
"FriendlyPath": "wallace_stevens"
}
]
}
]
});

$scope.onClick = function(e) {
alert(1);
}
})
</script>

</body>
</html>

ListView

answered on 17 Oct 2018

6 answers

1.5K+ views

kendoui-datasource change event not raised after data dataitem set

Hello,
I set the kendo datacolumn value using javascript like ,

var gridData = $("#GridName").data("kendoGrid");
var tr = $("#GridName tbody tr[1]");
var idx = tr.index();
gridData._data[idx].VATEntryCode = 0;
$("#GridName").data("kendoGrid").refresh();

data value successfully updated on grid but datasource change event not raised.

$(gridName).data("kendoGrid").dataSource.bind("change", function (e) {
});

suggest me what i missing?

Thanks
Mayank

Grid

answered on 17 Oct 2018

3 answers

187 views

"Scroll to Specific Time Slot" failing in local environment

Hi,

As my title says the "Scroll to Specific Time Slot" (https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/scrolling/scroll_to_given_time_slot) example does not work in my local environment. I've copied it letter-for-letter, exactly as it is in the example and without exception, it fails every time on the "scheduler.slotByElement(rows[i]);" line. it always returns null. the rows exits, the exists. it works in your demo but fails at that line in my code.

PLEASE help as I have no clue what is happening. All that runs through my head is WTF over and over.

Note: that I am up-to-date with v2018.3.911

Thanks,
Grant

Scheduler

answered on 16 Oct 2018

7 answers

141 views

Deleted item is not substituted in a paged grid with OData v4

Hello,

when using inline-edit in a grid with a datasource calling an OData v4 service, the deleted item is not substituted in the current page (see screen in attachment). What am I missing in my code?

Following an example

$('#gridProductCategories').kendoGrid({

sortable: true,

scrollable: false,

selectable: true,

pageable: {

refresh: true,

pageSizes: [5, 10, 20, 40],

buttonCount: 5

},

toolbar: [{ name: "create", text: getLocValue("AddProductCategory") }],

editable: {

mode: "inline",

confirmation: getLocValue("Confirmation")

},

columns: [

{

field: "PC_ID",

title: getLocValue("ID")

},

{

field: "PC_Text_de",

title: getLocValue("Text_de")

},

{

field: "PC_Text_en",

title: getLocValue("Text_en")

},

{

width: 90,

command: [

{ name: "edit", text: { edit: "", cancel: "", update: "" }, className: "action_button edit" },

{ name: "destroy", text: "", className: "action_button delete" }

],

title: " "

}

]

});

[HttpDelete]

[EnableQuery(AllowedQueryOptions = AllowedQueryOptions.All)]

[Authorize(Roles = "administrator, maintenance")]

public IHttpActionResult Delete([FromODataUri] int key)

{

ProductCategory productCategory = dbcontext.ProductCategory.Find(key);

if (productCategory == null)

{

return BadRequest(ModelState);

}

productCategory.PC_Deleted = true;

dbcontext.ProductCategory.AddOrUpdate(productCategory);

dbcontext.SaveChanges();

return Ok(productCategory);

}

productCategorySource: new kendo.data.DataSource({

type: "odata-v4",

pageSize: 20,

serverPaging: true,

serverFiltering: true,

serverSorting: true,

transport: {

read: {

url: serviceUrl + "/odata/ProductCategories",

dataType: "json",

type: "GET"

},

update: {

url: serviceUrl + "/odata/ProductCategories(0)",

dataType: "json",

type: "PUT"

},

create: {

url: serviceUrl + "/odata/ProductCategories",

dataType: "json",

type: "POST"

},

destroy: {

url: function (data) {

return serviceUrl + "/odata/ProductCategories(" + data.PC_ID + ")"

},

dataType: "json",

type: "DELETE"

}

},

schema: {

model: {

id: "PC_ID",

fields: {

PC_ID: { type: "number", editable: false },

PC_Text_de: { type: "string", validation: { required: true } },

PC_Text_en: { type: "string", validation: { required: true } }

}

},

error: function (e) {

console.log(e.errorThrown);

}

})

Grid

answered on 16 Oct 2018

5 answers

1.2K+ views

Not able to remove duplicate from the filter option

Hi ,

On a KENDO Grid , if i set " multi: true, search: true, dataSource: ds" for the checkboxes option on filter , it shows the duplicate records of the datasource on filter checkboxes. Below please see the code for reference.

var grid = $("#grid2").kendoGrid({

dataSource: ds,

columnMenu: {
columns: false
},
columns: [
{ title: "ID", field: "DocumentID", width: 100 },
{ title: "Region", field: "Region", width: 100, filterable: { multi: true, dataSource: [{ Region: "HQ" }, { Region: "EAPRO" }] }, lockable: true },
{ title: "Office", field: "Office", width: 100 , filterable: { multi: true, dataSource: [{ Office: "" }] }, lockable: true},
{ title: "YOC", field: "YearofCompletion", width: 100 },
{ title: "Title", field: "Title", width: 100 },
{ title: "Status", field: "Status", width: 100, filterable: { multi: true, dataSource: [{ Status: "On-track" }] }, lockable: true },
{ title: "Sector", field: "SectorMirror", width: 100, filterable: { multi: true, search: true, dataSource: ds }, lockable: true },
{ title: "Type", field: "Type", width: 100, filterable: { multi: true, search: true, dataSource: ds }, lockable: true },
{ title: "Phase", field: "Phase", width: 100, filterable: { multi: true, dataSource: [{ Phase: "Planning" }] }, lockable: true },
{ title: "Language", field: "Language", width: 100, filterable: { multi: true, dataSource: [{ Language: "English" }] }, lockable: true },
{ title: "Rating", field: "Rating", width: 100, filterable: { multi: true, search: true, dataSource: ds }, lockable: true }
],
filterable: { mode: "menu" },
// mode: "menu",