RadAjaxManager and ClientIdMode="Static"

You may encounter this error when using the RadAjaxManager with controls that have their ClientIdMode set to Static.  

ASP.NET applies a prefix to all control IDs.  You can remove this prefix by setting the ClientIdMode property of  a control to "Static".   This makes it a little easier to access a control in Javascript using the controls' ID. 

This works just fine unless...... you're using the control in a RadAjaxManager.   Look at this code generated by the RadAjaxManager. with the txtScan ClientIdMode="Static"

Notice  id="txtScan"; just as you would expect when the ClientIdMode is Static.  However the RadAjaxManager wraps the control in a RadAjaxPanel and the name has the prefix characters added. This causes the "Unable to get property" error shown at the start of this article. 

Here is the generated code using ClientIdMode="Auto".

The prefix is added to the id.

You'll need to use syntax like this in your JavaScript code

var theTxtScanInput = document.getElementById('<%=txtScan.ClientID%>');   You may need to wrap your <script> section within a <telerik:RadCodeBlock runat="server">.

Moral of the Story

Don't use ClientIdMode="Static" when you're using the RadAjaxManager!

Visit www.BlueCanyonSoftware.com if you need custom software for your business.

Visual Studio 2015 Community

Visual Studio 2015 Community is available as a free download. License terms. Visit www.BlueCanyonSoftware.com if you need custom software for your business.

Page Scrolls to Top on RadDatePicker Click

Problem: You have a Telerik RadDatePicker as a single control or part of a filter on a RadGrid with a DateTime column. User clicks the calendar icon and the page scrolls to the top and the calendar is not displayed. You'll see a javascript ArgumentOutOfRange exception in the Inspect Element window of the browser.

The solution for me was replacing the asp:ScriptManager with the. telerik:RadScriptManager

<telerik:RadScriptManager ID="ScriptManager1" runat="server">
   <%-- Load scripts as a group and cache on browser.  --%>
   <Groups>
     <telerik:ScriptReferenceGroup>
       <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.jQueryPlugins.js" />
       </Scripts>
     </telerik:ScriptReferenceGroup>
   </Groups>

</telerik:RadScriptManager>

Custom Software for Your Business

Visit Blue Canyon Software if you need custom software for your business. 

Free Visual Studio Development Tools!

Visit this link to learn more about free development tools to include: 

• Visual Studio Community IDE
• Visual Studio Online 
• Visual Studio Code
• Azure App Service

RadioButtonList SelectedIndexChanged Only Fires Once !!!

I ran into an interesting issue today.  The SelectedIndexChanged event was raised only once after page load.    The problem was solved by adding ClientIdMode="Static"   

<asp:RadioButtonList ID="rblTimeStamp" runat="server"

RepeatDirection="Horizontal" 

ClientIdMode="Static" AutoPostBack="True" OnSelectedIndexChanged="OnTimeStampTypeChanged" >

    <asp:ListItem Value="CurrentTime" Text="Current  "></asp:ListItem>

    <asp:ListItem Value="CustomTime"  Text="Custom" ></asp:ListItem>

</asp:RadioButtonList>

Don't use a RadAjaxManager if you set the ClientIdMode to Static.  See blog post titled "RadAjaxManager and ClientIdMode="Static".

---

Another Approach Using RadAjaxManager

Don't set any ClientIdMode values to Static.

Set AutoPostBack to true for radiobuttonlist.
Set the radiobuttonlist as the initiator and updated control in the RadAjaxManager.
Reset the selected radiobutton in the event handler. 


<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"    DefaultLoadingPanelID="loadingPanelDlgInjections">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rblInjectionListChoice">
           <UpdatedControls>  
                <telerik:AjaxUpdatedControl ControlID="rblInjectionListChoice"/>
                <telerik:AjaxUpdatedControl ControlID="radCmbInjectionSites" />
           </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="loadingPanelDlgInjections" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>


<asp:RadioButtonList ID="rblInjectionListChoice" runat="server" RepeatDirection="Horizontal" AutoPostBack="True" 
     OnSelectedIndexChanged="rblInjectionListChoice_SelectedIndexChanged">
    <asp:ListItem value="shortList" Text="Short List&nbsp;&nbsp;" Selected="True"></asp:ListItem>
    <asp:ListItem value="longList" Text="Long List&nbsp;&nbsp;"></asp:ListItem>
</asp:RadioButtonList></div>

<telerik:RadComboBox ID="radCmbInjectionSites" runat="server" Width="100%"
          AutoPostBack="True"   RenderMode="Lightweight"
          Filter="StartsWith" EmptyMessage="Select Injection Site">
</telerik:RadComboBox>

Event Handler

//Iterate through the radio button list and reset the selected item
protected void rblInjectionListChoice_SelectedIndexChanged(object sender, EventArgs e)
{
foreach (ListItem item in rblInjectionListChoice.Items)
{
if (item.Selected)
{
item.Selected = true;
}
}

//Add your code here.
}


Visit www.BlueCanyonSoftware.com if you  need custom software for your business.

Custom Software Can Free You

Businesses outgrow data management by paper and spreadsheets.  At some point, you start to replace your time enjoying your entrepreneurial passion with the mundane task of managing the business data.  

Check out this article by Jeff Hayden in Inc.com. 

This quote from Jeff's article nails one of the best reasons to consider custom software to manage your business -- "Leveraging software actually lets you get back to doing more of what you love, because not only does it streamline and automate your processes, it streamlines and automates processes for your customers--and frees you up to think of creative ways that doing what you love can better serve your customers."

Contact Blue Canyon Software Consulting, Inc if you need custom software for your business.

Get back to what you love.

Get Assigned Roles With LINQ

Here's one way of creating a RadGrid with assigned roles for users. 

   <telerik:RadGrid runat="server" ID="gridUsers" AllowSorting="True"

                   AutoGenerateColumns="False" GroupPanelPosition="Top" 

                   ResolvedRenderMode="Classic"
                   onneeddatasource="gridUsers_NeedDataSource"  
                   onitemdatabound="gridUsers_ItemDataBound">
        <MasterTableView>
            <Columns>
                <telerik:GridBoundColumn DataField="userName" 
                    HeaderText="User Name" 
                    UniqueName="colUserName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="roles" 
                    HeaderText="Roles" 
                    UniqueName="colRoles">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="isApproved" 
                    HeaderText="Active User?" 
                    UniqueName="colIsApproved">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

using System;
using System.Linq;
using System.Web.Security;
using Telerik.Web.UI;

    protected void gridUsers_NeedDataSource(object sender, 
                     Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        try 
        { 
            using (var dc = new  MyModel.EntitiesModel())
            {
                var u = dc.Aspnet_Users.Select(a => new
                {
                    userName = a.UserName,
                    roles = string.Join(",", Roles.GetRolesForUser(a.UserName)),
                    isApproved = (Membership.GetUser(a.UserName)).IsApproved
                });
                if (null != u)
                {
                    this.gridUsers.DataSource = u.ToList();
                }
            }
        }
        catch (Exception)
        {
            throw;
        }
    }

    protected void gridUsers_ItemDataBound(object sender, 
                              Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem dataItem = (GridDataItem)e.Item;
            if (dataItem["colIsApproved"].Text != null &&
dataItem["colIsApproved"].Text == "False")
            {
                dataItem["colIsApproved"].BackColor = System.Drawing.Color.Red;
                dataItem["colIsApproved"].ToolTip = "This person cannot login.";
            }
        }
    }