Questions on Kendo UI for jQuery Forum

1 answer

423 views

Kendo Grid as Widget, how to avoid XSS issues

Hi!

For a client I have to implement a widget which displays reporting data in a Kendo UI Grid. This widget will be used on various websites. We do have some limited control on how the widget should be implemented on those websites, but optimally it shouldn't be more than a script tag and a div in which to inject.

One big concern is XSS issues. While I am digging into this subject I was wondering what the "official" stance on this is, if there are already any past experiences with such a scenario etc. Any pointers are welcome.

Thanks!

Thorsten

General Discussions

answered on 11 Jul 2016

7 answers

390 views

[Solved] Use kendoImageBrowser as standalone.

Hi,

I wanted to use the widget kendoImageBrowser without using the editor and put it in a kendoWindow.

The purpose was to connect this ImageBrowser to my own API.

I managed to do that but I still have several problems and I can't find where they come from :

1) Uncaught TypeError: t.kendoEditable is not a function kendo.listview.js:438

That happen when I try to create a folder. It's not even entering in the create method.

2) The thumbnails are not display automatically, I have to scroll or move to another folder for them to activate.

Here is my code :

var self = this;

$(this.id).kendoWindow({

width: "615px",

title: "Upload Images",

resizable: false,

draggable: false,

modal: true,

visible: false,

content: {

template: '<div id="imgBrowser"></div>'

}

});

$("#imgBrowser").kendoImageBrowser({

transport: {

type: "imagebrowser-aspnetmvc",

read: function (options) {

var data = options.data;

var posting = $.post(self.serverUrl + self.readUrl, { path: data.path });

posting.done(function (data) {

if (data.length != 0)

options.success(data);

else {

options.success([]);

}

});

posting.fail(function (data) {

options.error(data);

});

},

destroy: {

url: self.serverUrl + self.destroyUrl,

type: "POST"

},

create: {

url: self.serverUrl + self.createUrl,

type: "POST"

},

uploadUrl: self.serverUrl + self.uploadUrl,

thumbnailUrl: self.serverUrl + self.thumbnailUrl,

imageUrl: self.serverUrl + self.imageUrl

}

});

Maybe I wasn't clear enough, don't hesitate if you want more informations on my problem.

Regards.

Editor

answered on 11 Jul 2016

1 answer

204 views

[Solved] How to change 'All Events' text

In the scheduler with no grouping the column description is All Events. How can I change this.... I've looked through all the messages configuration options.

Pic attached to show which text I wish to change.

Scheduler

answered on 08 Jul 2016

10 answers

613 views

Diagrams with multiple parents

Hi,

I am trying to use Kendo dataviz diagrams in asp.net MVC to represent a hierarchy where each node can have more than one parent. Is this possible at all? And if so, how do you represent the data?

Thank you

Diagram

answered on 08 Jul 2016

1 answer

182 views

kendo-grid: wrong currency parse (angular, odata)

Hi,

I'm using a kendo-grid (from kendo 2015.1.429) with angularjs (v 1.2.27) and odata (asp net web api 2).

I've a field that is declared as type: 'number' the culture used is it-IT both for client and server (I've included kendo.culture.it-IT.min.js and set JsonFormatter serialization settings properly).

The grid does not allow to insert a "." but only "," as decimal separator (that is correct) but when I try to save data, those are posted to my controller and deserialized losing the decimal. So for example 7,22 become 722.

Am I doing something wrong? Is there a known bug?

Thanks,

Enrico

Grid

answered on 08 Jul 2016

1 answer

302 views

Kendo Grid k-list-container position problem in IE and Firefox

Hello,

I´m using the Kendo Grid. Now I have the problem that on scrollable pages in IE and Firefox the top-position of the k-list-container get´s calculated wrong when you´re scrolling the page, so the dropdown lists are shown on the wrong position because its value of the top-position gets calculated as the original top-position plus the scrolled area. (see screenshots)

