Questions on UI for ASP.NET AJAX Forum

3 answers

250 views

Two errors in the Editor Image Manager when working w/ 3rd party images

Hey guys we are running into two issues with the image manager and images hosted on external sites. I've put together a demo video here that clearly shows both issues, but i will also write it out for others who come upon this post.

http://images.publicaster.com/ImageLibrary/Account116/Documents/ImageManagerIssue.mp4

For this demonstration, i'm using the latest version of the Telerik Ajax controls, v2013.3.1324.40, and i do specify a reference to the Editor Dialogs in my control declaration.

1.<telerik:RadEditor ID="EMailContentEditor" runat="server" Width="95%" ContentFilters="RemoveScripts,IndentHTMLContent"

2. ConvertToXhtml="false" ConvertFontToSpan="false" ExternalDialogsPath="/EditorDialogs"

3. EditModes="Design,Html" Height="600px" OnClientCommandExecuting="OnClientCommandExecuting"

4. OnClientLoad="OnClientLoad" >

If you select an image in the editor that is hosted on a 3rd party, and then click the image manager icon in the editor, you get a message that says
"You are trying to navigate to a non-existing folder or you do not have proper permissions to view this folder. Please, contact the administrator."

As you can see from my video, the image is hosted on a 3rd party site. I would like to know how i can disable this error message.

If i click the "OK" button then the image manager loads and i can see all the images in my image library.

The second issue is that i am unable to easily replace this image that is hosted on a 3rd party site with an image from my image library. To reproduce,

1. select an image in the editor that is hosted on a 3rd party site.
2. click the image manager icon
3. click ok to dismiss the "non-existing folder" message
4. select any existing image from my image library
5. click insert button in the image library dialog

When you follow these steps, nothing happens. the original image is still in place and the image i selected from the library is nowhere to be found.

I can workaround this issue by first deleting the image hosted on a 3rd party site and then inserting a new image from the image library. This problem does not exist if i use an image that is already in my image library and replace it with an image in my image library.

Please advise how i can remedy these two issues.

Thanks
-Mark

Editor

answered on 18 Mar 2014

2 answers

98 views

[Solved] Change Font Size Text of RadImageTile

Hello.

i want to change the size on the Title of a RadImageTile, i try setting propierty Font-Size, but dont work, also try with css no lucky, also try to set the propierty Font-Bold to true but the same dont work.

how can i do that.

Thanks in advance.

General Discussions

answered on 18 Mar 2014

2 answers

268 views

Radtooltip on RadContextMenu (RadMenuItem)

Hi,

I want to add a tooltip on a RadContextMenu. This ContextMenu is displayed in a RadGrid, when we click on the red "X" (see photo in attachment).

I try this, but the tooltip is not displayed with the RadContextMenu (see code below).

I'm using the version 2013.3.1217.40
The RadGrid is in a userControl

Thank you

Steeve

<script type="text/javascript">

function showDetachMenuAt(e, marktPhotoNo) {

var contextMenu = $find("<%= RadContextMenuRemove.ClientID %>"),

x = e.clientX,

y = e.clientY;

var pos = getPos($('.chk-remove-class-' + marktPhotoNo).get(0));

x = pos[0];

y = pos[1];

if (isNaN(x) || isNaN(y)) {

return;

}

$telerik.cancelRawEvent(e);

contextMenu.showAt(x + 10, y);

}

