or
4 answers
98 views
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?
Alexander Popov
Telerik team
answered
on
10 Jun 2016
1 answer
999 views
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>
Dimiter Madjarov
Telerik team
answered
on
10 Jun 2016
5 answers
284 views
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"
]
});
Misho
Telerik team
answered
on
10 Jun 2016
1 answer
116 views
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.
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.
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.
Misho
Telerik team
answered
on
10 Jun 2016
1 answer
95 views
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.
Dimiter Madjarov
Telerik team
answered
on
10 Jun 2016
1 answer
508 views
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!
Dimiter Madjarov
Telerik team
answered
on
10 Jun 2016
1 answer
115 views
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
Petyo
Telerik team
answered
on
10 Jun 2016
2 answers
182 views
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:
<script>
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
Alex Gyoshev
Telerik team
answered
on
10 Jun 2016
4 answers
1.0K+ views
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
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
Vladimir Iliev
Telerik team
answered
on
10 Jun 2016
1 answer
584 views
I test simple chart example with below data. it contains one DATE typed data and two NUMBER typed data. actually I make a chart with DATE category and NUMBER value :
<DATA : data_small.json>
[
{
"START_DATE": "2011-11-02T00:00:00",
"USE_PERCENTAGE": 38,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 32400
},
{
"START_DATE": "2011-11-03T00:00:00",
"USE_PERCENTAGE": 75,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 64800
},
{
"START_DATE": "2011-11-04T00:00:00",
"USE_PERCENTAGE": 71,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 61200
},
{
"START_DATE": "2011-11-05T00:00:00",
"USE_PERCENTAGE": 72,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-10T00:00:00",
"USE_PERCENTAGE": 60,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-15T00:00:00",
"USE_PERCENTAGE": 90,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 77400
},
{
"START_DATE": "2011-11-20T00:00:00",
"USE_PERCENTAGE": 61,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 52200
},
{
"START_DATE": "2011-11-02T00:00:00",
"USE_PERCENTAGE": 49,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-03T00:00:00",
"USE_PERCENTAGE": 24,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 20400
},
{
"START_DATE": "2011-11-04T00:00:00",
"USE_PERCENTAGE": 18,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 15000
},
{
"START_DATE": "2011-11-05T00:00:00",
"USE_PERCENTAGE": 30,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-10T00:00:00",
"USE_PERCENTAGE": 85,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-15T00:00:00",
"USE_PERCENTAGE": 14,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 12000
},
{
"START_DATE": "2011-11-20T00:00:00",
"USE_PERCENTAGE": 18,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 15000
}
]
with codes below, I get the result like "reslut1". I didnt set categoryAxis.type. the result is : chart shows every DATE category data but without formatting it.
actually I like it. because this is matchs with my indend. but I want DATE category should be formatted.
<CODE1>
<script>
function makeBody() {
$.ajax({
type: 'GET',
dataType: 'json',
url: './data_small.json',
success: function (data) {
var chartData = data;
var chart = $("#chart").data("kendoChart");
var chartDataSource = chart.dataSource;
chartDataSource.data(chartData);
},
error : function(a, b, c){
console.log("error a:" + a +" b:" + b + " c:"+ c);
}
});
}
function makeChart() {
var stocksDataSource = new kendo.data.DataSource({
group: {
field: "RESOURCE_ID"
},
sort: {
field: "START_DATE",
dir: "asc"
},
schema: {
model: {
fields: {
START_DATE: {
type: "date"
}
}
}
}
});
function createChart() {
$("#chart").kendoChart({
title: { text: "Test chart" },
dataSource: stocksDataSource,
series: [{
type: "line",
field: "USE_PERCENTAGE"
}],
legend: {
position: "bottom"
},
categoryAxis: {
field: "START_DATE",
crosshair: {
visible: true
},
// type: "date",
labels: {
rotation: "auto",
format: "yyyy-MM-dd" // 날짜 형식
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
}
makeChart();
makeBody();
</script>
after this, I tried with 'type: "date",' (which is commented in above code) .(result2) I hope I get the same result with the result1 but DATE category is formatted well. but I find there are some more data than my original data. I think kendo makes some additional data with 'type=date'. am I right?
then how can I get the result like 'result1 with formatted DATE category'?
thanks in advance.
Iliana Dyankova
Telerik team
answered
on
10 Jun 2016
