Questions on Kendo UI for jQuery Forum

1 answer

623 views

I've been using the Kendo DataSource for a while now on the browser side, so I've gotten used to all of its great features. I want to use it on the server side in a Node.js app. Is this even possible?

I installed kendo-ui-core because I don't care about any of the other pro features, just the DataSource.

npm install --save kendo-ui-core

when I do

var kendo = require("kendo-ui-core");

I get a "ReferenceError: window is not defined" which leads me to believe that it's not possible since it's trying to use the window object which is not available in Node.

Data Source

answered on 19 May 2017

1 answer

265 views

DatePicker only shows as a text input inside Bootstrap modal

I attached a file for testing the case. It's related to Kendo Date Pickers using Bootstrap modals in an MVC architecture.
First, I've included 2 datePickers. They work as expected. No problems related to using multiple controls. It also means all styles and scripts are loaded fine.
But when I add a third control in a Bootstrap modal, it looks completely different.
When analyzing the DOM, this control is rendered as a text input with the right date, but... No possibilities to use the selector that should appear as a pop up.

Thanks in advance for any help.

DatePicker

answered on 19 May 2017

1 answer

175 views

Unable to load events

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

292 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

453 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

227 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

232 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

134 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