Questions on UI for ASP.NET AJAX Forum

4 answers

103 views

Toolbar Buttons stay "selected/checked" in Firefox?

Hello,

I've been noticing an odd behavior... I have two toolbar items that are CheckOnClick="true" Checked="false" AllowSelfUncheck="true"... when the items are clicked in FF5 (assumedly 4 as well), they look fine... but then when I click to "uncheck" them, the buttons stay depressed / in the checked style UNTIL I click somewhere else on the form... almost like they are keeping a focus or something that maintains the checked state.

I only see this on Firefox... any ideas?

Thanks,
-Brian

ToolBar

answered on 08 Jul 2011

3 answers

264 views

How to create new .aspx page with Telerik 'boilerplate' code?

Hi there!
I've spent some time looking through forums, watching videos and going through the tutorials, but I can't seem to find an easy way to create new aspx pages in my web application, that include all the 'boilerplate' code as supplied by Telerik's new project wizard.

When I create a new project with Telerik's VSE, I get a project that looks like this:

Refer to attched file: "default_aspx_in_solution.png"

If one opens the markup for default.aspx, the 'boilerplate' code for all the Telerik AJAX 'stuff' is apparent:

<%@ 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>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <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>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
 
    </div>
    </form>
</body>
</html>

However if I now create a new webforms page I get the standard template as defined by MSFT:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyNewForm.aspx.cs" Inherits="MyRadControlsWebApp.MyNewForm" %>

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

<div>

</div>

</form>

</body>

</html>

On large websites it will be a real pain to continuously copy and paste the Telerik 'template' into every new page that is created.

Surely there is an easy way to create a new aspx page that automatically includes all of Telerik's boilerplate code.

Can anyone help?

Thanks,

Paul.

General Discussions

answered on 08 Jul 2011

3 answers

135 views

RadGrid EditLink click gives Microsoft JScript runtime error: Object expected

I have a user control that contains a RadGrid with the EditLink column,

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Prospects.ascx.cs" Inherits="Prospects" %>

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

<script type="text/javascript">

function ShowEditForm(id, rowIndex) {

alert(id);

window.radopen("EditContact.aspx?ContactID=" + id, "UserListDialog");

return false;

}

function ShowInsertForm() {

window.radopen("EditContact.aspx", "UserListDialog");

return false;

}

function refreshGrid(arg) {

if (!arg) {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");

}

else {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");

}

</script>

</telerik:RadCodeBlock>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="prospectGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="prospectGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="prospectGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid AllowSorting="true" BackColor="#393939"

ID="prospectGrid" runat="server" AllowPaging="true" PageSize="15"

Width="980px" CssClass="productsGrid"

OnPreRender="prospectGrid_PreRender" OnItemCreated="prospectGrid_ItemCreated"

OnNeedDataSource="prospectGrid_NeedDataSource" style="outline:0">

<MasterTableView AutoGenerateColumns="false" PagerStyle-Mode="NextPrevAndNumeric" AllowFilteringByColumn="false"

DataKeyNames="OrderID" ClientDataKeyNames="OrderID" TableLayout="Fixed">

<Columns>

<telerik:GridBoundColumn DataField="OrderID" HeaderText="ProspectID" AutoPostBackOnFilter="true" ShowFilterIcon="false" HeaderStyle-Width="70px" FilterControlWidth="35px">

</telerik:GridBoundColumn>

<telerik:GridNumericColumn DataField="Freight" HeaderText="Freight" DataFormatString="{0:c}" HeaderStyle-Width="110px" FilterControlWidth="60px">

</telerik:GridNumericColumn>

<telerik:GridBoundColumn DataField="ShipName" HeaderText="Prospect Name" HeaderStyle-Width="300px" FilterControlWidth="260px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ShipCountry" HeaderText="Country" FilterControlWidth="70px">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:d}" FilterControlWidth="95px">

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn DataField="ShippedDate" HeaderText="Shipping Date" DataFormatString="{0:d}" FilterControlWidth="95px">

</telerik:GridDateTimeColumn>

<telerik:GridTemplateColumn UniqueName="TemplateEditColumn">

<ItemTemplate>

<asp:HyperLink ID="EditLink" runat="server" Text="Edit"></asp:HyperLink>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowDragToGroup="false" EnableRowHoverStyle="true">

<Selecting AllowRowSelect="true" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="360px" />

</ClientSettings>

</telerik:RadGrid>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">

<Windows>

<telerik:RadWindow ID="UserListDialog" runat="server" Title="Editing record" Height="320px"

Width="310px" Left="150px" ReloadOnShow="true" ShowContentDuringLoad="false"

Modal="true" />

