Questions on Kendo UI for jQuery Forum

3 answers

620 views

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

469 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

answered on 08 Jul 2016

1 answer

204 views

AngularJS : Tooltip for hierarchy cell ?

Hello,

How can I add a tooltip for k-minus and k-plus in the hierarchy cell using AngularJS ?

I need to show to my users, per exemple : "Click here to expand" or "Click here to collapse".

Thank you very much,

SLM

Grid

answered on 08 Jul 2016

2 answers

783 views

[Solved] Selecting a row which is on a different page of the grid

Hi I have a grid with 3 pages with 20 records on each.

I am trying to select and go to a certain record on a different page.

The issue is I don't know how to do this its easy to do within the page your on using

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

grid.select(2);

so i thought it would be as easy as

var grid = $("#ListUserGrid").data("kendoGrid").datasource.data();
grid.select(2);

and obviously that doesn't work

this is what i have at the moment

var grid2 = $("#ListUserGrid").data("kendoGrid").dataSource.data();

if (useridValue > 0)
{
for (var i = 0; i < grid2.length; i++)
{
var t = grid2[i]["UserId"];
arraygrid.push({ "idx": i, "UserId": t });
if (arraygrid[i]["UserId"] == useridValue)
{
//var items = grid2.items();
var idx = arraygrid[i]["idx"];
var loc = grid2[idx];
}
}
itemsToSelect.push(loc);
grid2.select(itemsToSelect);
useridValue = 0;
return;
}

Any help would be appreciated.

Data Source

answered on 08 Jul 2016

3 answers

859 views

[Solved] Add tooltip to tree node

Hi,

attached my example:

http://dojo.telerik.com/@idoglik6/usIro

What I'm trying to is to popup tooltip above the "x Recipients" which contains their names (the recipients names by the bind prop "recipients.email".)

I already tried to pass the recipients array to the controller by -> #:item.recipents.email#, but it sent [Oblect, Object] .

I need the real object and not the string format.

Thanks,

Ran

TreeView

answered on 08 Jul 2016

2 answers

143 views

Chart does not read oData DataSource

Currently, I am trying to create a column chart with a oData v4 DataSource. However, the values in the chart are not visible. I believe that there is a problem with the oData DataSource, or that the schema is not correct, but maybe I am wrong.

In the attachment, you can find my xml source file (WorkOrders).

<div id="chart"></div>

<script>

var dataSource_statuswerkopdrachten = new kendo.data.DataSource({

type: "odata-v4",

transport: {

read: {

url: "//localhost:9090/npo/WorkOrders",

dataType: "json"

}

},

group: [{

field: "status"

}],

schema: {

model: {

fields: {

value: { type: "number" },

status: { type: "string" }

}

});

var transformedData = [];

dataSource_statuswerkopdrachten.fetch(function () {

var v = this.view();

for (var i = 0; i < v.length; i++) {

var item = v[i].value;

var val = v[i].items.length;

transformedData.push({status: item, value: val});

}

});

$("#chart").kendoChart({

title: {

text: "Status van alle werkopdrachten"

},

chartArea: {

height: 200

},

dataSource: transformedData,

categoryAxis: {

field: "status"

},

series: [

{ field: "value", name: "Status" }

]

});

</script>

Charts

answered on 08 Jul 2016

3 answers

1.6K+ views

Angular k-rebind grid column resize causes refresh

Using the k-rebind option on the Kendo grid causes it to refresh every time a user resizes a column.

This issue has been posted in the past http://www.telerik.com/forums/grid-angular-k-rebind-issue-since-q3-update and the solution was to bind to the data source which will not work in my situation as all of the options can possibly change.

Is it possible to stop it from refreshing when the user resizes a column?

Grid

answered on 08 Jul 2016

1 answer

164 views

Hide Legends in KendoUI Donut Chart

Hi,

I am trying to display some data on a Kendo UI Donut chart and the Legend is set as visible.

I have 3 series in the chart and legend is displayed for all 3 of them where as I would like it to be displayed just once.

Each series represent data for each year.

Could anyone please help me with thus.

Any help is appreciated.

Thanks,

Minu Francis

General Discussions

answered on 07 Jul 2016

8 answers

291 views

[Solved] What's causing the filter menu container to drop all the way down.

I'm not sure why the menu container is all the way down to the browser bottom. Did I miss a CSS style sheet?

kendo.common-fiori.min.css
kendo.fiori.min.css
kendo.fiori.mobile.min.css
kendo.mobile.fiori.min.css
kendo.dataviz.fiori.min.css

Grid

answered on 07 Jul 2016

1 answer

497 views

Avoid kendo tooltip from going outside the viewport of browser

When my html control is at top most , right most ,left most or bottom most of the screen then my tooltip goes out side the browser view port.
is there any way by which I can set position property of tooltip at runtime onshow or contentload event. so as to keep tooltip in side the browser viewport

ToolTip

answered on 07 Jul 2016