In Chrome and Edge it works fine. The top-position of the k-list-container gets calculated once and stays the same when the page is scrolled.

Any suggestions to fix this?

Grid

answered on 08 Jul 2016

3 answers

379 views

Web API 2.2 service that provides server side filtering, paging and sorting

I've been fighting to figure out what combination of Web API REST services and the Kendo UI Grid work well with both Microsoft Web API 2.2 (latest version for .NET 4.6) and the Kendo UI Grid version 2016.2.504, commercial.

OData v4 is very easy to develop on the backend (Web API) but server side filtering/sorting/paging seems to be broken on the front end (Kendo UI). Despite setting the transport type to “odata-v4” the GET request that is being sent to the service doesn’t even contain the dollar signs before the parameter keys such as $filter or $top much less being actual OData v4 formats.

Ex: /odata/vwApplication?take=10&skip=0&page=1&pageSize=10&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=FundingPeriodId&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=eq&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=1&filter%5Bfilters%5D%5B1%5D%5Bfield%5D=StudentId&filter%5Bfilters%5D%5B1%5D%5Boperator%5D=eq&filter%5Bfilters%5D%5B1%5D%5Bvalue%5D=3369&filter%5Blogic%5D=and HTTP/1.1

Using OData is not a requirement, it just seemed the simplest way to bind the Kendo UI Grid and get server side filtering, sorting and paging. I’m open to anything that’s quick to develop and easy to maintain (otherwise I’d just write it myself and not buy these kinds of tools).

Note: I am not interested in using any form of ASP on the front end, including MVC. Pure REST services only.

I'm down to having to write a recursive function in JavaScript to parse the Grid's filter to convert it into a proper OData v4 filter which seems rather silly considering we bought the commercial version to make setting up a grid quick and easy.

Is there an example that shows how to write a modern Web API 2 service in C# and bind it to the Kendo UI Grid in JavaScript that provides server side filtering, sorting and paging? I find projects for MVC that are several years old but not a newer pure Web API REST example.

You would think all of this should be as easy as telling the Kendo UI Grid to use OData v4 but after two days of reading and tweaking I don’t seem to be getting anywhere.

Thank you ahead of time for your help!

Grid

answered on 08 Jul 2016

3 answers

613 views

Refresh Datasource & Template

I'm using a datasource and a template to create a kind of mini-discussion forum. The idea is that users can leave comments/posts on an item, as well as edit/delete them etc. Right now I have it that when a comment is added/edited/deleted, the whole page is being refreshed in order to show the changes. Since this is also part of a SPA, this isn't ideal. I was trying to do a read on the datasource on a successful add/edit/delete, but it didn't change the data onscreen.

Template:

<script id="discussion_template" type="text/x-kendo-template">

<div class="col-xs-12 disc-comment">

<div class="disc-nav"><img src="#= data.Photo #" title="#= data.Poster #" /></div>

<div class="overflow-hidden">

<div id="display_comment_#= data.CommentID #">

<p class="blue">#= data.Poster #</p>

# var formatted_text = data.Text.replace(/(?:\r\n|\r|\n)/g, '<br />'); #

<p>#= formatted_text #</p>

<p class="small text-muted">

#= data.Created #

# if (data.Editable) { #

<a href="javascript:;" onclick="editComment(#= data.CommentID #);">Edit</a>

# } #

# if (data.Editable || data.IsAdmin) {#

<a href="javascript:;" onclick="deleteComment(#= data.AURID #, #= data.CommentID #);">Delete</a>

# } #

</p>

</div>

# if (data.Editable) { #

<div id="edit_comment_#= data.CommentID #" style="display: none;">

<textarea id="comment_#= data.CommentID#" class="form-control input-sm comment-autogrow" rows="1">#= data.Text #</textarea>

<a id="add_comment_#= data.CommentID #" class="btn btn-default" data-commentid="#= data.CommentID #">

<i class="fa-icon-plus"></i>

</a>

