RadColorPicker in a RadGrid

[alpal111]

Issue 1:

I'm trying to add a radcolorpicker to a grid such that when inserting or updating a row, the color picker will display and it's selected value will show in the "Color" column field.

Using a templates i've added it to the edit column, but it doesn't do anything, can't even select colors, and when compiled and ran I get a javascript error: "Sys" is undefined.

I'm sure I have the basic idea of how to use it wrong.  Of course. :)

I have a scriptmanager in place, although I'm not going to speculate on what that does. :)

Any ideas on what I'm missing, or doing wrong?

Issue 2:

protected void RadColorPicker1_ColorChanged(object sender, EventArgs e)
{
   Label1.Text = ColorTranslator.ToHtml(RadColorPicker1.SelectedColor);
}

When compiling this gives me a compile time Error -- 
"The name 'RadColorPicker1' does not exist in the current context ..."

How do I ensure it's context?

Al

<radG:RadGrid
    ID="RadGrid2" runat="server"
    Height="100px"
    Width="500px"
    Title="Rules"
    BorderStyle="Solid"
    BorderWidth="1px"
    DataSourceID="ObjectDataSource1"
    GridLines="None"
    AllowAutomaticInserts="True"
    AllowAutomaticUpdates="True"
    AutoGenerateColumns="False"
    MasterTableView-AllowPaging="true"
    OnDeleteCommand="RadGrid2_DeleteCommand"
    OnPreRender="RadGrid2_PreRender"
    OnItemEvent="RadGrid2_ItemEvent"
    OnItemInserted="RadGrid2_ItemInserted"
    OnItemUpdated="RadGrid2_ItemUpdated"
    OnCancelCommand="RadGrid2_CancelCommand"
    OnDataBound="RadGrid2_DataBound" >
    <MasterTableView
        DataKeyNames="idExceptionRule"
        DataSourceID="ObjectDataSource1"
        AllowPaging="True" >
        <ExpandCollapseColumn Visible="False">
            <HeaderStyle Width="19px" />
        </ExpandCollapseColumn>
        <RowIndicatorColumn Visible="False">
            <HeaderStyle Width="20px" />
        </RowIndicatorColumn>
        <Columns>
            <radG:GridBoundColumn DataField="decMin" HeaderText="From" UniqueName="From">
            </radG:GridBoundColumn>
            <radG:GridBoundColumn DataField="decMax" HeaderText="To" UniqueName="To">
            </radG:GridBoundColumn>
            <radG:GridBoundColumn DataField="hexColourFont" HeaderText="Color" UniqueName="Color">
                <ItemStyle BackColor="White" BorderColor="#404040" BorderStyle="Solid" BorderWidth="1px"
                    HorizontalAlign="Left" VerticalAlign="Middle" />
            </radG:GridBoundColumn>
            <radG:GridTemplateColumn DataField="hexColourFont" ShowSortIcon="False" UniqueName="TemplateColumn">
                <EditItemTemplate>
                   <telerik:RadColorPicker ID="RadColorPicker1" runat="server" Preset="Web216"
                        ShowIcon="True" OnDataBinding="RadColorPicker1_ColorChanged" AutoPostBack="True" OnColorChanged="RadColorPicker1_ColorChanged">
                    </telerik:RadColorPicker>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </EditItemTemplate>
            </radG:GridTemplateColumn>
            <radG:GridEditCommandColumn>
            </radG:GridEditCommandColumn>
            <radg:GridButtonColumn CommandName="Delete" Text="Delete"
               UniqueName= "DeleteColumn" ButtonType="ImageButton" ImageUrl=".\delete.gif" />

        </Columns>
        <EditFormSettings>
            <EditColumn UniqueName="EditCommandColumn1">
            </EditColumn>
        </EditFormSettings>
    </MasterTableView>
    <ValidationSettings CommandsToValidate="PerformInsert,Update,Delete" />
</radG:RadGrid>

[Tsvetie]

Hi alpal111,

1) "Sys is undefined" error - the web.config is not a ASP.NET AJAX project config file. You need to replace the original config file with a config file, containing all AJAX HttpHandler and HttpModule declarations.

2) You get that error, because the 'RadColorPicker1'  is placed in a RadGrid - you should get the same error for the Label1 control. First, you have to find the Row of the RadGrid that is being edited and after that, use the FindControl method to find the controls in it. For example:

    protected void RadColorPicker1_ColorChanged(object sender, EventArgs e)
    {
        int index = Int32.Parse(this.RadGrid1.EditIndexes[0]);
        RadColorPicker cpk = (RadColorPicker)(this.RadGrid1.Items[index]).FindControl("RadColorPicker1");
        Label1.Text = cpk.SelectedColor.ToString();
    }

However, this event handler will not be executed and we are aware of this issue. It is on our TODO list we will fix it as soon as possible.

All the best,
Tsvetie
the telerik team

Instantly find answers to your questions at the new Telerik Support Center

[alpal111]

Re Issue 1 - Sys is undefined :
Can i get a quick sample of what to see in the config file? Should I be adding something in the <assemblies></assemblies> node?

<?xml version="1.0"?>
<!--
    Note: As an alternative to hand editing this file you can use the
    web admin tool to configure settings for your application. Use
    the Website->Asp.Net Configuration option in Visual Studio.
    A full list of settings and comments can be found in
    machine.config.comments usually located in
    \Windows\Microsoft.Net\Framework\v2.x\Config