</Windows>

</telerik:RadWindowManager>

<telerik:RadAjaxLoadingPanel ID="ProductsLoadingPanel" runat="server"></telerik:RadAjaxLoadingPanel>

and the onClick code is generated in the code-behind file,

protected void prospectGrid_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

HyperLink editLink = (HyperLink)e.Item.FindControl("EditLink");

editLink.Attributes["href"] = "#";

editLink.Attributes["onclick"] = String.Format("return ShowEditForm('{0}','{1}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["OrderID"], e.Item.ItemIndex);

}

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

if (e.Argument == "Rebind")

{

prospectGrid.MasterTableView.SortExpressions.Clear();

prospectGrid.MasterTableView.GroupByExpressions.Clear();

prospectGrid.Rebind();

}

else if (e.Argument == "RebindAndNavigate")

{

prospectGrid.MasterTableView.SortExpressions.Clear();

prospectGrid.MasterTableView.GroupByExpressions.Clear();

prospectGrid.MasterTableView.CurrentPageIndex = prospectGrid.MasterTableView.PageCount - 1;

prospectGrid.Rebind();

}

but whenever I click on the EditLink hyperlink I get the Microsoft JScript runtime error: Object expected exception.

My default.aspx RadScriptManager code,

<telerik:RadScriptManager runat="server" ID="RadScriptManager1">

<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 Path="~/Scripts/jquery.maphilight.min.js" />

<asp:ScriptReference Path="~/Scripts/maphilight.js" />

</Scripts>

</telerik:RadScriptManager>

any help will be appreciated.

Grid

answered on 08 Jul 2011

1 answer

62 views

bug/inconsistencyin RadGrid with DelayFilter

In firefox, pressing backspace with in a delayfiltered filter box causes a postback after the delay. in IE8 and chrome it doesn't.

Full steps
1) Go to This rad grid demo page
2) put '2' in the order id column and wait for 4 seconds. The page reloads with the new filter (no results, but it doesn't matter what the text is).
3) Click on the field so that the cursor is to the right of the text.
4) Press backspace and wait for 4 seconds.
5-firefox) grid postbacks and updates as I expect it should.
5-ie-or-chrome) grid doesn't postback. Pressing enter does the postback (almost a valid workaround).

I think it should do the post back, but most of all I think it should be consistent.

Greg.

Grid

answered on 08 Jul 2011

3 answers

98 views

[Solved] Adding new items into a TreeView via a Window or Form

Hi all,

I've just started using the Telerik controls and I'm looking for some advice on how to achieve the requirement below.

I'd like the user to be able to choose a 'Create' option from a context menu on a tree view node.

On selecting this option, I'd like to display a Telerik Window to enable the user to create a new record. If this is too difficult, I'm happy for this to be some other UI element and I'm open to suggestion here.

On saving the record, I'd like to add the newly created item into the tree node.

1. Are there any code samples on how to open up a Window or form from a context menu item?

2. I'm trying to figure out the code that's needed to add items into the treeview and I'm following the article beneath.

http://www.telerik.com/help/aspnet-ajax/treeview-general-add-node-in-edit-mode-by-default.html

When I add the following javascript into my page, I get the following error when loading the page.

