Questions on Kendo UI for jQuery Forum

1 answer

151 views

Hi all,

I have been fighting with the scheduler (2017.2.504) for the past few days. I'm simply trying to get two very simple events from my ASP.NET Core WebAPI.

You may find below the configuration of my kendo scheduler:

$('#scheduler').kendoScheduler({

date: new Date(),

dataSource: {

batch: true,

schema: {

model: {

id: 'bookingId',

fields: {

bookingId: { type: 'number', from: 'bookingId' },

start: { type: 'date', from: 'start' },

end: { type: 'date', from: 'end' },

title: { from: 'title' },

resourceId: { type: 'number', from: 'resourceId' }

}

},

transport: {

read: {

url: 'http://localhost:57627/api/v1.0/bookings',

dataType: 'jsonp'

},

parameterMap: function (options, operation) {

if (operation === 'read') {

// Default values

return { start: '2017-05-01', end: '2017-05-31', tectaclocationid: 'locations/801' };

} else if (operation !== 'read' && options.models) {

return { models: kendo.stringify(options.models) };

}

return null;

}

},

resources: [{

field: 'resourceId',

dataValueField: 'resourceId',

dataTextField: 'code',

name: 'Resources'

dataSource: this.resources

}]

});

I'm able to confirm that the "bookings" endpoint is correctly called by the scheduler. It always returns the following JSON array:

[{"bookingId":1111,"start":"2017-05-19T06:00:00","end":"2017-05-19T07:00:00","resourceId":1227756,"title":"Test 1"},{"bookingId":2222,"start":"2017-05-19T08:00:00","end":"2017-05-19T09:00:00","resourceId":1227756,"title":"Test 2"}]

My resources are correctly loaded (i can see them) but i'm unable to load/see those events. I tried to change the date format, the resourceId, the title without success. I'm probably missing something big :)...

Any idea?

Thank you so much

Scheduler

answered on 19 May 2017

1 answer

280 views

kendo grid Event in the kendoMaskedTextBox enter event

kendoMaskMaskedTextBox 이벤트를 통해 검도 그리드의 값을 변경하고 싶지만 enter 이벤트

작동하지 않습니다 어떻게 변환합니까?

{field: "roomNum", title: "Room #", width: "150px", attributes:{style:"text-align:center;"},editor: dateEditor}

function dateEditor(container, options) {

$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoMaskedTextBox({

change: function(e){

var model = options.model;

assignRoom(model);

console.log('options-->', options);

}

});

};

var assignRoom = function(obj) {

angular.forEach($scope.gridSource.data(), function(v, k) {

if (v.roomNum === obj.roomNum) {

if (v.rsvDtlsId !== obj.rsvDtlsId) {

v.roomNum = "";

}

});

var idx = 0, delRoom = null;

angular.forEach($scope.gridModel, function(v, k) {

if (v.rsvDtlsId === obj.rsvDtlsId) {

if (obj.roomNum === "") {

delRoom = v.roomNum;

}

v.roomNum = obj.roomNum;

idx = k;

}

});

angular.forEach($scope.checkedModel.roomNum, function(v, k) {

if (v === delRoom) {

$scope.checkedModel.roomNum[k] = "";

}

});

angular.forEach($scope.assignModel, function(v, k) {

if (v.roomNum === $scope.gridModel[idx].roomNum) {

$scope.checkedModel.roomNum[idx] = v.roomNum;

}

});

$scope.saveEach(obj);

$scope.$apply();

};

0 다운 투표 즐겨 찾기

kendoMaskedTextBox evnet을 통해 검도 그리드의 값을 변경하고 싶습니다. 그러나 엔터 이벤트가 작동하지 않습니다. 어떻게 변환합니까?

{field: "roomNum", title: "Room #", width: "150px", attributes:{style:"text-align:center;"},editor: dateEditor} 

 function dateEditor(container, options) {
      $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '"/>')
      .appendTo(container)
      .kendoMaskedTextBox({
          change: function(e){
              var model = options.model;
              assignRoom(model);
             console.log('options-->', options); 
          }
      }); 
};

0 다운 투표 즐겨 찾기

kendoMaskedTextBox evnet을 통해 검도 그리드의 값을 변경하고 싶습니다. 그러나 엔터 이벤트가 작동하지 않습니다. 어떻게 변환합니까?

{field: "roomNum", title: "Room #", width: "150px", attributes:{style:"text-align:center;"},editor: dateEditor} 

 function dateEditor(container, options) {
      $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '"/>')
      .appendTo(container)
      .kendoMaskedTextBox({
          change: function(e){
              var model = options.model;
              assignRoom(model);
             console.log('options-->', options); 
          }
      }); 
};

0 다운 투표 즐겨 찾기

kendoMaskedTextBox evnet을 통해 검도 그리드의 값을 변경하고 싶습니다. 그러나 엔터 이벤트가 작동하지 않습니다. 어떻게 변환합니까?

{field: "roomNum", title: "Room #", width: "150px", attributes:{style:"text-align:center;"},editor: dateEditor} 

 function dateEditor(container, options) {
      $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '"/>')
      .appendTo(container)
      .kendoMaskedTextBox({
          change: function(e){
              var model = options.model;
              assignRoom(model);
             console.log('options-->', options); 
          }
      }); 
};

MaskedTextBox

answered on 18 May 2017

1 answer

1.2K+ views

saveAsExcel with all pages