function OnClientMouseOver(sender, args) {

var item = args.get_item();

var itemValue = item.get_value();

if (itemValue == "remove-detach") {

var tooltip = $find("<%= RadToolTip2.ClientID%>");

tooltip.set_text("<%=Resources.Photo.MsgDetachPhotoTooltip %>");

tooltip.show();

}

</script>

<telerik:RadCodeBlock ID="radCodeBlock1" runat="server">

<telerik:RadContextMenu ID="RadContextMenuRemove" runat="server" Skin="WebBlue" EnableRoundedCorners="true" EnableShadows="true"

OnClientItemClicked="onRemoveMenuClicked" OnClientMouseOver="OnClientMouseOver">

<Items>

<telerik:RadMenuItem Text="<%$Resources:Photo,DetachPhoto %>" Value="remove-detach" />

<telerik:RadMenuItem Text="<%$Resources:Photo,DeletePhoto %>" Value="remove-delete "/>

</Items>

</telerik:RadContextMenu>

<telerik:RadToolTip ID="RadToolTip2" runat="server" BackColor="LightYellow" EnableShadow="false" RelativeTo="Mouse" TargetControlID="RadContextMenuRemove" Width="300px" Position="BottomCenter" ShowDelay="0" AutoCloseDelay="3000">

</telerik:RadToolTip>

</telerik:RadCodeBlock>

...

<ItemTemplate>

...

<asp:Panel runat="server" ID="PanelInfo" runat="server" CssClass="divInfo">

<asp:Image runat="server" ID="ImageDetach" CssClass="toolbar-item detach-photo-item" title="" ImageUrl="~/Images/004_12x12.png" Width="9" Height="9"/>

</asp:Panel>

...

</ItemTemplate>

// In Code behind

private void UcRadGridOnUcRadGridItemCreated(UcRadGrid sender, GridItemEventArgs e)

{

Control panelPhoto = item.FindControl("PanelPhoto");

if (panelPhoto != null)

{

Image imageDetach = panelPhoto.FindControl("ImageDetach") as Image;

if (imageDetach != null)

{

imageDetach.Attributes["onclick"] = "showDetachMenuAt(event, " + photoInfoFs.MarktPhotoNo + ");";

}

ToolTip

answered on 18 Mar 2014

1 answer

91 views

[Solved] Google-like Filtering Tweaks

Hi All,

I've implemented the following functionality in my RadGrid:
http://www.telerik.com/help/aspnet-ajax/grid-google-like-filtering.html

It works well, but it appears to auto-fill the entire value when a user would like to select a subset. For example, if we have days of the week in the ComboBox the user would like to be able to type "sday" and get Wednesday and Thursday back. Is this at all possible?

Also is there a way to implement a IsNull and IsNotNull functionality in these RadComboBoxes?

Thanks,
Mark

Grid

answered on 18 Mar 2014

2 answers

118 views

RadGrid ChangeLog and Undo

Hi All,

I have an editable Radgrid written in C# code-behind. I'm curious if there's anyway to generate a change log of what users have inserted/updated/deleted and/or some sort of "Undo" mechanism. Can anyone please help?

Thanks,
Mark

Grid

answered on 18 Mar 2014

1 answer

129 views

Entity Framework complex types error using radgrid edit template

I have run into an issue trying to use the edit form template on a radgrid bound to an objectdatasource connected to a entity framework data model that uses complex types. It works fine when you edit an existing record but gives an error when adding a new record. Below is the code for a simple demo that I set up using a list of objects. In the below example if I edit a record it all works fine but if I add a record it throws an error "DataBinding: 'Telerik.Web.UI.GridInsertionObject' does not contain a property with the name 'person'.". Any ideas of a work around?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<telerik:RadGrid ID="grdData" runat="server"
AllowSorting="True" GridLines="Vertical" AllowPaging="True" PageSize="50"
AutoGenerateColumns="False" Width="800px" DataSourceID="odsData"
OnDeleteCommand="grdData_DeleteCommand" OnInsertCommand="grdData_InsertCommand" OnUpdateCommand="grdData_UpdateCommand" >
<MasterTableView GridLines="Vertical" CommandItemDisplay="Top" DataKeyNames="id" EditMode="PopUp">
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" ItemStyle-Width="25" />
<telerik:GridBoundColumn HeaderText="First Name" DataField="person.name" SortExpression="name" UniqueName="name" />
<telerik:GridBoundColumn HeaderText="Email" DataField="person.email" SortExpression="email" UniqueName="email" />
<telerik:GridCheckBoxColumn HeaderText="Sales Rep" DataField="salesRep" SortExpression="salesRep" UniqueName="salesRep" />
<telerik:GridButtonColumn ConfirmText="Are you sure you want to delete this item?" ConfirmDialogType="RadWindow"
ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" ItemStyle-Width="25" />
</Columns>
<EditFormSettings EditFormType="Template" >
<PopUpSettings Width="400px" Modal="true" />
<FormTemplate>
<div style="padding: 10px; text-align: left;">
<div><asp:Label ID="Label1" runat="server" Text="Name: " /></div>
<div>
<asp:TextBox ID="fldFirstName" runat="server" Text='<%# Bind("person.name") %>' Width="300" MaxLength="50" TabIndex="1" />
</div>
<div>
<asp:RequiredFieldValidator ID="valNameRequired" runat="server" ErrorMessage="Name Required" ControlToValidate="fldFirstName" />
</div>
<div><asp:Label ID="Label4" runat="server" Text="Email: " /></div>
<div>
<asp:TextBox ID="fldEMail" runat="server" Text='<%# Bind("person.email") %>' Width="300" MaxLength="50" TabIndex="3" />
</div>
<div>
<asp:RequiredFieldValidator ID="valEmailRequired" runat="server" ErrorMessage="Email Required" ControlToValidate="fldEmail" Display="dynamic" />
<asp:RegularExpressionValidator ID="valEmail" runat="server" ControlToValidate="fldEmail" ErrorMessage="Enter a valid Email" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
</div>
<div><asp:Label ID="Label6" runat="server" Text="Sales Rep: " /><asp:CheckBox ID="cbxSalesRep" runat="server" Checked='<%# Bind("salesRep") %>' /></div>
<div>
<asp:Button ID="btnSave" Text="Save" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' Width="100" TabIndex="10" />     
<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" Width="100" TabIndex="11" />
</div>
</div>
</FormTemplate>
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>
</div>
<telerik:RadWindowManager ID="RadWindowManager" runat="server" />

<asp:ObjectDataSource ID="odsData" runat="server" TypeName="UserData" SelectMethod="getUsers" DataObjectTypeName="UserData+User" />
</form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Collections;
using System.IO;
using System.Xml.Serialization;
using System.Text;
using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page
{
public UserData userData = new UserData();

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

}
}

protected void grdData_InsertCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
{
var editableItem = ((GridEditableItem)e.Item);

Hashtable values = new Hashtable();
editableItem.ExtractValues(values);
UserData.User user = new UserData.User();
user.person.name = (string)values["person.name"];
user.person.email = (string)values["person.email"];
user.salesRep = bool.Parse(values["salesRep"].ToString());
userData.updateUser(user);
}

protected void grdData_UpdateCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
{
var editableItem = ((GridEditableItem)e.Item);
var id = (int)editableItem.GetDataKeyValue("id");

UserData.User user = userData.getUserById(id);
Hashtable values = new Hashtable();
editableItem.ExtractValues(values);
user.person.name = (string)values["person.name"];
user.person.email = (string)values["person.email"];
user.salesRep = bool.Parse(values["salesRep"].ToString());
userData.updateUser(user);
}

protected void grdData_DeleteCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
{
var editableItem = ((GridEditableItem)e.Item);
var id = (int)editableItem.GetDataKeyValue("id");

userData.deleteUser(id);
}
}

public class UserData
{
List<User> userData;

public UserData()
{
if (File.Exists("c:\\temp\\testdata.xml"))
userData = XSerial.Load<List<User>>("c:\\temp\\testdata.xml");
else
{
userData = new List<User>();
userData.Add(new User(1, new Person("Fred Flintstone", "fredflintstone@gmail.com"), false));
userData.Add(new User(2, new Person("Barney Rubble", "brubble@gmail.com"), false));
userData.Add(new User(3, new Person("Mr. Slate", "mslate@slatequarry.com"), false));
saveData();
}
}

public void saveData()
{
XSerial.Save<List<User>>("c:\\temp\\testdata.xml", userData);
}

public List<User> getUsers()
{
return userData;
}

public User getUserById(int id)
{
int i = 0;
while(i < userData.Count && userData[i].id != id)
i++;
return userData[i];
}

public void insertUser(User user)
{
int nextId = 1;

int i = 0;
while (i < userData.Count && userData[i].id != user.id)
{
if (userData[i].id > nextId)
nextId = userData[i].id + 1;
i++;
}

user.id = nextId;
userData.Add(user);

XSerial.Save<List<User>>("c:\\temp\\testdata.xml", userData);
}

public void updateUser(User user)
{
int i = 0;
while (i < userData.Count && userData[i].id != user.id)
i++;

userData[i] = user;

XSerial.Save<List<User>>("c:\\temp\\testdata.xml", userData);
}

public void deleteUser(int id)
{
int i = 0;
while (i < userData.Count && userData[i].id != id)
i++;

userData.RemoveAt(i);

XSerial.Save<List<User>>("c:\\temp\\testdata.xml", userData);
}

public class Person
{
private string _name;
private string _email;

public string name
{
get { return _name; }
set { _name = value; }
}

public string email
{
get { return _email; }
set { _email = value; }
}

public Person()
{
_name = "";
_email = "";
}

public Person(string name, string email)
{
_name = name;
_email = email;
}
}

public class User
{
private int _id;
private Person _person;
private bool _salesRep;

public int id
{
get { return _id; }
set { _id = value; }
}

public Person person
{
get { return _person; }
set { _person = value; }
}

public bool salesRep
{
get { return _salesRep; }
set { _salesRep = value; }
}

public User()
{
_id = 0;
_person = new Person();
_salesRep = false;
}

public User(int id, Person person, bool salesRep)
{
_id = id;
_person = person;
_salesRep = salesRep;
}
}
}

/// <summary>
/// Serializer class. Load and Save classes from/to XML files.
/// </summary>
public class XSerial
{
/// <summary>
/// Load a class from a serialized XML file.
/// </summary>
/// <param name="filename">full path or path relative to the XML file</param>
/// <param name="t">type of the class that is being retrieved (Use typeof(ClassName))</param>
/// <returns>A populated version of the class, or null on failure</returns>
/// <exception cref="Exception">Can throw several exceptions for IO and serialization loading</exception>
public static T Load<T>(string filename)
{
T ob = default(T);
using (Stream s = File.Open(filename, FileMode.Open))
{
StreamReader sr = new StreamReader(s);
ob = DeserializeObject<T>(sr.ReadToEnd());
s.Close();
}
return ob;
}

/// <summary>
/// Save an instance of a class to an XML file
/// </summary>
/// <param name="filename">Full or relative path to the file</param>
/// <param name="cls">Class to serialize and save.</param>
/// <param name="t">Type of the class (use: typeof(ClassName)</param>
/// <returns>True on success, False on failure</returns>
public static void Save<T>(string filename, T cls)
{
using (Stream s = File.Open(filename, FileMode.Create))
{
using (StreamWriter sw = new StreamWriter(s))
{
sw.Write( SerializeObject<T>(cls) );
sw.Close();
s.Close();
return;
}
}
}

/// <summary>
/// Serialize the object into an XML format
/// </summary>
/// <typeparam name="T">Type of object to serialize</typeparam>
/// <param name="pObject">the object to serialize</param>
/// <returns>a string representing the XML version of the object</returns>
public static String SerializeObject<T>(T pObject)
{
MemoryStream memoryStream = new MemoryStream();
UTF8Encoding encoding = new UTF8Encoding();

XmlSerializer xs = new XmlSerializer(typeof(T));
System.Xml.XmlTextWriter xmlTextWriter = new System.Xml.XmlTextWriter(memoryStream, Encoding.UTF8);
xs.Serialize(xmlTextWriter, (object) pObject);
memoryStream = (MemoryStream)xmlTextWriter.BaseStream;
return encoding.GetString(memoryStream.ToArray());
}

/// <summary>
/// Deserialize the object back into the object from an XML string
/// </summary>
/// <typeparam name="T">Type of the object to restore</typeparam>
/// <param name="pXmlizedString">The string that represents the object in XML</param>
/// <returns>A new instance of the restored object</returns>
public static T DeserializeObject<T>(String pXmlizedString)
{
UTF8Encoding encoding = new UTF8Encoding();
XmlSerializer xs = new XmlSerializer(typeof(T));
MemoryStream memoryStream = new MemoryStream(encoding.GetBytes(pXmlizedString));
System.Xml.XmlTextWriter xmlTextWriter = new System.Xml.XmlTextWriter(memoryStream, Encoding.UTF8);
return (T)xs.Deserialize(memoryStream);
}
}

Grid

answered on 18 Mar 2014

1 answer

46 views

ob button click set usestaticheader true or false using javascritp

Hi,
I want to set UseStaticHeader true/false to grid on button click using java-script. Please Provide help full Solution.

Thanks,
Rahul

Grid

answered on 18 Mar 2014

1 answer

336 views

Complex Filtering With Rad Grid (Client-Side)

I have a RadGrid with client-side binding similar to the "ODataDataSource - Filtering, Sorting and Paging with RadGrid" example. I have been able to add multiple filter conditions in the past by calling args.set_filterExpressions(filter); multiple times in the "requesting" function (see scripts.js in the example). However, now I have a specification where I need to search multiple fields for a value (in addition to the other filters on the grid). So the value might appear in column1, column2, or column3. An example of this kind of complex filtering is shown in the list view client-side filtering example.

What is the recommended way for a client-side bound RadGrid to have complex filtering expressions? When calling args.set_filterExpressions(filter), any previous expression uses "AND" logic with the existing expressions. My resulting filter would be an OData URL as in the list view OData filtering example:
((UnitPrice gt 25 and UnitsInStock lt 40) or (Discontinued ne true and startswith(ProductName,'I') eq true))

Thanks.

ODataDataSource

answered on 18 Mar 2014

3 answers

238 views

Dynamically created Button Event does not fire

Hi to all
Good Day

I have created a grid in the usercontrol.
Grid uses NestedViewTemplate, also, on the Placeholder on Line 41, i am creating a dynamic button options but it seems that the created button event is not firing.

Please help me out on this. Thanks.

01.<telerik:RadGrid EnableViewState="true" AllowPaging="true" runat="server" AutoGenerateColumns="false" ID="rgNotification" Skin="Metro" CssClass="rgRadGridPanelBar" ShowHeader="false" OnNeedDataSource="rgNotification_NeedDataSource" OnItemDataBound="rgNotification_ItemDataBound" OnItemCommand="rgNotification_ItemCommand">

02. <MasterTableView PageSize="10" Name="Master" HierarchyLoadMode="ServerBind" DataKeyNames="ClientID" AllowPaging="true">

03. <PagerStyle Mode="NextPrevAndNumeric" />

04. <Columns>

05. <telerik:GridTemplateColumn>

06. <ItemTemplate>

07. <div style="border: 1px solid #E5E5E5; padding: 10px; background-color: #F3F3F3; margin: 0;">

08. <div class="row">

09. <div class="col-md-6">

10. <div class="tagCss_grid" style="background-color: #1C3278; margin-right: 5px">

11. <asp:Label runat="server" ID="lblCount" Text='<%# Bind("Count") %>'></asp:Label>

12. </div>

13. <asp:Label runat="server" ID="lblClient" Text='<%# Bind("ClientName") %>' Style="text-transform: uppercase;"></asp:Label>

14. </div>

15. <div class="col-md-6 text-right">

16. <asp:PlaceHolder ID="plHolder" runat="server"></asp:PlaceHolder>

17. </div>

18. </div>

19. </div>

20. </ItemTemplate>

21. </telerik:GridTemplateColumn>

22. </Columns>

23. <NestedViewTemplate>

24. <div style="margin: 10px">

25. <telerik:RadGrid CssClass="rgRadGridPanelBarDetail" OnItemDataBound="rgDetails_ItemDataBound" OnItemCommand="rgDetails_ItemCommand" AutoGenerateColumns="false" runat="server" OnNeedDataSource="rgDetails_NeedDataSource" ID="rgDetails" ShowHeader="false">

26. <MasterTableView Name="Details" DataKeyNames="ColorHex,AlertType,AlertTriggerId,ProjectId">

27. <Columns>

28. <telerik:GridTemplateColumn ItemStyle-Width="75%">

29. <ItemTemplate>

30. <asp:PlaceHolder ID="plHolderDetail" runat="server"></asp:PlaceHolder>

31. <%# Eval("Message") %>

32. </ItemTemplate>

33. </telerik:GridTemplateColumn>

34. <telerik:GridTemplateColumn ItemStyle-Width="25%" ItemStyle-HorizontalAlign="Right">

35. <ItemTemplate>

36. <div class="btn-group">

37. <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">

38. Select Action <span class="caret"></span>

39. </button>

40. <ul class="dropdown-menu pull-right" role="menu">

41. <asp:PlaceHolder runat="server" ID="plMenu"></asp:PlaceHolder>

42. </ul>

43. </div>

44. </ItemTemplate>

45. </telerik:GridTemplateColumn>

46. </Columns>

47. </MasterTableView>

48. <ClientSettings EnablePostBackOnRowClick="false">

49. <ClientEvents OnRowClick="RowSelecting" />

50. </ClientSettings>

51. </telerik:RadGrid>

52. </div>

53. </NestedViewTemplate>

54. </MasterTableView>

55. <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">

56. <Selecting AllowRowSelect="true" />

57. </ClientSettings>

58. </telerik:RadGrid>

Grid

answered on 18 Mar 2014

17 answers

596 views

RadGrid CurrentFilterFunction="StartsWith" not working

Hi,

I have problem for RadGrid filtering, even I set CurrentFilterFunction="StartsWith", but filtering always filter as "contains", here is my code for RadGrid, is anything wrong?

thanks

<telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1"

Width="800px" AllowFilteringByColumn="True" AllowSorting="True"

ShowFooter="True" AllowPaging="True" runat="server"

GridLines="None" EnableLinqExpressions="false">