When the labels' template is not defined, there is an explicit serialization like:
template:"#= dataItem.<data_bound_property> #"
which is in a collision with the DataFormatString property.
Sample code:
ASPX:
<telerik:RadHtmlChart runat="server" ID="Chart">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="Total" Name="Total">
<LabelsAppearance DataField="Total" DataFormatString="$#,##0.00">
</LabelsAppearance>
</telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
Chart.DataSource = GetData();
Chart.DataBind();
}
private DataTable GetData()
{
DataTable table = new DataTable();
table.Columns.Add(new DataColumn("Total", typeof(long)));
table.Rows.Add(new object[] { 10000000 });
table.Rows.Add(new object[] { 10000000 });
table.Rows.Add(new object[] { 10000000 });
return table;
}
The workaround is to set the ClientTemplate and remove the DataFormatString property or override the template on the client-side:
<script type="text/javascript">
function pageLoad() {
var chart = $find("Chart");
var widget = chart.get_kendoWidget();
widget.options.series[0].labels.template = null;
chart.repaint();
}
</script>
There is a JS error thrown in IE8 when the SlidingPanes are loaded. The error message is "Invalid procedure call or argument".
Drag and drop functionality works great. But when i drag and drop email from outlook into kendo upload control, it was unable to read it. Any solution? appreciate your help. Thanks, Sundeep.
Why not develop a wrapper for the kendoui library like the ext.net libraries do with Sencha ext js?
When a table is created through the table wizard and a background image is set to one of the cells, saving and closing the Editor in SP2010 causes the background image to be stripped.
When the VisibleControls property of FileExplorer is set to "Grid" and the InitialPath value is pointing to a specific file, the file is not selected on page load.
The following code snippet can be used to prevent this behavior:
<telerik:RadEditor ID="RadEditor1" runat="server">
</telerik:RadEditor>
<script type="text/javascript">
(function (Editor) {
var setCursor = Editor.Selection.prototype._setCursor;
if (setCursor) {
Editor.Selection.prototype._setCursor = function (node, range) {
return Editor.Utils.isTag(node, "img") ?
this._setCursorAfterNode(node, range) : setCursor.call(this, node, range);
};
}
})(Telerik.Web.UI.Editor);
</script>
Markup to reproduce the issue:
<telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Design" RenderMode="Lightweight">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Bold" />
<telerik:EditorTool Name="Italic" />
<telerik:EditorTool Name="Underline" />
</telerik:EditorToolGroup>
</Tools>
<Content>
<p>test</p>
<p>test</p>
</Content>
</telerik:RadEditor>
Resolution:
<script type="text/javascript">
(function ($UI) {
$UI.SizerLightweight.prototype._calcUiHeight = function () {
var that = this,
view = that._view,
editor = that.editor,
calculator = new $UI.DimensionsCalculator(editor),
toolBarContainer = view.toolBarContainer(),
toolBarHeight = that._getComponentHeight(toolBarContainer),
paddings = calculator.getComputedSizes(editor.get_element(), ["padding-top", "padding-bottom"]),
margins = calculator.getComputedSizes(toolBarContainer, ["margin-bottom"]),
borders = calculator.getComputedSizes(view.contentAreaContainer(), ["border-top-width", "border-bottom-width"]),
modesHeight = that._getComponentHeight(view.modesRowContainer()),
modulesHeight = that._getComponentHeight(view.modulesContainer());
return toolBarHeight + modesHeight + modulesHeight + margins + borders + paddings;
}
})(Telerik.Web.UI.Editor.UI);
</script>
Steps to reproduce:
Use the following markup and click set html button:
<telerik:RadEditor ID="RadEditor1" runat="server" NewLineMode="Div">
<Content>
<div><span style="font-family: 'Courier New';">test</span></div>
<div><span style="font-family: 'Courier New';"> </span></div>
<div><span style="font-family: 'Courier New';">test</span></div>
</Content>
</telerik:RadEditor>
<button type="button" onclick="getSetHtml();return false;">set html</button>
<script>
function getSetHtml() {
var editor = $find("RadEditor1");
var html = editor.get_html(true);
editor.set_html(html);
}
</script>
Actual: The white space character in the empty line is removed and the empty line is not rendered
Expected: The space is not removed and the new line is rendered
Workaround:
<script>
(function ($E) {
var utils = $E.Utils;
Telerik.Web.UI.Editor.TrackerBase.prototype.removeZeroWidthNodes =
function () {
var that = this,
nodes = that.nodes,
reZeroWidthChar = new RegExp("^[" + that._zeroWidthCharacter + "]+$");
var nodeValuePairs = that.nodeValuePairs = [];
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (utils.isTextNode(node) && !that._isNodeRemoved(node)) {
var nodeValue = node.nodeValue;
if (reZeroWidthChar.test(nodeValue)) {
nodeValuePairs.push({ node: node, value: node.nodeValue });
var parentBlockElement = utils.getBlockParent(node);
var isInEmptyBlockElement = parentBlockElement && utils.isNodeEmptyRecursive(parentBlockElement);
node.nodeValue = isInEmptyBlockElement ? "\u00A0" : "";
}
else {
that.removeFirstZeroWidthChar(node);
}
}
}
}
})(Telerik.Web.UI.Editor);
</script>