Questions on Kendo UI for jQuery Forum

1 answer

100 views

Require DataSourceFilter of kendo Grid as RadDataFilter control of Telerik

We are replicating the functionality of the RadDataFilter control of Telerik with DataSourceFilter of Kendo Grid.
Here certain filters like 'Does not contain', 'Is contained in', 'Is empty', 'Is null', 'Is not null' etc. are not found with the DataSourceFilter.
Hence, please provide us with some suggestion.

Grid

answered on 09 Jun 2014

1 answer

743 views

Filtering Doesn't Work Using a Template

I have a column called Due that contains a date from the server. On the client I use SetValAndColorForDue() to change the date to a the number of hours from today and I change the color to either Red or Black.

When I implement SetValAndColorForDue in the grid { field: "Due", title: "Due", width: 100, template: '#=SetValAndColorForDue(Due)#' , as seen below, the filtering doesn't work at all. I can see the filter options just that when I filter by the output nothing happens.

function SetValAndColorForDue(dueDate) {

var a = moment();

var b = moment(dueDate);

var duration = a.diff(b, 'hours');

if (duration > 24){

return "<font color=\"red\">" + duration + " </font>";

}

else {

return duration;

}

The grid: Focus on the BOLD code below.

$(document).ready(function () {

var selectedCaseID = 43;

$("#grid").kendoGrid({

height: 600,

columns: [

"InvestigationID",

{ field: "Status", title: "Status", width: 100 },

{ field: "FullName", title: "Full Name", width: 220 },

"Priority",

"Created",

{ field: "Due", title: "Due", width: 100, template: '#=SetValAndColorForDue(Due)#' },

"LastActivityDate",

"LastActivityBy"

],

selectable: "row",

pageable: {

info: true

}, // enable paging

filterable: true, // enable filtering

sortable: true, // enable sorting

//toolbar: ["create", "save", "cancel"], // specify toolbar commands

dataSource: {

serverPaging: true,

serverSorting: true,

serverFiltering: true,

pageSize: 50,

schema: {

data: "d.Data", // web methods return JSON in the following format { "d": <result> }. Specify how to get the result.

total: "d.Total",

model: { // define the model of the data source. Required for validation and property types.

id: "InvestigationID",

fields: {

InvestigationID: { type: "string" },

Status: { type: "string" },

FullName: { type: "string" },

Priority: { type: "string" },

Created: { type: "string" },

Due: { type: "string" },

LastActivityDate: { type: "string" },

LastActivityBy: { type: "string" }

}

},

transport: {

read: {

url: "/InvestigationDesign.aspx/Investigations", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.

contentType: "application/json; charset=utf-8", // tells the web method to serialize JSON

type: "POST" //use HTTP POST request as the default GET is not allowed for web methods

},

parameterMap: function (data, operation) {

if (data.models) {

return JSON.stringify({ products: data.models });

} else if (operation == "read") {

//Page methods always need values for their parameters

data = $.extend({caseid: selectedCaseID, sort: null, filter: null }, data);

return JSON.stringify(data);

}

});

var grid = $("#grid").data("kendoGrid");

// Handles double click of grid.

$("#grid").on("dblclick", "tr.k-state-selected", function () {

var model = grid.dataItem(grid.select());

window.open("Investigation/DefaultAngularTest.aspx?invID=" + model.InvestigationID, "_blank");

});

Grid

answered on 09 Jun 2014

1 answer

247 views

Kendo Grid - Showing Aggregate values at each grid column footer

We have a grid which is having a column showing checkboxes in each row.
we are using Odata for taking data which is binded to kendo grid.
How to show the count at the footer for the number of checked record in kendo grid.

as per our investigation using Odata, server aggregates are not supported.

Grid

answered on 09 Jun 2014

1 answer

149 views

Button click with a little movement does not fire click event

Is there a way to make a button receive a click event when the user moves a little bit during the click?

On mobile devices I have found many users will move their finger a little bit when clicking on a button. In Kendo UI Mobile if movement occurs during the click the click event is not fired. To see this happen, run the following plunkr:

http://plnkr.co/edit/foJjBq87ou6mFSdLEq4k?p=preview

When clicking drag just a little bit and the click event will not fire. Only when you click with no movement will the click event fire.

I would like an event something like "touch up inside" which would fire when the user lifts their finger from a button.

Thanks,
Kerry

Button (Mobile)

answered on 09 Jun 2014

3 answers

480 views

inline editing in kendo grid

hello

1) i use and follow this grid

http://demos.telerik.com/kendo-ui/grid/editing-custom
http://trykendoui.telerik.com/

but i want to all field not editable true only like example "Product Name" allow to editable true and other two not..

so how to do this in kendo grid please help me.

2) and when i change value then new value save temporary and how to save new value on button click.

like first product name is "chai" and i update chai to tea then tea was
where to store i dont know and i want to tea store on other button click
like using ajax and this button is out side grid.

and then we make one button on outside kendo grid and when click on this
button and i want to get updated data(row) of this two row only and pass to
controller action using ajax.

so how to do this in kendo grid please help me.

reply asap

Grid

answered on 09 Jun 2014

4 answers

277 views

TreeView, TypeScript and Model Classes

Hi,

I'm using in my new project telerik kendo controls with angularjs, furthermore I want to use TypeScript.
This combination looks really good, but now I have following problem.

I have a hierarchical datasource for a treeview. The datasource is populated with my own javascript model class.

01.module MyNamespace {

02. 'use strict';

03.

04. export class Cluster {

05. public clusters: Cluster[];

06. public parentId: string;

07. public dateCreated: Date;

08. public dateModified: Date;

09.

10. constructor(

11. public id: string,

12. public matrixId: string,

13. public name: string,

14. public position: number

15. ) {

16.

17. this.clusters = [];

18. this.dateCreated = new Date();

19. this.dateModified = new Date();

20. }

21. }

22.}

If I try to get the selected node item, I get following typescript error:

Build: Cannot convert 'kendo.data.Node' to 'MyNamespace.Cluster'

The problem is, that .dataItem returns a node object and not my model class. If i try to cast the return value, i get this error:

Error: Cannot convert 'kendo.data.Node' to 'MyNamespace.Cluster': Type 'kendo.data.Node' is missing property 'clusters' from type 'MyNamespace.Cluster'. Type 'MyNamespace.Cluster' is missing property 'children' from type 'kendo.data.Node'

How can i get off this error?

Regards
Daniel

TreeView

answered on 09 Jun 2014

5 answers

148 views

Question about value MultiSelect function ?

I need to implement a kendo multiselect value with a json object

But,i don't know how to get a json object ? And if is it possible to store it in a variable ?

I need your help,

Best regards,

Kevin Quinton

MultiSelect

answered on 06 Jun 2014

1 answer

237 views

Iterating through all Kendo Windows on a page

Hi,

I hope this is something relatively simple to ask, I have looked around a little and couldn't find a decent enough resource to solve me problem.

I want to find all kendo windows on a given page without having to reference their id's. The purpose of this is that I am attempting to resize all kendo windows based on when the browser window resize event fires.

Whilst it could be possible to store an array of window id's I would prefer to not have to maintain that additional code.

Thank you in advance for any assistance you can provide.

Window

answered on 06 Jun 2014

6 answers

194 views

Scroller repositioning problem after keyboard dismissed

I have a view with a textarea at the bottom. When I focus on the textarea the keyboard pops up and pushes the textarea up so you can see what you are typing in the input. The problem is when the keyboard is dismissed it doesn't reposition the scroller and leaves whitespace at the bottom where the keyboard was overlayed. Also if you try to scroll back to the top it to top appears to be cut off the same distance of the white space left at the bottom as if the whole slider has been shifted up by that amount. Is there a solution for this issue?

Scott

View

answered on 06 Jun 2014

3 answers

111 views

2 Kendo Grids on the same page each with a locked column?

When I try to put 2 kendo grids on the same page and they each have a locked column, I find that one of them the locked column disappears. Specifically the 2 divs of class k-grid-header-locked and k-grid-content-locked are missing. I'm wondering if this is a known issue?

thanks,
andy

Grid

answered on 06 Jun 2014