I'm writing a universal function that will apply a standard context menu to every single grid on our whole site. My problem is, I'm trying to also universally bind the option to export all pages and cannot find any documentation on how to apply it via the saveAsExcel function. Here is my JS function

function Universal_Grid_ContextMenu(grid) {

$("#context-menu").kendoContextMenu({

target: grid,

select: function(e) {

var element = e.item;

var grid = $(e.target).data("kendoGrid");

var action = $(element).attr("data-action");

if(action != undefined && grid !=undefined) {

switch(action) {

case "grid_menu_export":

grid.bind("excel", function(e) {

e.workbook.allPages = true

});

grid.saveAsExcel();

break;

case "grid_menu_refresh":

grid.dataSource.read();

grid.refresh();

break;

}

console.log();

}

});

}

Grid

answered on 18 May 2017

1 answer

1.3K+ views

How to implement Multi Level hierarchical grid in Kendo UI?

Currently we have an example of One level hierarchical Grid but i need Multi Level Hierarchical Grid. Please provide me the Link for Demo of Multi Level hierarchical grid. Thank you.

Grid

answered on 18 May 2017

5 answers

439 views

Json Result can't be binded to KendoUI grid

I can't display in a kendo grid the data that I am returning from my Controller as Json Result.

[HttpPost]

public ActionResult PermitSearch(BptSearchViewModel viewModel)

{

var data = appService.SearchPermitInspection(viewModel);

return Json(data, JsonRequestBehavior.AllowGet);<br> }

now from my View I am submitting the information using ajax

@using (Ajax.BeginForm("PermitSearch", "Home", null, new AjaxOptions
{
HttpMethod = "post",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "search-results-grid",
OnComplete = "OnCompleteMethod"
}))
{
....
}

<div id="search-results-grid"></div>

an the script with the OnCompleteMethod is below

function OnCompleteMethod(dataq, status) {
if (status === "success") {
$("#search-results-grid").kendoGrid({
columns: [
{
field: "jobname",
title: "Job Type"
}
dataSource: {
data: {
"items" : dataq
},
schema: {
data: "items"
}
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
noRecords: {
template: "No data available on current page. Current page is: #=this.dataSource.page()#"
}
});
}
}

and the data that I am returning looks like this after I call the controller

[
{
"jobname": "job1"
},
{
"jobname": "job2"
}
]

What I am doing wrong here?

Grid

answered on 18 May 2017

2 answers

203 views

Json Result can't be binded to KendoUI grid

I can't display in a kendo grid the data that I am returning from my Controller as Json Result.

[HttpPost]

public ActionResult PermitSearch(BptSearchViewModel viewModel)

{

var data = appService.SearchPermitInspection(viewModel);

return Json(data, JsonRequestBehavior.AllowGet);

}

now from my View I am submitting the information using ajax

@using (Ajax.BeginForm("PermitSearch", "Home", null, new AjaxOptions

{

HttpMethod = "post",

InsertionMode = InsertionMode.InsertAfter,

UpdateTargetId = "search-results-grid",

OnComplete = "OnCompleteMethod"

}))

{

....

}

<div id="search-results-grid"></div>

an the script with the OnCompleteMethod is below

function OnCompleteMethod(dataq, status) {

if (status === "success") {

$("#search-results-grid").kendoGrid({

columns: [

{

field: "jobname",

title: "Job Type"

}

dataSource: {

data: {

"items" : dataq

},

schema: {

data: "items"

}

},

groupable: true,

sortable: true,

pageable: {

refresh: true,

pageSizes: true,

buttonCount: 5

},

noRecords: {

template: "No data available on current page. Current page is: #=this.dataSource.page()#"

}

});

}

and the data that I am returning looks like this after I call the controller

[

{

"jobname": "job1"

},

{

"jobname": "job2"

}

]

What I am doing wrong here?

Grid

answered on 18 May 2017

7 answers

217 views

Multiselect widget behaviour in IOS

How do we prevent popping up keypad when using this multiselect widget. It is text input box. if we make it read-only then the multiselect feature won't work.

MultiSelect

answered on 18 May 2017

1 answer

119 views

Multiselect Example and a small mystery

http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/preselect-items-using-mvvm

Having sample code is good, but code is not an explanation. Code is what, code is not why.

For example:

var products = model.products; // preselected products
model.set("products", []); // why is this necessary?
model.set("products", products);

I'm new to Kendo (and JS frameworks in general), while I am finding a decent amount of sample code, the lack of proper tutorials means a longer learning curve.

MultiSelect

answered on 18 May 2017

6 answers

888 views

[Solved] Export excel aggregate cell misalignment

Hi Guys,

I have notice when exporting a groupped grid to excel the aggregate cells in excel are offset for some reason to the left and do not match the browser grid aggregate layout and as such the exported file doesnt look as good as it should.
This can behavior can easily be replicated in the kendo demo page at http://demos.telerik.com/kendo-ui/grid/excel-export

Cheers!

Grid

answered on 18 May 2017

5 answers

1.2K+ views

kendo grid text selection with mouse

Hello,

I have found I cannot select text from grid and copy it to clipboard. When searching this issue I have found the following demos. In the first demo I can select text and copy it:

http://jsfiddle.net/OnaBai/uj6sr9ez/

However, in the following demo I cannot copy the text from cell or row:

http://demos.telerik.com/kendo-ui/grid/selection

which demonstrate the problem.

My question is how I enable text copying (either cell(s) or row(s)) from grid to clipboard.

Thanks in advance,

Emanuel

Grid