or
3 answers
157 views
Hi,
I have version Kendo UI Professional Q1 2016 and was hoping to find and example for a memo style popup editor. Could you provide link or document how to accomplish this task. I see demos for date and combo boxes but not memo fields.
TIA
John
Dimiter Topalov
Telerik team
answered
on
04 May 2016
1 answer
274 views
I have a tree view and a grid view. I am dragging item from grid and dropping it to a selected node in my treeview, which is working great. Also I allow dragging and dropping of node with the tree. However if by accident I drag an element from treeview and drop it to grid view I get an exception "Uncaught TypeError: Cannot read property 'loaded' of undefined"
and my page froze.
How can I prevent droping any element in my grid view and avoid this exception?
//Bind data to Employee grid $("#employeesGrid").kendoGrid({ dataSource: $scope.datasourceEmployees, height: 660, dragAndDrop: false, sortable: true, pageable: true, selectable: 'row', filterable: { mode: "row" }, pageable: { refresh: true, pageSizes: true, buttonCount: 7 }, columns: [ { field: "EmployeeKey", title: "Employee Key", filterable: false, width: 100 }, { field: "FullName", title: "Employee Full Name", filterable: { cell: { showOperators: false } }, width: 200 }, { field: "JDEEmployeeName", title: "JDE Employee Name", filterable: { cell: { showOperators: false } }, width: 140 }, { field: "SFEmployeeName", title: "SF Employee Name", filterable: { cell: { showOperators: false } }, width: 140 } ] }); $("#employeesGrid").kendoDraggable({ filter: "tr:not(.k-filter-row)", //specify which items will be draggable hint: function (element) { //create a UI hint, the `element` argument is the dragged item employeeDragged = 1; console.log(employeeDragged); return element.clone().css({ "opacity": 0.6, "background-color": "#0cf" }); } });
PayrollHierarchyService.getCommunities().then( function (results) { $scope.dsCommunity = results; GenerateDefaultJSONData(); tvComunity = $("#treeview-Community").kendoTreeView({ dataSource: $scope.dsCommunityRolesDefault, dragAndDrop: true, dataTextField: "text", loadOnDemand: false, drop: onDrop }).data("kendoTreeView"); }, function (error) { console.log(error.statusText); alertNotification.show("Can not Connect to the Database!", "error"); } ); //Drag and Drop element within a tree (ie Copy, paste node within tree) function onDrop(e) { e.preventDefault(); var sourceItem = this.dataItem(e.sourceNode).toJSON(); var destinationNode = $(e.destinationNode); var treevcomunity = $('#treeview-Community').data('kendoTreeView'); treevcomunity.append(sourceItem, destinationNode); } //Drag and add Employee elements to community treeview $("#treeview-Community").kendoDropTarget({ drop: function (e) { if (employeeDragged) { employeeDragged = 0; var draggableElement = e.draggable.currentTarget, dataItem = $scope.datasourceEmployees.getByUid(draggableElement.data("uid")); var treevcomunity = $('#treeview-Community').data('kendoTreeView'); var selectedNodeComunity = treevcomunity.select(); if (selectedNodeComunity.length != 0 && treevcomunity.parent(selectedNodeComunity).length != 0) { if (dataItem === undefined || dataItem === null) { } else treevcomunity.append({ text: dataItem.FullName }, selectedNodeComunity); } else alertNotification.show("Please select a Community Role first", "error"); } } });
Dimiter Topalov
Telerik team
answered
on
04 May 2016
3 answers
2.0K+ views
"transparent" or "" or "Transparent" do not work, result is solid white background This will only take a hex color string, will not accept an rgba string. I need a transparent background for all my charts.
function createChart() {
$("#detail-chart").kendoChart({
theme: "Material",
chartArea: {background:"transparent", height:300},
title: {
position: "top",
text: "Sales Percentage \n Per Market",
color: "#868686"
},
legend: {
visible: true,
position: "bottom",
labels: {
color: "#868686",
padding: {right:10,bottom:2},
margin: {right:14}
}
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "Sales Percentage",
data: [40, 32, 61],
color: "#425968"
}, {
name: "Total Local Market",
data: [100, 100, 100],
color: "#c3c3c3"
}],
valueAxis: {
max: 100,
majorUnit: 50,
line: {visible: false},
minorGridLines: {visible: false},
labels: {
format:"{0:n0}%",
color: "#525252"
}
},
categoryAxis: {
categories: ["African American", "Hispanic", "Asian American"],
majorGridLines: {visible: false},
labels: {
color: "#525252"
}
},
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%",
font: "20px"
}
});
}
Iliana Dyankova
Telerik team
answered
on
04 May 2016
3 answers
134 views
I'm having a series of graphs in which the dates that are displaying in x-axis appear to be tightly packed.Is there any solution to compromise the appearance of dates so that the graph looks clear and readable.
Please refer to the screen shot.
7 answers
1.3K+ views
Hi,
I have a serious issue with odata requests and an authentication header I have to set - it just is not working! Here is the transport part of my datasource definition (done inside the grid configuration:
If I remove the line saying "type = odata", then the header is correctly set (of course, the request is not delivering useful data then...). If I add the line, the "beforeSend" part is executed, but the header is not set in the request.
Could this be a bug?
Best regards,
Gheorghe
I have a serious issue with odata requests and an authentication header I have to set - it just is not working! Here is the transport part of my datasource definition (done inside the grid configuration:
transport: { type: "odata", read: { url: "http://........", beforeSend: function (xhr) { var auth = 'Bearer ' + token; xhr.setRequestHeader('Authorization', auth); } }, },If I remove the line saying "type = odata", then the header is correctly set (of course, the request is not delivering useful data then...). If I add the line, the "beforeSend" part is executed, but the header is not set in the request.
Could this be a bug?
Best regards,
Gheorghe
Rosen
Telerik team
answered
on
04 May 2016
3 answers
963 views
I have the need to generate custom HTML by converting each data item returned for a given column when using Angular MVVM.
It seems that I can get the function called when it exists in the controller scope, but the HTML I return doesn't seem to be formatted in the column it just treats it as plain text.
{ "field": "note",
"title": "Notes",
width: "60%",
template: "<span ng-bind=formatNote(dataItem.note)>#= data.note# </span>"
}
$scope.formatNote = function(data) {
return data.replace(/ /g,"<p>");
};
It seems that I can get the function called when it exists in the controller scope, but the HTML I return doesn't seem to be formatted in the column it just treats it as plain text.
{ "field": "note",
"title": "Notes",
width: "60%",
template: "<span ng-bind=formatNote(dataItem.note)>#= data.note# </span>"
}
$scope.formatNote = function(data) {
return data.replace(/ /g,"<p>");
};
Nikolay Rusev
Telerik team
answered
on
04 May 2016
3 answers
183 views
Hi.
I'm validating time picker using ng-pattern with 24 hours format. it is working on key events,but on selection of time picker drop down.
Find the DOJO and the screenshot.
Appreciate your support on this.
Georgi Krustev
Telerik team
answered
on
04 May 2016
1 answer
116 views
I have a Kendo scheduler that contains a Custom editor template for the add/edit item form.
The form contains radio buttons.
<fieldset>
<label><input type="radio" name="use_oib_framework_nb" value="1" required="required" data-bind="checked:use_oib_framework_nb" onClick="javascript:toggleExtContFields('none');" /> #getResource("template.yes")#</label>
<label><input type="radio" name="use_oib_framework_nb" value="0" required="required" data-bind="checked:use_oib_framework_nb" onClick="javascript:toggleExtContFields('block');" /> #getResource("template.no")#</label>
</fieldset>
When one of these radio buttons is clicked, it runs a very simple Javascript...
function toggleExtContFields(property) {
document.getElementById('extContFields').style.display = property;
}
...which shows or hides a div.
<div style="display:none;" id="extContFields">[content]</div>
However, when the Custom editor template launches, I need to run the function passing it the current value of the use_oib_framework_nb radio buttons so it knows whether to make the div visible or not. Something like, "on popup window launch, look at the value of use_oib_framework_nb and run the function toggleExtContFields()".
How do I do that?
The form contains radio buttons.
<fieldset>
<label><input type="radio" name="use_oib_framework_nb" value="1" required="required" data-bind="checked:use_oib_framework_nb" onClick="javascript:toggleExtContFields('none');" /> #getResource("template.yes")#</label>
<label><input type="radio" name="use_oib_framework_nb" value="0" required="required" data-bind="checked:use_oib_framework_nb" onClick="javascript:toggleExtContFields('block');" /> #getResource("template.no")#</label>
</fieldset>
When one of these radio buttons is clicked, it runs a very simple Javascript...
function toggleExtContFields(property) {
document.getElementById('extContFields').style.display = property;
}
...which shows or hides a div.
<div style="display:none;" id="extContFields">[content]</div>
However, when the Custom editor template launches, I need to run the function passing it the current value of the use_oib_framework_nb radio buttons so it knows whether to make the div visible or not. Something like, "on popup window launch, look at the value of use_oib_framework_nb and run the function toggleExtContFields()".
How do I do that?
3 answers
185 views
I've noticed that when the user performs a 'cut' operation to a row, the spreadsheet's Change event is fired. However, there doesn't appear to be a way to determine that the range was actually cut - or am I missing something?
Also, when a row deletion happens, the change event isn't fired at all. This is presenting a problem for me as I have a set of related data on the page that needs to reflect changes as the user modifies the spreadsheet. Is there a way to effectively catch row deletions?
Alex Gyoshev
Telerik team
answered
on
04 May 2016
1 answer
237 views
Hello,
I have an autocomplete. It has filtering event handler to prevent data loading when there are less than 3 characters typed by the user. Sometimes, when I type the 3 characters very fast, popup with no items is shown. When I type the 4th character, the items appear.
The data are loaded from the remote server, so I would say that the problem is caused by a late response from the server. But I don't know why the popup doesn't show the items after it receives the response. Or is there a way to display the popup programatically?
This is the code that creates the autocomplete:
$("#institution").kendoAutoComplete({ delay: 0, template: "<span id='accountname'>#:name#</span><span id='accountid' style='display:none'>#:id#</span>", filtering: function (e) { var filter = e.filter; if (!filter.value || filter.value.length < 3) { //prevent filtering if the filter is an empty string, or if the value is too short, so it would have to load many items e.preventDefault(); this.close(); } else { this.dataSource.options.transport.read.data.fetchxml = "<fetch mapping='logical'> <entity name='account'> <order attribute='name'/> <filter> <condition attribute='name' value='" + $("#institution").val() + "%' operator='like' /> <condition attribute='statecode' value='0' operator='eq'/> </filter> </entity> </fetch>"; this.dataSource.read(); } } });Thanks for your answers.
Boris
Georgi Krustev
Telerik team
answered
on
04 May 2016
