Questions on UI for ASP.NET AJAX Forum

1 answer

205 views

RadButton to prevent postback in javascript

Hi
We have use Radbutton inside asp panel but when we try to set the property/Method set_AutoPostBack(false) . It is giving JavaScript Error in IE 6.0 as show in attachment but in IE 8.0 it work fine . kindly help us how we can resolve this issue we have goLive very soon

General Discussions

answered on 03 Mar 2011

1 answer

156 views

Grid with Tree view problem

Hi
I have a radgrid and i am trying to use treeview under radgrid.
Similar to your demo example http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridwithtreeviewcomboboxeditors/defaultcs.aspx?product=grid

But I cant get it to work.
I want a empty grid in which onClick of 'Add New Record' I want toinsert into tblPettyCash.
I have a table tblExpCodes with fields

ExpType
Category
ExpCodeDesc only to display data.

I want to have tree view for these fields and only select them NOT to update anything on tblExpCodes table.
I use tblPettyCash to enter Claims.
The demo is slightly complicated
I created a similar .aspx page but giving me error saying

These columns don't currently have unique values.

I have attached the code files.

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/CWCStaffnet.Master" CodeBehind="Petty.aspx.cs" Inherits="CWC.Staffnet.Forms.Finance.Petty" %>

<%@ MasterType VirtualPath="~/CWCStaffnet.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../JSValidation.js"></script>

<style type="text/css">

.MyImageButton

{

cursor: hand;

}

.EditFormHeader td

{

font-size: 14px;

padding: 4px !important;

color: #0066cc;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<h1>Petty Cash Claim Form</h1>

<asp:Panel ID="plForm" runat="server">

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" IsSticky="True" Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;" >

</telerik:RadAjaxLoadingPanel>

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

<script type="text/javascript">

function RowDblClick(sender, eventArgs) {

sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());

}

</script>

</telerik:RadCodeBlock>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

//stop the event bubbling

function StopPropagation(e) {

if (!e) {

e = window.event;

}

e.cancelBubble = true;

}

//find the selected node in the treeview inside the combobox and scroll it into view

