Questions on Kendo UI for jQuery Forum

2 answers

575 views

Button Styles - Material Theme

Does the material theme support flat buttons? If so how to I specify the style?

Button

answered on 11 Jun 2015

1 answer

462 views

[Solved] Checkbox / Radio Buttons

I see that I can use the Kendo ButtonGroup to have a group of buttons act as radio buttons. I also need to have a button group act like checkboxes, like the bootstrap checkbox / radio buttons.

Does Kendo have a way for me to do checkbox buttons as a group of buttons?

Thanks,

--Ed

Button

answered on 11 Jun 2015

1 answer

738 views

kendo grid update

Hello, i'm unable to get the jquery grid to update using a webservice method, i'm running into Uncaught TypeError: Cannot read property 'call' of undefined - kendo.web.min.js:13. Here is how my grid and update method are defined. Could someone please point me in the right direction. Thanks!

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

dataSource: {

transport: {

read: function (options) {

$.ajax({

type: "POST",

url: "StatusDetailsWS.asmx/GetStatusesJSON",

data: jsonReqID,

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

dataType: "json",

dataFilter: function (data) {

//debugger;

var msg = eval('(' + data + ')');

// If the response has a ".d" top-level property,

// return what's below that instead.

if (msg.hasOwnProperty('d'))

return msg.d;

else

return msg;

},

success: function (msg) {

if (msg && msg.Success == false) {

// ToDo: Add Kendo Window dialog to

//Show Error

}

if (msg && msg.Success) {

// redirect to New Job

var data = eval('(' + msg.ReturnValue + ')');

options.success(data);

}

},

error: function (jqXHR, textStatus, errorThrown) {

options.error(jqXHR);

//alert("error");

}

});

},

update: {

type: "POST",

url: "StatusDetailsWS.asmx/UpdateStatusJSON",

dataType:"json",

contentType: "application/json"

},

parameterMap: function (data, operation) {

if (operation === "update" || operation === "create") {

return JSON.stringify({ job : data });

}

return data;

}

},

schema: {

data: "Data",

total: "Total",

model: {

fields: {

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

parentStatus: { type: "string", editable:false },

childStatus: { type: "string", editable:false },

submitDate: { type: "date", editable:false },

userId: { type: "string", editable:false },

notes: { type: "string" }

}

},

pageSize: 25,

serverPaging: false,

serverFiltering: false,

serverSorting: false

},

height: 300,

filterable: false,

sortable: true,

pageable: true,

columns: [{

field: "jobNumber",

title: "Job #",

width: 55,

editable:false,

template: "<a href='javascript:openJobStatus("#: data.jobNumber #");'>#: data.jobNumber #</a>"

},

{

field: "parentStatus",

title: "Overall Status",

editable:false,

width: 70

},

{

field: "childStatus",

title: "Current Status",

editable:false,

width: 70

},

{

field: "submitDate",

title: "Submit Date",

width: 95,

editable:false,

format: "{0:MM/dd/yyyy h:mm:ss tt}"

},

{

field: "userId",

title: "Submitter",

editable:false,

width: 60

},

{

field: "notes",

title: "Notes",

width: 180

},

{

command:[{

id:"edit",

name:"edit",

template: "<a class='k-button k-grid-edit' href='' style='min-width:16px;'></a>"

}

],

title:"",

width:"20px"

},

//{

// title: "",

//    template: "<a href='javascript:openJobStatus(\"#:jobNumber#\");'><img src='images/edit_m.png' alt='Edit Job' style='border:0;' /></a>",

// width: 20

//},

{

title: "",

template:

"<input type='image' alt='submit' title='Print Job' src='images/print_m.png' id='btnPrintJob' onclick='openPrintJobWindow(\"#:jobNumber#\");' style='border:0;' />"

,

width: 20

},

{

title: "",

template:

"<input type='image' alt='submit' title='Restore Request' src='images/wrench_m.png' id='btnRestoreRequest' onclick='restoreRequest(\"#:jobNumber#\");' style='border:0;' />"

,

//hidden: !CanRestoreRequest,

width: 20

},

{

title: "",

template:

"<input type='image' alt='submit' title='Copy Request' src='images/copy_m.png' id='btnCopyRequest' onclick='copyRequest(\"#:jobNumber#\");' style='border:0;' />"

,

width: 20

}

],

editable:"inline"

});