<a href="javascript:;" onclick="cancelEdit(#= data.CommentID #);">Cancel</a>

</div>

# } #

</div>

</script>

JS:

$(document).ready(function() {

$('#add_comment').click(function(){

//main add comment button, no comment ID

var comment_id = 0;

var text = $('#comment').val();

addEditComment(comment_id, text);

});

$('#refresh').click(function(){

location.reload(true);

});

function generateDiscussionView(container_id) {

var template_html = $('#discussion_template').html();

var template = kendo.template(template_html, {useWithBlock: false});

var datasource = new kendo.data.DataSource({

transport: {

read: {

url: "/Discussions.cfc?method=getDiscussion",

type: "get",

dataType: "json",

data: {

ContainerID: container_id

}

},

schema : {

type: "json",

data: "Comments"

}

});

datasource.bind("change", function() {

var view = datasource.view();

var html = "";

html = kendo.render(function(data) {

return template($.extend(data, {IsAdmin: is_admin, AURID: aur_id}));

}, view);

$('#discussion_display').html(html);

});

datasource.read().then(function() {

var data = datasource.data();

data = data[0];

global_container_id = container_id;

//bind the edit buttons

$('a[id*="add_comment_"]').click(function(){

//add comment button for each edit form

var comment_id = $(this).data("commentid");

var text = $('#comment_' + comment_id).val();

addEditComment(comment_id, text);

});

}

function addEditComment(comment_id, text) {

if (text.length == 0) {

alert('temp error - no comment text entered');

}

else {

var comment_data = {};

comment_data["AURID"] = aur_id;

comment_data["ContainerID"] = global_container_id;

comment_data["CommentID"] = comment_id

comment_data["Text"] = text;

$.ajax({

type: "POST",

url: '/Discussions.cfc?method=addEditComment',

processData: true,

dataType: 'json',

data: {

CommentData: JSON.stringify(comment_data)

},

success: function(data){

location.reload(true);

},

error: function(xhr, textStatus, errorThrown){

}

});

}

function deleteComment(poster_id, comment_id) {

var comment_data = {};

comment_data["PosterID"] = poster_id;

comment_data["CommentID"] = comment_id;

$.ajax({

type: "POST",

url: '/Discussions.cfc?method=deleteComment',

processData: true,

dataType: 'json',

data: {

CommentData: JSON.stringify(comment_data)

},

success: function(data){

location.reload(true);

},

error: function(xhr, textStatus, errorThrown){

}

});

}

function editComment(comment_id) {

//hide the display div and show the edit div

$('#display_comment_' + comment_id).hide();

$('#edit_comment_' + comment_id).show();

}

Sample data:

{"Comments":[{"CommentID":23,"Created":"2016-06-28 14:06:47","Text":"New comment test 1","Photo"

:"/Photo/42C43CDE1353C9BEB9B78D7D2B338C6D06229.jpg","Editable":1,"Poster":"Ashleigh

Lodge"},{"CommentID":24,"Created":"2016-06-28 14:06:08","Text":"New comment test 2"

,"Photo":"/Photo/42C43CDE1353C9BEB9B78D7D2B338C6D06229.jpg","Editable":1,"Poster"

:"Ashleigh Lodge"}]}

I know I'll need to make the datasource a global variable, but as I said above, doing that and then doing a read on it in the places where I currently have location.reload() didn't work as expected.

Templates

answered on 08 Jul 2016

3 answers

464 views

Wrapping multiple data source saves into a single call

We have a form with 3 tabs. Each tab has an editable grid in batchMode. We want to have a single save button on the page.

It will need to call the save of each grid. However, it appears the grid sync doesn't return a promise.

What is the suggested way to do this, checking there were no errors in the first call before making the next. Does the sync event return error info? Is the sync event called even if there is an error? If would be great if sync returned a promise but it doesn't seem to. I'm not sure if I can wrap these in a jquery or underscore deferred in some way?

BOb

Data Source