Questions on Kendo UI for jQuery Forum

1 answer

127 views

There is a display button in the right bottom corner of my grid, its inactive right now, I would like to be able to make that active when you click a row and then you could click it to download via a link with the id in the link.

I just didnt find any examples of this or how to activate it and what events to use with it, do you have any demos of this ?

Currently I have a button on a tab that opens when you click the > infront of each row.

Regards,

Emil

Grid

answered on 10 Jun 2016

4 answers

101 views

Picked color is not applied in HTML code

Hi,

I couldn't find why, but like in this example: http://dojo.telerik.com/@Janek91/eZUyI font color I'm picking from palette is not applied in HTML code. It's only adding <span> tag. In addition you can't select indexes of ordered or unordered list to change its colors. Can you help me?

Editor

answered on 10 Jun 2016

1 answer

1.0K+ views

[Solved] Trying to Populate Grid Data

OK, I am a total stinking newb. This is an idiotic question, that I'm sure will serve as a laughingstock for years to come.

So I have a grid ... I have columns defined for that grid, and the names of the data elements that I expect to appear in those columns. As well as button at the end of each row that will, at some point, you know ... do stuff. So I have this below ... and it doesn't do that. I get the names and ages ...

but then I also get "bar" in the last column ... Why? I never told anyone about the "foo" element.
also I don't get the button at the end of the row that I expect.

So far I've narrowed the problem down to somewhere between the <html> and </html> tags.

Thanks in advance, for any and all sense that you kind folks may knock into me :-)

Here's the code:

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" href="/content/kendo/kendo.common.min.css" />

<link rel="stylesheet" href="/content/kendo/kendo.default.min.css" />

<script src="/scripts/kendo/jquery.min.js"></script>

<script src="/scripts/kendo/kendo.web.min.js"></script>

</head>

<body>

<input id="testButton" type="button" value="Click Me" onclick="testButton_onclick(this)" />

<div id="example">

<div id="grid"></div>

<script>

$().ready(function () {

setupKendoGridInitial();

});