function OnClientDropDownOpenedHandler(sender, eventArgs) {

var tree = sender.get_items().getItem(0).findControl("RadTreeView1");

var selectedNode = tree.get_selectedNode();

if (selectedNode) {

selectedNode.scrollIntoView();

}

//when tree node is clicked, set the text and value for the item in the combobox and commit the changes

function nodeClicking(sender, args) {

//get the id of the employeesCombo in the edited row (passed from the server in the ItemDataBound event handler)

var comboBox = $find(window['comboId']);

var node = args.get_node();

comboBox.set_text(node.get_text());

comboBox.trackChanges();

comboBox.get_items().getItem(0).set_text(node.get_text());

comboBox.get_items().getItem(0).set_value(node.get_value());

comboBox.commitChanges();

comboBox.hideDropDown();

comboBox.attachDropDown();

}

</script>

</telerik:RadScriptBlock>

<asp:Label ID="Label1" runat="server" EnableViewState="false" Font-Bold="true" Text="Orders List" />

<telerik:RadGrid ID="RadGrid1" AutoGenerateColumns="false" PageSize="15" AllowPaging="true"

AllowSorting="true" runat="server" DataSourceID="LinqPettyCash" AllowAutomaticUpdates="true"

AllowAutomaticInserts="True" ShowStatusBar="true" OnItemCreated="RadGrid1_ItemCreated"

OnUpdateCommand="RadGrid1_UpdateCommand" >

<MasterTableView DataKeyNames="Id" EditMode="InPlace" CommandItemDisplay="TopAndBottom" DataSourceID="LinqPettyCash"

TableLayout="Fixed">

<Columns>

<telerik:GridBoundColumn UniqueName="Id" DataField="Id" HeaderText="Id"

ReadOnly="true" />

<telerik:GridTemplateColumn UniqueName="Code" HeaderText="Code" SortExpression="Code"

ItemStyle-Width="400px">

<ItemTemplate>

<%#DataBinder.Eval(Container.DataItem, "ExpenditureCode")%>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadComboBox ID="RadComboBox1" runat="server" Width="180px"

ShowToggleImage="True" Style="vertical-align: middle;" OnClientDropDownOpened="OnClientDropDownOpenedHandler"

ExpandAnimation-Type="None" CollapseAnimation-Type="None">

<ItemTemplate>

<div id="div1" onclick="StopPropagation(event);">

<telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientNodeClicking="nodeClicking"

Height="140px" DataTextField="ExpenditureCode" DataValueField="CodeDescription" DataFieldID="CodeDescription"

DataFieldParentID="ExpType" DataSourceID="ExpDataSource" />

</div>

</ItemTemplate>

<Items>

<telerik:RadComboBoxItem Text="" />

</Items>

</telerik:RadComboBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:Label ID="lblMessage" runat="server" EnableViewState="false" Font-Bold="true" />

<br />

<p><asp:Label ID="lbError" runat="server" CssClass="message" Visible="false"></asp:Label></p>

<asp:ValidationSummary runat="server" ID="validationSummary3" ValidationGroup="Fault" />

<asp:Button ID="btSubmit" runat="server" CausesValidation="true"

OnClick="btSubmit_Click" Text="Submit" ValidationGroup="Fault" />

<asp:SqlDataSource ID="ExpDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:cwc_staffnetConnectionString %>"

SelectCommand="SELECT DISTINCT Category,Id,CodeDescription, ExpenditureCode,ExpCodeDesc,ExpType  FROM tblExpenditureCodes"

InsertCommand="INSERT INTO tblPettyCashes ([ExpenditureCode], [ExpType],[Id]) VALUES (@ExpenditureCode, @ExpType, @Id)"

/>

<asp:LinqDataSource ID="LinqPettyCash" runat="server"

ContextTypeName="CWC.Staffnet.Forms.StaffnetDataContext"

TableName="tblPettyCashes" EnableDelete="True"

EnableUpdate="True" EnableInsert="true" >

</asp:LinqDataSource>

</asp:Panel>

<asp:Panel ID="plConfirm" runat="server" Visible="false">

<table>

<tr>

<td>

<p><b>Notification of Petty example Form.</b></p>

<p>

You have successfully completed the Petty cash Claim form. </p>

<p>

For any questions or comments regarding this form please contact

<a href="mailto:online.services@cwc.ac.uk"> Online services </a>

Thank you.</p>

</td>

</tr>

</table>

</asp:Panel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="plfrm">

<UpdatedControls>

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="RadGrid1"/>

<telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstName" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstFaculty" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstCentre" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</asp:Content>

******************************************************************************************************************************

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Web.UI;

using Telerik.Web.UI;

using config = CWC.Staffnet.Forms.Properties.Settings;

using System.Text;

using System.IO;

using System.Text.RegularExpressions;

using System;

namespace CWC.Staffnet.Forms.Finance

{

public partial class Petty : System.Web.UI.Page

{

private StaffnetDataContext dc;

protected void Page_Init(object sender, EventArgs e)

{

dc = new StaffnetDataContext();

}

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btSubmit_Click(object sender, EventArgs e)

{

Page.Validate();

if (Page.IsValid)

{

try

{

AddRecord();

SendEmail();

plConfirm.Visible = true;

plForm.Visible = false;

}

catch (Exception ex)

{

ShowErrorMessage(ex.ToString());

}

else

{

string msg = string.Empty;

foreach (IValidator validator in this.Validators)

{

if (!validator.IsValid)

{

msg += String.Format("{0}<br/>", validator.ErrorMessage);

ShowErrorMessage(msg);

}

private void ShowErrorMessage(string ex)

{

lbError.Text = ex.ToString();

lbError.Visible = true;

}

private void AddRecord()

{ }

private void SendEmail()

{ }

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

//if a grid item is in edit mode, wire the ItemsRequested event of the customersCombo to filter the items in it based on the selection in the freight combo

if (e.Item is GridEditableItem && e.Item.IsInEditMode)

{

RadComboBox freightCombo = (e.Item as GridEditableItem)["Code"].Controls[0] as RadComboBox;

if (Page.IsCallback)

{

}

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridEditableItem)

{

//set the selected value for the Employees combobox to match the value in the edited cell

RadComboBox employeesCombo = (e.Item as GridEditableItem).FindControl("RadComboBox1") as RadComboBox;

employeesCombo.Items[0].Text = DataBinder.Eval(e.Item.DataItem, "ExpenditureCode").ToString();

//set the selection in the treeview inside the combobox to match the value in the edited cell

RadTreeView employeesTreeView = employeesCombo.Items[0].FindControl("RadTreeView1") as RadTreeView;

employeesTreeView.FindNodeByText(DataBinder.Eval(e.Item.DataItem, "ExpenditureCode").ToString()).Selected = true;

//Expand all nodes to scroll the selected into view. Have in mind that load-on-demand is recommended with very large number of nodes in the treeview

employeesTreeView.ExpandAllNodes();

//register script block which holds the client id of the employeesComboBox. Will be used to reference the client object of the combobox in the RadTreeView's OnClientNodeClicking event handler

RadScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), "employeesComboScript", "<script type='text/javascript'>window['comboId'] = '" + e.Item.FindControl("RadComboBox1").ClientID + "';</script>", false);

}

protected void RadGrid1_UpdateCommand(object sender, GridCommandEventArgs e)

{

string empId = (((e.Item as GridEditableItem).FindControl("RadComboBox1") as RadComboBox).Items[0].FindControl("RadTreeView1") as RadTreeView).SelectedNode.Value;

//if the EmployeeID value is empty, cancel the update operation

if (empId == string.Empty)

{

e.Canceled = true;

SetMessage("Order cannot be updated. You must select an employee from the provided list");

}

else

{

LinqPettyCash.UpdateParameters["Id"].DefaultValue = empId;

}

public void SetMessage(string message)

{

lblMessage.Text = message;

}

If you could help me quickly.
Thankyou
Suchi

Grid

answered on 03 Mar 2011

1 answer

337 views

[Solved] GridImageColumn to dispay image only when the flag is set

I have a requirement that I need to dispay an image if the flag is false and should not display anything (the cell must be empty) if the flag is true. How to achieve this using GridImageColumn?

Thanks in advance..

Grid

answered on 03 Mar 2011

1 answer

82 views

Custom User Control in ToolTip

Hi, I am trying to use RadToolTipManager to create on demand tooltip content which is dependant on the value of a particular column on mouse over.... as a starting point I am attempting to recreate as much of the example project - (http://demos.telerik.com/aspnet-ajax/tooltip/examples/loadondemand/defaultcs.aspx) in my own as possible. However I'm getting a ' Type 'ProductDetails' is not defined ' error in the following line of the code behind:

Dim details As ProductDetails = DirectCast(ctrl, ProductDetails)

I have tried putting the ascx file in my app_folder, the root, I'm pretty sure I've got all the relevant imports right and registrations at the top of the aspx file... am probably missing something obvious but can't figure out what...

Thanks in advance,

Rudie

ToolTip

answered on 03 Mar 2011

1 answer

163 views

Return argument when close (X) clicked

Is there a way I can capture the click of the 'X' close button from within the RadWindow, so I can set a specific argument value to be passed back to the parent window? From what I've seen, the suggested solutions have been to check for a null argument on the parent side which would indicate the X close was used. I want to pass an argument back (such as 'updated' or 'notUpdated') so I know whether to refresh a main grid control based on the actions performed within the window. Thanks.

Window

answered on 03 Mar 2011

1 answer

132 views

Integrate RADChart into SharePoint 2010

Hi Telerik,
I tried to integrate the latest assemblies to SharePoint 2010. I follows the steps by adding safe control in web.config,

<SafeControl Assembly="Telerik.Web.UI, Version=2010.3.1317.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Charting" TypeName="*" Safe="True" SafeAgainstScript="False" />

I also add the httphandlers in web.config

<httpHandlers><br> <add path="ChartImage.axd" verb="*" type=

"Telerik.Web.UI.ChartHttpHandler, Telerik.Web.UI, Version=2010.3.1317.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"

validate="false" /><br> </httpHandlers><br>

In my C# code, i also disabled the Session and set the temporary files where the web application have full permission to writes to that file(local administrator right).

After all done, when i tried to generate my chart, it throw exception as attached.

Kindly advise.

Regards.

Chart (Obsolete)

answered on 03 Mar 2011

6 answers

161 views

raddatepicker not displaying in safari

i have used raddatepicker in one of my page which should load on page-load. but when i open that page it take a lot of time for the open, in fact it does not open. i dont face this issue in any other browser (IE 7/8 or firefox). plz help on that..

Calendar

answered on 03 Mar 2011

3 answers

80 views

hierarchical grid

I have requirement for hierarchal data grid. I'm binding the grid's datasource with a collection.
Each of the item within that collection has another collection as a Property.

Is there a way to bind the grid in such a way that , it automatically takes the inner collection as datasource for DetailsTable,
whereas the outercollection as datasource for MasterTableView ?

The telerik eg., i have seen, have datasource provided exclusively for both MasterTableview as well as Detailtable and the relation between them specifed using ParentTableRelation.

In my case, i have the relation between master & detail maintained in my collection. So binding the grid in NeedDatasource event and specifying the DataMember property declaritively should work.
let me know if you think i'm missing something ,
I donot wish to maintain two different datasource , as i have lot of grid operations.

Grid

answered on 03 Mar 2011

3 answers

252 views

Edit and Add Button column in NestedViewTemplate

I'm using a hierarchical grid. My Radgrid contain NestedViewTemplate which contain Another Radgrid .Inner Radgrid contain some GridBoundColumn and GridButtonColumn called EDIT.This Inner Grid use <EditFormSettings EditFormType="Template">.
Now when we click on Edit,it is not able to open Edit form template.Instead of this, All the rows inside the inner grid get disappear.

Please help me out here...Thanks in advance.

<telerik:RadGrid ID="Radgrid1" Visible="true" runat="server" EnableViewState="true" AllowPaging="false" AllowSorting="true" AutoGenerateColumns="false" Skin="Vista" OnItemCommand="Radgrid1_ItemCommand" OnSortCommand="Radgrid1_SortCommand" AllowAutomaticDeletes="true" AllowAutomaticInserts="false" AllowAutomaticUpdates="false">

<MasterTableView Width="100%" Name="mastertableview" DataKeyNames="custemerid" >

<NestedViewTemplate>

<telerik:RadGrid ID="Radgrid2" AllowAutomaticDeletes="true"" AllowAutomaticInserts="false"

AllowAutomaticUpdates="true" AllowSorting="true" OnItemCommand="Radgrid2_ItemCommand">

<MasterTableView CommandItemDisplay="Top" DataKeyNames="orderID" AutoGenerateColumns="false" EditMode="EditForms" InsertItemDisplay="Top"

>                                                                                                                                                                                                   <

Columns>

<telerik:GridBoundColumn HeaderText="" </telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Order Name" UniqueName="Order Name"

<ItemTemplate> <asp:Label runat="server" ID="lblOrderName" Text='<%# AntiXss.HtmlEncode(Eval("OrederName").ToString())%>'></asp:Label> </ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText=""

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn HeaderText="Edit" CommandName="Edit" Text="Edit" ItemStyle-HorizontalAlign="Center"

ButtonType="ImageButton" UniqueName="EditCommandColumn" ImageUrl="~/OneViewImages/edit.png">

</telerik:GridButtonColumn>

<telerik:GridButtonColumn HeaderText="Delete" ButtonType="ImageButton" ConfirmText="Are you sure you want to delete this User?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" CommandName="Delete" Text="Delete User" UniqueName="DeleteColumn" >

</telerik:GridButtonColumn>

</Columns>

<CommandItemSettings AddNewRecordText="Add New User" />

<EditFormSettings EditFormType="Template">

<FormStyle Font-Size="11px" />

<FormTemplate> Edit form is here Along with two Image button as Save and Calcel mention below

<asp:ImageButton ID="btnUpdate" runat="server" ToolTip="Save" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />

<asp:ImageButton ID="btnCancel" runat="server" ToolTip="cancel" CausesValidation="False" CommandName="Cancel" />

</FormTemplate>

</EditFormSettings>

</MasterTableView>

<ValidationSettings CommandsToValidate="PerformInsert,Update" ValidationGroup="ValidationGrp1" />

</telerik:RadGrid

>                                                                                                   </

NestedViewTemplate>

<Columns>

<telerik:GridBoundColumn UniqueName="CustomerID" DataField="CustomerId" Visible="false" ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CustomerName" UniqueName="CustomerName" >

</telerik:GridBoundColumn>

</Columns>

<ExpandCollapseColumn Visible="True">

</ExpandCollapseColumn>

</MasterTableView>

</telerik:RadGrid>

Code Behind:

protected void Radgrid1_ItemCommand(object source, GridCommandEventArgs e)

{

RadGrid grid = (source as RadGrid);

if ((e.CommandName == RadGrid.InitInsertCommandName ||

e.CommandName == RadGrid.EditCommandName ||

e.CommandName == RadGrid.EditAllCommandName ||

e.CommandName == RadGrid.EditSelectedCommandName)

&& insertMode )

{

grid.MasterTableView.ClearEditItems();

e.Item.OwnerTableView.IsItemInserted = false;

}

if ((e.CommandName == "ExpandCollapse") && (!e.Item.Expanded))

{

// populate innergrid

}

protected void Radgrid2_ItemCommand(object source, GridCommandEventArgs e)

{

//Code for During Add,Edit can no happen and vice-versa

bool editMode = e.Item.OwnerTableView.OwnerGrid.EditIndexes.Count > 0;

bool insertMode = e.Item.OwnerTableView.IsItemInserted;

RadGrid Radgrid2 = (source as RadGrid);

if ((e.CommandName == RadGrid.InitInsertCommandName ||

e.CommandName == RadGrid.EditCommandName ||

e.CommandName == RadGrid.EditAllCommandName ||

e.CommandName == RadGrid.EditSelectedCommandName)

&& (insertMode || editMode)) {

Radgrid2.MasterTableView.ClearEditItems();

e.Item.OwnerTableView.IsItemInserted = false; }

if (e.CommandName == "Delete")

{if (e.Item is GridDataItem)

{

//Delete the selected OrderId then bind the inner grid using

Radgrid2.Rebind();

}

if (e.CommandName == "Edit")

{

Radgrid2.MasterTableView.EditFormSettings.UserControlName = null;

Radgrid2.MasterTableView.EditFormSettings.EditFormType = GridEditFormType.Template;

if (e.Item is GridDataItem)

{

GridDataItem item = (GridDataItem)e.Item;

//Some field to be loaded in edit mode

}

Radgrid2.Rebind();

}

if (e.CommandName == "Cancel")

{

Radgrid2.Rebind();

BindGrid(); // use to bind Outer grid

}

if (e.CommandName == "Update")

{

//some code

}

if (e.CommandName == "InitInsert")

{ //Some code

Radgrid2.MasterTableView.ClearEditItems();

Radgrid2.MasterTableView.IsItemInserted = true;

Radgrid2.Rebind();

Radgrid1.Rebind();

} }

if (e.CommandName == "PerformInsert")

{

//some code

}

Grid

answered on 03 Mar 2011

7 answers

632 views

multiline radTextbox doesn't accept ENTER key

I have the following multi-line textbox.

    
            <telerik:RadTextBox ID="txtComment" runat="server"  
        
            ValidationGroup="CommentValidation" CausesValidation="True" MaxLength="4096"  
        
            Skin="Black" Width="450px" TextMode="MultiLine" Height="150px" AcceptReturn="True" />

I want to be able to start typing and when pressing the ENTER key I want to go to the next line. This won't work because now it will trigger the validation of the form.

I tried the solution from this (winforms) thread but that doesn't seem to work here.
How can I fix this?

(I am using the radEditorProvider (2008.2723) in DotNetNuke 4.8.4)

Input

answered on 03 Mar 2011