-->
<configuration>
    <appSettings>
        <add key="MatrixPath" value="/thresholdingmatrix/"/>
    </appSettings>
    <connectionStrings/>
    <system.web>
        <!--
            Set compilation debug="true" to insert debugging
            symbols into the compiled page. Because this
            affects performance, set this value to true only
            during development.
        -->
        <compilation debug="true">
            <assemblies>
                <add assembly="System.DirectoryServices, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
                <add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
                <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/></assemblies>
        </compilation>
        <!--  APPLICATION-LEVEL TRACE LOGGING
          Application-level tracing enables trace log output for every page within an application.
          Set trace enabled="true" to enable application trace logging.  If pageOutput="true", the
          trace information will be displayed at the bottom of each page.  Otherwise, you can view the
          application trace log by browsing the "trace.axd" page from your web application
          root.
    -->
        <trace enabled="true" requestLimit="50" pageOutput="false" traceMode="SortByTime" localOnly="false"/>
        <!--
            The <authentication> section enables configuration
            of the security authentication mode used by
            ASP.NET to identify an incoming user.
             userName="************" password="**********"
        -->
        <trust level="Full"/>
        <httpModules>
            <add name="Session" type="System.Web.SessionState.SessionStateModule"/>
        </httpModules>
        <customErrors mode="Off"/>
        <authentication mode="Windows"/>
        <identity impersonate="true"/>
        <!--
            The <customErrors> section enables configuration
            of what to do if/when an unhandled error occurs
            during the execution of a request. Specifically,
            it enables developers to configure html error pages
            to be displayed in place of a error stack trace.

        <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
            <error statusCode="403" redirect="NoAccess.htm" />
            <error statusCode="404" redirect="FileNotFound.htm" />
        </customErrors>
        -->
    </system.web>
</configuration>

And, I hope you get the event handler not firing thing fixed soon.
Thanks,
Al

[Kevin]

In a new Ajax-Enabled Web Site project, (File ->  New -> Web Site -> ASP.NET AJAX Enabled Web-Site). VS.NET seems to autogenerate additional stuff in the web.config - for example this is the default web.config I have for this site (it appears that there are additional modules / handlers):

<?xml version="1.0"?>
<configuration>
    <configSections>
        <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
            <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
                <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                    <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>
                    <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
                    <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
                </sectionGroup>
            </sectionGroup>
        </sectionGroup>
    </configSections>
    <system.web>
        <pages>
            <controls>
                <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            </controls>
        </pages>
        <!--
          Set compilation debug="true" to insert debugging
          symbols into the compiled page. Because this
          affects performance, set this value to true only
          during development.
    -->
        <compilation debug="true">
            <assemblies>
                <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
                <add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/></assemblies>
        </compilation>
        <httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
        </httpHandlers>
        <httpModules>
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        </httpModules>
    </system.web>
    <system.web.extensions>
        <scripting>
            <webServices>
                <!-- Uncomment this line to customize maxJsonLength and add a custom converter -->
                <!--
      <jsonSerialization maxJsonLength="500">
        <converters>
          <add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>
        </converters>
      </jsonSerialization>
      -->
                <!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. -->
                <!--
        <authenticationService enabled="true" requireSSL = "true|false"/>
      -->
                <!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved
           and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and
           writeAccessProperties attributes. -->
                <!--
      <profileService enabled="true"
                      readAccessProperties="propertyname1,propertyname2"
                      writeAccessProperties="propertyname1,propertyname2" />
      -->
            </webServices>
            <!--
      <scriptResourceHandler enableCompression="true" enableCaching="true" />
      -->
        </scripting>
    </system.web.extensions>
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <modules>
            <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        </modules>
        <handlers>
            <remove name="WebServiceHandlerFactory-Integrated"/>
            <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        </handlers>
    </system.webServer>
</configuration>

[Tsvetie]

Hello Kevin,
Yes, these are exactly the AJAX HttpHandler and HttpModule declarations you were missing.

Sincerely yours,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[alpal111]

The sys undefined error was caused by the <%@ Register Assembly /> tag in the .aspx file left over from when I at some point tried using a Prometeus RadAjaxManager which caused the error prompting me to discard it.  At this point it was still there, the assembly register tag, and the error went away when i removed the tag.  The old AjaxManager is working fine instead.
Al

[Polymorphic Solutions]

I know this is a very old post. But is the issue where the OnColorChanged event not firing when the RadPicker is in the grid already fixed? Thank you.

[Attila Antal]

Hi,

Allow me to clear the misunderstanding. There is no problem in having RadColorPicker control in a GridTemplateColumn. However, when it comes to accessing them programmatically, a specific procedure needs to be followed since it is a different procedure when the Control is outside of the Grid and another one when it is inside. Please review the Accessing Values and Controls article for more information.

For example, there is one Control outside, and there is one inside:

<telerik:RadColorPicker ID="RadColorPicker1" runat="server"></telerik:RadColorPicker>

<telerik:RadGrid ID="RadGrid1" runat="server">
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn>
                <EditItemTemplate>
                    <telerik:RadColorPicker ID="RadColorPicker2" runat="server"></telerik:RadColorPicker>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

 

Procedure to access the two controls on server-side:

protected void RadButton1_Click(object sender, EventArgs e)
{
    RadColorPicker firstPicker = this.RadColorPicker1;

    // Accessing the ColorPicker of the First Line
    RadColorPicker secondPicker = RadGrid1.Items[0].FindControl("RadColorPicker2") as RadColorPicker;

    // Accessing the ColorPicker in all Grid rows one by one using a Loop
    foreach (GridItem item in RadGrid1.Items)
    {
        RadColorPicker colorPicker = item.FindControl("RadColorPicker2") as RadColorPicker;
    }
}

 

Regards,
Attila Antal
Progress Telerik