[WebMethod(true)]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public void UpdateStatusJSON(string job)
        {
           ...
....
 
        }

Grid

answered on 11 Jun 2015

1 answer

377 views

HTML in tab text

I'm unable to add html to the tab text. It outputs the html code.

var tabHeader = value["AddressTypeDescription"];
 var tab = $('<div>').attr('name', tabHeader);
 $(tabpanel.contentHolder(0)).children().clone().appendTo(tab);

 var vm = kendo.observable(value);
 kendo.bind(tab, vm);

 //Need to do this otherwise the input values will not get passed
 tab.children().find('input').each(function () { $(this).attr('value', this.value);})

 //renders html code
var closeButton = "delete";
 tabpanel.insertAfter({
 text: tabHeader+' '+ closeButton,
 content: tab.html()
 }
 , tabpanel.tabGroup.children(":nth-last-child(2)")
 );

This is the output:

Company delete

TabStrip

answered on 11 Jun 2015

2 answers

131 views

[Solved] Expand diagram to fill available space

Hi,

The diagram doesn't adapt to fill the available space when something is collapsed on the page containing the diagram. See the following example:

http://dojo.telerik.com/asOru

Is there anything I can do to make the diagram fill the available space?

Thanks :-)

Diagram

answered on 11 Jun 2015

8 answers

303 views

[Solved] StockChart Navigator - problem with displaying "area" navigator

I have trouble with displaying navigator with type "area".

Here is an example of what I have right now:

Code: http://dojo.telerik.com/iPuRi/3

As you can see both graphs have "area" type. The problem is that navigator graph looks like a "jagged bumps".

What can I do to make it the same as the main graph (more smooth)?

Thank you,
Alex

Charts

answered on 11 Jun 2015

1 answer

184 views

Change the group orientation of a running diary

Hello

Is it possible to change the group orientation of running diary?

I want to switch between views and then switch the group.orientation on button click. Is it possible?

I tried for example:

scheduler.view('day'); // works

scheduler.group.orientation('horizontal'); // doesn't work

scheduler.group( { resources: ["Rooms"], orientation: 'horizontal' }); // doesn't work either

Regards,

Pawel

Scheduler

answered on 11 Jun 2015

1 answer

190 views

Virtualization of local data

Hi,

I got some problems when I using virtualization of local data on MultiSelect widget.

Here I leave a sample video and source code.

Hope to get some helps.

MultiSelect

answered on 11 Jun 2015

1 answer

199 views

Error on Server Side Paging

We are getting a couple of problems when we trying to return the data with our custom api and consume through kendo for server side sorting and paging. The Kendo scripts seem to not like it and throws an error.

Please find below the details:-

Web-api Result

data:{

count: 23,

data: [

1. {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1156, name: "Soda DPG For Test", type: 2,…},

2. {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1157, name: "Coke DPG For Test", type: 2,…},

3. {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1205, name: "Pespi Diet DPG", type: 2,…}

4. {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1206, name: "Copy of Pespi Diet DPG",…},

5. {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1238, name: "soda product group", type: 2,…},

6. {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1196, name: "Blend Tea Bag DPG - edited",…},

7. {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1193, name: "Blend Tea DPG", type: 2,…},

8. {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1188, name: "Classic Blend DPG", type: 2,…},

9. {$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1203, name: "Copy of Classic Blend DPG",…},

{$type: "EYC.Data.DynamicProductHierarchy, EYC.Core", id: 1236, name: "Copy of test create edited",…}

]

}

Exception, While data binding:

TypeError: e.slice is not a function

at ht.extend.success (kendo.all.min.js:11)

at Object.ht.extend.read.n._queueRequest.n.online.n.transport.read.success (kendo.all.min.js:11)

Angular js controller source

