I'm evaluating the Kendo UI Gantt chart to see if it fits our project requirements.One particular requirement is to display a status column which would be a drop down in edit mode and has three statusesRed 2. Green 3. Yellow, along with an image indicator something like what is shown in the image1 below
I am able to achieve the above effect when i edit a cell after using a custom editor for the drop down
function
statusDropDownEditor(container, options) {
$(
'<input data-bind="value:'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoDropDownList({
dataTextField:
"Status"
,
dataValueField:
"StatusId"
,
valueTemplate:
'<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>'
,
template:
'<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>'
,
dataSource: {
transport: {
read:
function
(e) {
// on success
e.success([{ Status:
'Not Started'
, StatusId:
'0'
, Url:
'Image/red.png'
}, { Status:
'Red'
, StatusId:
'1'
, Url:
'Image/red.png'
}, { Status:
'Green'
, StatusId:
'2'
, Url:
'Image/red.png'
}, { Status:
'Yellow'
, StatusId:
'3'
, Url:
'Image/red.png'
}]);
// on failure
//e.error("XHR response", "status code", "error message");
}
}
}
})
}
The Gantt Column for Status looks like the below snippet
{ field:
"status"
, title:
"Status"
, editable:
true
, width: 150, editor: statusDropDownEditor, template:
'<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>'
}
However when done with selecting a particular item from drop down and on exiting the edit mode this is how the cell looks like(image2)
Seems like the default cell template in read only mode does not render html and the invokes the toString of the object bound to the cell, is there a way to fix this in the kendo UI Gantt
I am needing to set the code behind TooltipAppearance DataFormatString.
I have not had much success with the documentation, I am hoping someone else has had a similar issue.
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"RadHtmlChart1"
Height
=
"400px"
Width
=
"480px"
CssClass
=
"fb-sized"
OnPreRender
=
"RadHtmlChart1_PreRender"
>
<
PlotArea
>
<
Series
>
<
telerik:PieSeries
DataFieldY
=
"TypeCount"
ExplodeField
=
"IsExploded"
NameField
=
"Area"
>
<
LabelsAppearance
DataFormatString
=
"{0}"
>
</
LabelsAppearance
>
<
TooltipsAppearance
Color
=
"White"
>
<
ClientTemplate
>
#=dataItem.Area#<
br
/>#=dataItem.TypeCount#
</
ClientTemplate
>
</
TooltipsAppearance
>
</
telerik:PieSeries
>
</
Series
>
</
PlotArea
>
</
telerik:RadHtmlChart
>
public
void
buildChart()
{
PieSeries pieSeries1 =
new
PieSeries();
pieSeries1.Name =
"Chart"
;
pieSeries1.LabelsAppearance.Visible =
false
;
pieSeries1.TooltipsAppearance.Color = System.Drawing.Color.White;
pieSeries1.TooltipsAppearance.DataFormatString =
"???????????"
;
// What I need in the template is the series name and then the value somethin like this: #=dataItem.Name#<br />#=dataItem.Valu#
pieSeries1.SeriesItems.Add(10, Color.Yellow,
"Student"
);
pieSeries1.SeriesItems[0].Visible =
false
;
pieSeries1.SeriesItems.Add(20, Color.Red,
"Staff"
);
pieSeries1.SeriesItems.Add(50, Color.Green,
"Room"
);
pieSeries1.SeriesItems.Add(20, Color.Purple,
"Transfer"
);
RadHtmlChart1.PlotArea.Series.Add(pieSeries1);
}
protected
void
Page_Load(
object
sender, EventArgs e)
{
buildChart();
}
<
rad:GridTemplateColumn HeaderText="Billed">
<EditItemTemplate>
<asp:TextBox ID="tbBilled" runat="server" Text='<%# Bind("Billed", "{0:MM/dd/yyyy}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblBilled" runat="server" Text='<%# Bind("Billed", "{0:MM/dd/yyyy}") %>'></asp:Label>
</ItemTemplate>
</rad:GridTemplateColumn>
Please give some detail on the implementation.
Thanks.
Stanley
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PinList.aspx.cs" Inherits="PinList" | |
MasterPageFile="~/Admin/Masterpages/AdminPageWithMenu.master" Theme="MillenniumAdmin" | |
Title="PIN List" %> | |
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> | |
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> | |
<script type="text/javascript"> | |
function OpenRadWindowCreateNewPins() | |
{ | |
var oWindow = radopen("Popups/NewPIN.aspx", null); | |
oWindow.op | |
oWindow.SetSize(600, 520); | |
} | |
//Reloads PIN Grid | |
function OnClientClose(radWindow) | |
{ | |
location.reload(); | |
} | |
</script> | |
</asp:Content> | |
<asp:Content ID="Content2" ContentPlaceHolderID="PageTitle" runat="Server"> | |
PIN List | |
</asp:Content> | |
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> | |
<telerik:RadWindowManager ID="winMgr" Skin="Outlook" Behaviors="Close, Move, Resize" | |
Modal="true" VisibleStatusbar="false" runat="server" Width="520px" Height="450px" | |
OnClientClose="OnClientClose"> | |
</telerik:RadWindowManager> | |
<asp:Label ID="Message" runat="server" EnableViewState="false"></asp:Label> | |
<telerik:RadGrid ID="PinGrid" runat="server" AutoGenerateColumns="false" AllowAutomaticDeletes="false" | |
AllowAutomaticInserts="false" AllowAutomaticUpdates="false" ShowStatusBar="true" | |
AllowMultiRowSelection="false" AllowPaging="true" PageSize="30" OnNeedDataSource="PinGrid_NeedDataSource" | |
OnItemCreated="PinGrid_ItemCreated" AllowFilteringByColumn="true" OnPreRender="PinGrid_PreRender" | |
OnItemCommand="PinGrid_ItemCommand" Width="90%"> | |
<ExportSettings> | |
<Excel Format="ExcelML" /> | |
</ExportSettings> | |
<MasterTableView AllowNaturalSort="false" CommandItemDisplay="Top" DataKeyNames="PINID" | |
AutoGenerateColumns="false" AllowSorting="true"> | |
<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle> | |
<CommandItemTemplate> | |
<asp:LinkButton ID="lnlRebind" runat="server" OnClientClick="javascript:location.reload()" | |
CommandName="RebindGrid" Visible='true'><img class="middle" alt="" src="../Images/Telerik/Refresh.gif" /> Refresh</asp:LinkButton> | |
<asp:HyperLink NavigateUrl="#" ID="GenerateNewPins" runat="server" Visible='<%# NewMillennium.Authorization.UserHasPermission(NewMillennium.FunctionalityName.CreateEditReps) %>' | |
onclick="OpenRadWindowCreateNewPins();return false;"><img class="middle" alt="" src="../Images/Telerik/new.gif" /> | |
Generate New PINs</asp:HyperLink> | |
<asp:LinkButton ID="lnlExportToExcel" runat="server" OnClick="ExportToExcelClick" | |
Visible='true'><img class="middle" alt="" src="../Images/Telerik/excel.gif" /> Export</asp:LinkButton> | |
| |
</CommandItemTemplate> | |
<Columns> | |
<telerik:GridBoundColumn HeaderText="PinID" DataField="PINID" UniqueName="PINID" | |
SortExpression="PINID" ReadOnly="true" Visible="false"> | |
</telerik:GridBoundColumn> | |
<telerik:GridBoundColumn DataField="DateCreated" HeaderText="Date Generated" SortExpression="DateCreated" | |
CurrentFilterFunction="Between" AutoPostBackOnFilter="true" UniqueName="DateCreated" | |
DataFormatString="{0:M/d/yyyy}" AllowFiltering="false"> | |
</telerik:GridBoundColumn> | |
<telerik:GridBoundColumn HeaderText="PIN" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" | |
DataField="PIN" UniqueName="PIN" SortExpression="PIN" ReadOnly="true" Visible="true"> | |
</telerik:GridBoundColumn> | |
<telerik:GridBoundColumn HeaderText="Program" CurrentFilterFunction="StartsWith" | |
AutoPostBackOnFilter="true" DataField="ProjectName" UniqueName="ProjectName" | |
SortExpression="ProjectName" DataType="System.String" ReadOnly="true" Visible="true"> | |
</telerik:GridBoundColumn> | |
<telerik:GridBoundColumn HeaderText="Rep First Name" CurrentFilterFunction="StartsWith" | |
AutoPostBackOnFilter="true" DataField="RepFirstName" UniqueName="RepFirstName" | |
SortExpression="RepFirstName" DataType="System.String" ReadOnly="true" Visible="true"> | |
</telerik:GridBoundColumn> | |
<telerik:GridBoundColumn HeaderText="Rep Last Name" CurrentFilterFunction="StartsWith" | |
AutoPostBackOnFilter="true" DataField="RepLastName" UniqueName="RepLastName" | |
SortExpression="RepLastName" DataType="System.String" ReadOnly="true" Visible="true"> | |
</telerik:GridBoundColumn> | |
<telerik:GridBoundColumn HeaderText="Territory Name" CurrentFilterFunction="StartsWith" | |
AutoPostBackOnFilter="true" DataField="TerritoryName" UniqueName="TerritoryName" | |
SortExpression="TerritoryName" ReadOnly="true" Visible="true"> | |
</telerik:GridBoundColumn> | |
<telerik:GridBoundColumn HeaderText="Used" AutoPostBackOnFilter="true" DataField="UsedString" | |
UniqueName="Used" SortExpression="UsedString" ReadOnly="true" Visible="true"> | |
</telerik:GridBoundColumn> | |
<telerik:GridBoundColumn DataField="OrderDate" HeaderText="Date Used" SortExpression="OrderDate" | |
CurrentFilterFunction="Between" AutoPostBackOnFilter="true" UniqueName="OrderDate" | |
DataFormatString="{0:M/d/yyyy}" AllowFiltering="false"> | |
</telerik:GridBoundColumn> | |
</Columns> | |
</MasterTableView> | |
</telerik:RadGrid> | |
</asp:Content> | |
using System; | |
using System.Collections; | |
using System.Collections.Generic; | |
using System.Configuration; | |
using System.Data; | |
using System.Data.SqlClient; | |
using System.Web; | |
using System.Web.Security; | |
using System.Web.UI; | |
using System.Web.UI.HtmlControls; | |
using System.Web.UI.WebControls; | |
using NewMillennium; | |
using Telerik.Web.UI; | |
public partial class PinList : MillenniumPage | |
{ | |
protected void Page_Load(object sender, EventArgs e) | |
{ | |
if (!Authorization.UserHasPermission(FunctionalityName.ViewRepList)) FormsAuthentication.RedirectToLoginPage(); | |
Common.SetGridSkin(PinGrid); | |
} | |
protected void PinGrid_PreRender(object sender, EventArgs e) | |
{ | |
} | |
/// <summary> | |
/// | |
/// </summary> | |
protected void PinGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e) | |
{ | |
PinGrid.DataSource = PinData.GetPinList(); | |
Common.HideExtraFilterOptions(PinGrid); | |
} | |
protected void PinGrid_ItemCreated(object sender, GridItemEventArgs e) | |
{ | |
Common.HideFilterButtonsForNewVersion(PinGrid, e.Item); | |
} | |
protected void ExportToExcelClick(object sender, EventArgs e) | |
{ | |
string filename = "PinExport-" + DateTime.Now.ToLongDateString().Trim().Replace(" ", "-").Replace(",", ""); | |
this.PinGrid.ExportSettings.FileName = filename; | |
this.PinGrid.ExportSettings.OpenInNewWindow = true; | |
this.PinGrid.ExportSettings.ExportOnlyData = true; | |
this.PinGrid.ExportSettings.IgnorePaging = true; | |
foreach (GridItem commandItem in this.PinGrid.MasterTableView.GetItems(GridItemType.CommandItem)) | |
{ | |
commandItem.Visible = false; | |
} | |
this.PinGrid.MasterTableView.ExportToExcel(); | |
} | |
protected void PinGrid_ItemCommand(object sender, GridCommandEventArgs e) | |
{ | |
if (e.CommandName == RadGrid.FilterCommandName && e.Item is GridFilteringItem) | |
{ | |
} | |
} | |
protected void DisplayMessage(string message, string cssClass) | |
{ | |
Message.Text = message; | |
Message.CssClass = cssClass; | |
} | |
} | |
Hi,
I have the following function inserted in my RichText Commands.js file:
RadEditorCommandList["InsertAccordion"] = function (commandName, editor, args) {
var selectedHtml = editor.getSelectionHtml();
var newHtml = "<div class=\"accordion-rte\">" + selectedHtml + "</div>";
editor.pasteHtml(newHtml);
};
It should wrap the selected content in a <div> with the css class "accordion-rte".
Simply enough I thought... But when I have a text like:
<h2>Heading 2</h2>
<p>Some text</p>
<p>Heading 2.1</p>
<p>put some text here for paragraph 2.1</p>
<p>Heading 2.2</p>
<p>put some text here for paragraph 2.2</p>
<p>Some other text</p>
<p> </p>
and I select in design mode the text from "Heading 2.1" to "put some text here for paragraph 2.2" and then exucute my script the result is:
<h2>Heading 2</h2>
<p>Some text</p>
<p>Heading 2.1</p>
<p>put some text here for paragraph 2.1</p>
<p>Heading 2.2</p>
<p>put some text here for paragraph 2.2</p>
<p>
<div class="accordion-rte"> </div>
</p>
<p>Some other text</p>
<p> </p>
while debugging I see the newHtml variable is containing the right value. It got messed up somewhere in the pasteHtml function.
Does anyone has a clue what's going wrong? and how I can get it to work?
Much appreciated,
Peter
Hi
I'm trying to bind a RadMap to some JSON returned from an ASPX page.
<
script
>
function TestGetMap()
{
var shapeData = "";
$.ajax({
type: "GET",
url: "/Data/GetJsonTrip.aspx",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
shapeData = JSON.stringify(msg);
var ds = new kendo.data.DataSource(shapeData);
var kendoMap = $telerik.$("#<%=tripMap.ClientID %>").data("kendoMap");
kendoMap.layers[1].dataSource = ds;
}
});
}
</
script
>
I've tried setting the datasource to msg instead of the string version, tried different layers, etc.
My map looks like this
<
telerik:RadMap
runat
=
"server"
ID
=
"tripMap"
>
<
LayersCollection
>
<
telerik:MapLayer
></
telerik:MapLayer
>
<
telerik:MapLayer
Type
=
"Shape"
Opacity
=
"0.7"
>
<
StyleSettings
>
<
StrokeSettings
Color
=
"#ffffff"
Width
=
"10"
/>
</
StyleSettings
>
</
telerik:MapLayer
>
</
LayersCollection
>
<
CenterSettings
Latitude
=
"-32.962926"
Longitude
=
"151.699727"
/>
</
telerik:RadMap
>
I'm setting the first map layer in code to bing
MapLayer mapLayer = tripMap.LayersCollection[0];
mapLayer.Type = Telerik.Web.UI.Map.LayerType.Bing;
mapLayer.ImagerySet =
"AerialWithLabels"
;
I confirmed that I'm getting back valid geojson from the aspx page.
I'm not getting any javascript errors in the console.
What I don't understand is: How in a click event in javascript can I set the dataource for a shapes layer of a radmap?
Thanks
Matt
Hi, I'm testing the diagram component for my app, I'm porting a desktop app that uses Dataweb's diagramming library.
How do I retrieve an existing connection object since it does not have an element ID?
This is what I need:
var connection = diagram.getConnection(params);
Thanks!
David
<telerik:RadToolBar ID="Toolbar" runat="server" OnButtonClick="ToolBar_ButtonClick"> |
<Items> |
<telerik:RadToolBarDropDown Text="Z" ToolTip="Z"> |
<Buttons> |
<telerik:RadToolBarButton Value="A" Text="A" /> |
<telerik:RadToolBarButton Value="B" Text="B" /> |
<telerik:RadToolBarButton Value="C" Text="C" /> |
</Buttons> |
</telerik:RadToolBarDropDown> |
<telerik:RadToolBarDropDown Text="Y" ToolTip="Y"> |
<Buttons> |
... |
</Buttons> |
</telerik:RadToolBarDropDown> |
<telerik:RadToolBarDropDown Text="X" ToolTip="X"> |
<Buttons> |
... |
</Buttons> |
</telerik:RadToolBarDropDown> </telerik:RadToolBar> |