Questions on UI for ASP.NET AJAX Forum

2 answers

204 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

66 views

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

76 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

99 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

30 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

288 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

189 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

552 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">

<MasterTableView AutoGenerateColumns="false" EditMode="InPlace" AllowFilteringByColumn="True"

ShowFooter="True" TableLayout="Fixed">

<telerik:GridBoundColumn FilterControlWidth="60px" DataField="DONOR" HeaderText="DONOR" SortExpression="DONOR"

UniqueName="DONOR" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith" ShowFilterIcon="false">

</telerik:GridBoundColumn>

........

Grid

answered on 18 Mar 2014

3 answers

67 views

RadComboBoxItem - Where is the Attributes property?

Following this documentation:
http://www.telerik.com/help/aspnet-ajax/combobox-custom-attributes.html

There is no Attributes property for the RadComboBoxItem class... Why? (See attached.)

Thanks.

ComboBox

answered on 18 Mar 2014

10 answers

147 views

RadGrid column select/deselect does not resize grid

Like in this example DEMO, my grid has the ability to show a menu to select and deselect columns. But on the demo, the columns resize to the grid size. Mine doesnt unless some postback is done. How do you resize grid on selecting columns checkbox from the menu?

Edit:
I got this function in javascript that calculate all column width, then apply the width to the grid style. That works well when all columns are there.
Each column must remain at a fixed size (a switch i added with the UniqueName of each column) that way i get the right width. Since i can remove a column, orderIndex can't work here.
So when i click the drop down menu and uncheck a column to hide it, the resize function doesnt work anymore because i can't find the "visible" property of the column, so i get a width containing all columns.
My tableView has a tableLayout fixed.

So, what i need here, is a way to get the visibility of the column to properly resize my grid with it.

Grid

answered on 18 Mar 2014