function setupKendoGridInitial() {

$("#grid").kendoGrid({

columns: [

{ field: "name", title: "Happy Name" }

, { field: "age" }

, {

command: [

{

name: "details",

click: function (e) {

rowEdit(e);

}

]

}

]

});

}

function rowEdit(e) {

alert("Do stuff: " + e.age);

}

function testButton_onclick(event) {

// let's pretend I just called Web API and got this as JSON from the server

var structuredData =

{

blinkyBot: 1,

grannyGunner: "xyz",

funkyRows: [

{ name: "Jimmie Doe", age: 70, foo: "bar" },

{ name: "Johnny Doe", age: 73, foo: "bar" }

]

};

$("#grid").kendoGrid({

dataSource: structuredData.funkyRows

});

}

</script>

</div>

</body>

</html>

Grid

answered on 10 Jun 2016

5 answers

304 views

Need full list of tool names


Great editor - using in my MVC4 projects -- better than TinyMCE

Used your "show html" custom tool - but in doing so you then need to specify all the tool names for them to show up.

You only show the following in the online docs - but that's not all of them.  As seen when you don't specify any explicitly.

Don't see a complete list in any docs - please either provide them or point me to the proper documentation..

Thanks!

...Lance Larsen

$("#editor").kendoEditor({
     tools: [
         "bold",
         "italic",
         "underline",
         "foreColor",
         "insertUnorderedList",
         "insertOrderedList",
         "createLink",
         "unlink",
         "insertImage"
     ]
 });

Editor

answered on 10 Jun 2016

1 answer

137 views

Require full list of tool supported by Kendo text editor

Hello,
I am in need to get the complete list of tools which are supported by the kendo editor, to include into a training report.
I was able to find only these much of tool configuration.

$("#editor").kendoEditor({

tools: [

"bold",

"italic",

"underline",

"strikethrough",

"justifyLeft",

"justifyCenter",

"justifyRight",

"justifyFull",

"insertUnorderedList",

"insertOrderedList",

"indent",

"outdent",

"createLink",

"unlink",

"insertImage",

"insertFile",

"subscript",

"superscript",

"createTable",

"addRowAbove",

"addRowBelow",

"addColumnLeft",

"addColumnRight",

"deleteRow",

"deleteColumn",

"viewHtml",

"formatting",

"cleanFormatting",

"fontName",

"fontSize",

"foreColor",

"backColor",

"print"

]

});

I tried following the above link but found that the resource have been shifted permanently. Kindly provide me with the list or helpful link where I could find the details.

Editor

answered on 10 Jun 2016

1 answer

109 views

on Change and Manual click problem

Hello guys,

I am trying to do the following.

I have a grid witch need to have selectable row. Inside each row i have a sparkline chart on witch when i click a kendo window must open.

When i click on the row a kendo window opens as well.

I know the normal behavior is to open 2 modals as it should. But i need to be able to open just one when i click on the sparkline and prevent the default one from the row.

i have attached the followig dojo to better explain and show what i am failing to do.

I guess this is kinda easy if you put selectable cell, but i need to select the whole row.

Thank you.

Grid

answered on 10 Jun 2016

1 answer

529 views

Double Click on the Kendo UI list view item

Do you support double click on the list view item for kendo ui listview? I could not find it in the docs.

http://docs.telerik.com/kendo-ui/api/javascript/ui/listview

Thanks!

ListView

answered on 10 Jun 2016

1 answer

124 views

Issue repeating data from custom datasource

Hi

I've been struggling with KendoUI and AngularJS to get a list view to repeat (or attempting to use ng-repeat). Here is the StackOverflow I created in regards to the issue

http://stackoverflow.com/questions/37701918/kendoui-angular-datasource-will-not-repeat-or-display-telerik-platform

I not have a suspicion it may be the json returned from my DataSource and as such I may need to restructure it or work around it, if this is the case I do not mind restructuring the results.

Cheers

ListView (Mobile)

answered on 10 Jun 2016

2 answers

194 views

Copy checked node from source treeview to target treeview

Hi,

I have two treeview widget (source and target treeview), when I check any sub-node from Optional root node of the source treeview (this treeview has three root levels -Optional, Mandatory and All- within are its corresponding sub-nodes ) I want copy the sub-node to the corresponding root node of the target treeview, for that I'm doing this:

function onCheckCopyNode(sourceTreeView, targetTreeView)
{
sourceTreeView.dataSource.bind('change', function (e) {
var sourceNodes = sourceTreeView.dataSource.view();
var targetNode = targetTreeView.findByText('Optional');
for (var i = 0; i < sourceNodes.length; i++) {
var sourceChildren = sourceNodes[i].children.view();
if (sourceChildren) {
for(var j = 0; j < sourceChildren.length; j++){
if((typeof sourceChildren[j].checked!==undefined)&&(sourceChildren[j].checked)){
targetTreeView.append(sourceChildren[j], targetNode);
} else if((typeof sourceChildren[j].checked!==undefined)&&(sourceChildren[j].checked)){

var element = targetTreeView.findByUid(children[i].uid);
targetTreeView.remove(element);

}

}
}
}

});

}

function KendoHierarchicalDataSource(element, data, textFields, checkBoxOption, dragAndDropOption, onLoadCopyNode) {

element.kendoTreeView({
checkboxes: {
template: "<input type='checkbox' #= (item.Selectable === false) ? 'disabled' : '' #>", //#= item.Selectable ? 'checked' : '' #
checkChildren: checkBoxOption
},
dragAndDrop: dragAndDropOption,
dataSource: data,
dataTextField: textFields
});
}

$(document).ready(function () {
KendoHierarchicalDataSource($('#s-field-treeview'), [{ MandatoryId: 1, MandatoryName: 'Optional' }, { MandatoryId: 2, Selectable : false, MandatoryName: 'Mandatory' }], ['MandatoryName', 'FieldName'], true, true, null);
KendoHierarchicalDataSource($('#a-field-treeview'),@Html.Raw(Json.Encode(@ViewBag.fields.Data)), ['MandatoryName', 'FieldName'], true, true, onLoadCopyNode);
onCheckCopyNode($('#a-field-treeview').data('kendoTreeView'), $('#s-field-treeview').data('kendoTreeView'));
});

</script>

The code above inserts the checked sub-node to the corresponding root node of the target treeview; this is removed when I uncheck the source sub-node, the troubles comes when I try it add again because the target treeview doesn't refresh, then I need check another source sub-node for the change event to be fired

TreeView

answered on 10 Jun 2016

4 answers

1.1K+ views

Add New Record button in grouped items in KendoGrid

Hi,
As I mentioned I want to add "Add New Record " toolbar or button which adds a new row in grouped sections of Kendo grid, I have grouped items as individual sections in kendo grid as below

$(function () {
var data1 = [{ ProgramName: "testing", Businesssegment: "test", deliveryQuater: "FY10" }, { ProgramName: "testing", Businesssegment: "test2", deliveryQuater: "FY11" },
{ ProgramName: "testing1", Businesssegment: "test3", deliveryQuater: "FY10" }, { ProgramName: "testing1", Businesssegment: "test4", deliveryQuater: "FY11" },
{ ProgramName: "testing2", Businesssegment: "test3", deliveryQuater: "FY10" }, { ProgramName: "testing2", Businesssegment: "test4", deliveryQuater: "FY11" }];

$("#body").kendoGrid({
dataSource: {
data: data1,
group: { field: "ProgramName" }

},
resizable: true,
columns: [
{
title: "Friendly Name", field: "Businesssegment", width: 50
},
{
title: "Url", field: "deliveryQuater", width: 50
},

{ command: ["edit", "destroy"], title: " ", width: "172px" },

],
editable: "inline",
toolbar:["create"],
scrollable:true,
height: 820
});

});

When I add toolbar:["create"] property it adds as toolbar at the top of the grid but I need the same for each section which is grouped in the grid.

Attached the current grid after implementing above code and expected grids ,Please help how to achieve the expected grid.Please ignore template.png

Grid

answered on 10 Jun 2016