Demos.controller("MyCtrl", function ($scope) {

$scope.testgriddata = {

dataSource: {

transport: {

read: {

method: "GET",

url: 'http://api.dev.test.com/product-hierarchies/nodes',

headers: {

"x-security-context": "102",

"Authorization": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6InBmVTFLcUJVZ3BNb1hTME5nZ2dHdF9ZVGRBayJ9.eyJpc3MiOiJodHRwczovL2FjY291bnQuZGV2LmV5Yy5jb20vIiwiYXVkIjoidXJuOnNleWM6cnA6YXBpIiwibmJmIjoxNDMyODk5NDE0LCJleHAiOjE0NjQ1MjE4MTQsIm5hbWVpZCI6ImFkbWluIiwidW5pcXVlX25hbWUiOiJhZG1pbiIsImVtYWlsIjoiZXljQGV5Yy5jb20iLCJ1cm46ZXljLmNvbS9hLzEvY2xhaW1zL3NlY3VyaXR5LWNvbnRleHQiOlsiMTAwMDIiLCIxMDAwNSJdLCJhdXRobWV0aG9kIjoiaHR0cDovL3NjaGVtYXMubWljcm9zb2Z0LmNvbS93cy8yMDA4LzA2L2lkZW50aXR5L2F1dGhlbnRpY2F0aW9ubWV0aG9kL3Bhc3N3b3JkIiwiYXV0aF90aW1lIjoiMjAxNS0wNS0yOVQxMToyOToyMi45MTdaIiwiYWN0b3J0IjoiZXlKMGVYQWlPaUpLVjFRaUxDSmhiR2NpT2lKdWIyNWxJbjAuZXlKMWJtbHhkV1ZmYm1GdFpTSTZJa05PUFhObGVXTXRjbkF0WVhOd1pXTjBjeXdnVHoxRldVTXNJRk05VEc5dVpHOXVMQ0JEUFZWTElpd2lZWFYwYUcxbGRHaHZaQ"
},

dataType: 'json' },

parameterMap: function (data, type) {

if (type == "read") {

return {

pagesize: data.pageSize,

pagenum: data.page-1,

sortcolumn: (data.sort != "undefined" && data.sort.length != 0) ? $scope.GetObjectKeyIndex($scope.testgriddata.columns, data.sort[0].field) : null,

sortdirection: (data.sort != "undefined" && data.sort.length != 0) ? (data.sort[0].dir == "asc" ? 0 : 1) : null,

}

}

},

schema: {

data: "data",

total: "count",

model: {

fields: {

name: { type: "string" },

description: { type: "string" },

createdDate: { type: "date" },

createdByUser: { type: "string" },

type: { type: "string" }

}

}

},

},

pageSize: 25,

serverPaging: true,

serverFiltering: false,

serverSorting: true,

sort: { field: "LastUpdatedDate", dir: "desc" }

},



height: 550,



sortable: true,

//filterable: {

// mode: "row"

//},

pageable: {

refresh: true,

input: true,

pageSizes: true,

pageSizes: [5, 10, 15,20,25],

buttonCount: 5

},

columns:

[

{

field: "name",

title: " Name",

filterable: {

cell: {

showOperators: false

}

}

},

{

field: "description",

title: "Description",

filterable: {

cell: {

showOperators: false

}

}

},

{

field: "noofproducts",

title: "No of Products"

},

{

field: "type",

title: "Product Group Type",

template: "#= type==2?'Dynamic Product Group':'Custom Product Group' #",

filterable: {

cell: {

showOperators: false

}

}

},



{

field: "createdDate",

title: "Created Date",

template: "#= kendo.toString(kendo.parseDate(createdDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"



},

{

field: "createdByUser",

title: "Created By"

},

{

field: "LastUpdatedDate",

title: "Last Updated Date",

filterable: {

cell: {

showOperators: false

}

}

},

{

field: "LastUpdatedBy",

title: "Last Updated By",

filterable: {

cell: {

showOperators: false

}

}

},

{

field: "LastUsedDate",

title: "Last Used Date",

filterable: {

cell: {

showOperators: false

}

}

}]

},

$scope.GetObjectKeyIndex= function (obj, keyToFind) {

var i = 0, key;

for (key in obj) {

if (obj[key].field == keyToFind) {

return i+1;

}

i++;

}

return null;

}

});

Grid

answered on 11 Jun 2015

1 answer

220 views

Change Edit Form of Scheduler Kendo UI

I'm developing an asp.net mvc web site where I need to display some data on a calendar, but are not events, otherwise records by date and I served Month view Schedule Widget.
I want to display a color box in a given day and use the features double click to create another record but with a different event and with other form fields, my question is how can I change the edit form and adapt it to a view of my mVC project?

Scheduler

answered on 11 Jun 2015