function HighlightNode(value) {

var tree = $find("<%= RadTreeView1.ClientID %>");

var node = tree.findNodeByValue(value);

if (node != null) {

node.startEdit();

}

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

I’m not sure if this is relevant but I've added a RadAjaxManager onto my page and am using the code beneath in the AddNode method.

Dim script As String = "HighlightNode(""" + newNode.Value + """)"

RadAjaxManager1.ResponseScripts.Add(script)

Any help or guidance would be much appreciated.

Tim

TreeView

answered on 08 Jul 2011

9 answers

281 views

RadGrid Popup Edit Window

Is it possible to open the RadGrid Popup Edit window manually? I would like to open it when clicking the update button so I can capture additional information from the user.

Grid

answered on 08 Jul 2011

5 answers

144 views

Delete SP not working on NestedViewTemplate - RadGrid

I have a NestedViewTemplate within a RadGrid. Within the NestedViewTemplate I have two other Rad-grids showing data to the parent RadGrid. The 'select' operation on both nested RadGrid's work fine. However, when attempting to delete a record in one of the nested RadGrid, nothing happens. Please review the below code and advise:

<telerik:RadGrid ID="RadGrid2" DataSourceID="SqlDataSource3" GridLines="None" ShowGroupPanel="False" Skin="WebBlue" runat="server"

AutoGenerateEditColumn="True" AllowAutomaticInserts="true" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true">

<MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource3"

ShowHeader="True" AllowPaging="false" CommandItemDisplay="Top">

<telerik:GridBoundColumn DataField="intInspectorID" DataType="System.Int32" HeaderText="intInspectorID"

SortExpression="intInspectorID" UniqueName="intInspectorID" Visible="false" ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="intCertificationID" DataType="System.Int32" HeaderText="intCertificationID"

SortExpression="intCertificationID" UniqueName="intCertificationID" Visible="false" ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="strCertificationDesc" HeaderText="Certification" SortExpression="strCertificationDesc"

UniqueName="strCertificationDesc">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="dtmDateExpires" HeaderText="Date Expires" SortExpression="dtmDateExpires"

UniqueName="dtmDateExpires">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ConfirmText="Delete this Certification?" ButtonType="LinkButton"

CommandName="Delete" Text="Delete" UniqueName="DeleteColumn1">

</telerik:GridButtonColumn>

</Columns>

<tr>

<asp:Label ID="Label3" runat="server" Text="Certification:"></asp:Label>

</td>

<telerik:RadComboBox ID="cboStateEdit" runat="server" DataTextField='<%# Bind("strCertificationDesc") %>'

DataValueField='<%# Bind("intCertificationID") %>' Text='<%# Bind("strCertificationDesc") %>'

SelectedValue='<%# Bind("intCertificationID") %>' Skin="WebBlue">

<Items>

<telerik:RadComboBoxItem Text="--Select--" Value="" />

<telerik:RadComboBoxItem Text="NICET" Value="1" />

<telerik:RadComboBoxItem Text="NICEPT" Value="2" />

<telerik:RadComboBoxItem Text="ACI" Value="3" />

<telerik:RadComboBoxItem Text="PennDOT Concrete" Value="4" />

</Items>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<asp:Label ID="Label15" runat="server" Text="Date Expires:"></asp:Label>

</td>

<telerik:RadDatePicker ID="RadDatePicker1" runat="server"

DbSelectedDate='<%# Bind("dtmDateExpires") %>' EnableTyping="false">

</telerik:RadDatePicker>

</td>

</tr>

<tr>

<asp:Button ID="btnUpdate" Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update") %>'

runat="server" CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>'>

</asp:Button> 

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel"></asp:Button>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:inspectors %>"

SelectCommand="getInspectorCertifications" SelectCommandType="StoredProcedure"

InsertCommand="insInspectorCertifications" InsertCommandType="StoredProcedure"

UpdateCommand="updInspectorCertifications" UpdateCommandType="StoredProcedure"

DeleteCommand="delInspectorCertification" DeleteCommandType="StoredProcedure">

<asp:ControlParameter ControlID="Label1" Name="intInspectorID" PropertyName="Text" Type="Int32" />

</SelectParameters>

<asp:ControlParameter ControlID="Label1" Name="intInspectorID" PropertyName="Text" Type="Int32" />

<asp:Parameter Name="intCertificationID" Type="Int32" />

<asp:Parameter Name="dtmDateExpires" Type="DateTime" />

</InsertParameters>

<asp:Parameter Name="intCertificationID" Type="Int32" />

<asp:Parameter Name="intInspectorID" Type="Int32" />

<asp:Parameter Name="dtmDateExpires" Type="dateTime" />

</UpdateParameters>

<asp:Parameter Name="intCertificationID" Type="Int32" />

<asp:Parameter Name="intInspectorID" Type="Int32" />

</DeleteParameters>

</asp:SqlDataSource>

</

telerik:RadPageView>

Grid

answered on 08 Jul 2011

3 answers

127 views

HorizontalAlign issues and CommandTemplate Width

I've tested with and without a master page, with and without our css file, no difference.

If I specify a width on the grid and the mastertableview, the grid isn't centered on the screen.

If I remove the width on the grid it is centered.

If I set UseStaticHeaders="False" the command template is the same width as the mastertableview and centered.

If I set UseStaticHeaders="True" the command tamplate width is 100% of the screen and the mastertableview is centered.



We've never been able to use HorizontalAlign="Center" becuase we've never seen it work as expected, so we've been wrapping out grids in a <table> to center them. 



Is there something I'm missing?




<telerik:RadGrid ID="RadGrid1" HorizontalAlign="Center" runat="server" AllowPaging="false"
        AllowSorting="True" GridLines="None" BorderWidth="0" PageSize="5" BackColor="White"
        GroupingEnabled="False" CellSpacing="0" Width="750">  
        <MasterTableView Name="RepMaster" HorizontalAlign="Center" Width="750" CommandItemDisplay="Top"
            BorderStyle="Solid" BorderWidth="1" BorderColor="Black" TableLayout="Fixed">  
            <CommandItemTemplate>  
                <table border="0" style="width: 100%;">  
                    <tr>  
                        <td align="left" style="width: 125px;">  
                            <asp:Button CausesValidation="false" CommandName="InitInsert" runat="server" ID="btnAddNewRecord"
                                Text=" " title="Add new record" CssClass="rgAdd" />  
                            <asp:LinkButton CausesValidation="false" ID="lnkbAddNewRecord" CommandName="InitInsert"
                                runat="server" CssClass="Link">Add new Record</asp:LinkButton>  
                        </td>  
                        <td align="center">  
                        </td>  
                        <td align="right" style="width: 125px;">  
                            <asp:Button CausesValidation="false" CommandName="RebindGrid" runat="server" ID="btnRefresh"
                                Text=" " title="Refresh" CssClass="rgRefresh" />  
                            <asp:LinkButton CausesValidation="false" ID="lnkbRefresh" CommandName="RebindGrid"
                                runat="server" CssClass="Link">Refresh</asp:LinkButton>  
                        </td>  
                    </tr>  
                </table>  
            </CommandItemTemplate>  
            <CommandItemStyle BackColor="AliceBlue" Width="500" HorizontalAlign="Center" />  
            <Columns>  
                <telerik:GridTemplateColumn UniqueName="RepMasterEdit" HeaderText="Edit">  
                    <HeaderStyle HorizontalAlign="Center" />  
                    <ItemStyle HorizontalAlign="Center" />  
                    <ItemTemplate>  
                        <asp:ImageButton ID="imgbEdit" runat="server" CausesValidation="False" CommandName="Select"
                            CssClass="Link" ImageUrl="~/Images/btnEdit.gif" ToolTip="Edit" />  
                    </ItemTemplate>  
                </telerik:GridTemplateColumn>  
            </Columns>  
        </MasterTableView>  
        <ClientSettings EnableRowHoverStyle="True">  
            <Selecting AllowRowSelect="True" EnableDragToSelectRows="False"></Selecting>  
            <Scrolling AllowScroll="True" ScrollHeight="100%" UseStaticHeaders="true"></Scrolling>  
            <ClientEvents OnRowDblClick="RowDblClick" />  
        </ClientSettings>  
    </telerik:RadGrid> 




Private Sub RadGrid1_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource  
       Dim dt As New DataTable  
       'Add our columns  
       For i As Integer = 0 To 5  
           dt.Columns.Add("Field" + i.ToString, GetType(String))  
       Next  
       Dim row As DataRow  
       For r As Integer = 0 To 50  
           row = dt.NewRow  
           For c As Integer = 0 To 5  
               row("Field" + c.ToString) = "Value " + r.ToString  
           Next  
           dt.Rows.Add(row)  
       Next  
       Me.RadGrid1.DataSource = dt  
   End Sub

Grid

answered on 08 Jul 2011

1 answer

100 views

problem with filtering in radgrid

hello,

I have a radgrid with

 GridHyperLinkColumn gridHyperLinkColumn = new GridHyperLinkColumn();

gridHyperLinkColumn.AllowFiltering = true;

 gridHyperLinkColumn.CurrentFilterFunction = GridKnownFunction.Contains;

 gridHyperLinkColumn.ShowFilterIcon = false;

 gridHyperLinkColumn.AutoPostBackOnFilter = true;

But when i tested Filtering Function, the error occurred:

Sys$Enum$parse is not defined

parse()Teleri...98f28bc (line 8060)

b = "Contains"

a = undefined

filter()Teleri...98f28bc (line 7933)

h = "CaseId"

a = "216"

c = "Contains"

f = undefined

(?)()EditCa...seq/326 (line 2)

Telerik.Web.UI.GridFilterFunction.pars...")?b:Sys$Enum$parse.call(this,b,!!a);

I dont know this error, please help me fix this.
thanks,
hung

Grid

answered on 08 Jul 2011

4 answers

166 views

Datapager with ListBox

I have some issue putting a datapager to a list box. Following below is my code

<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListBox1">

</telerik:RadDataPager>

<telerik:RadListBox ID="RadListBox1" runat="server" AutoPostBack="True"

DataKeyField="EventLocation" DataSourceID="Listbox"

DataTextField="EventLocation" DataValueField="EventLocation"

DlisataKeyField="EventLocation" Skin="Black" allowpaging="true"

style="z-index: 1; left: 1109px; top: 114px; position: absolute; height: 48px; width: 155px; text-align: center;"> <ButtonSettings TransferButtons="All" />

</telerik:RadListBox

>



When i run my aspx page, it doesnt show any paging

DataPager

answered on 08 Jul 2011