skin problem and focus error

[Mattias]

Hi,
I have 2 problems:
1. With the tags: EnableEmbeddedSkins="false" ImagesPath="/App_Themes/Gray/Grid/" I get javascript error:
can't move focus to the control because it is invisible, not enabled or of a type that does not accept the focus.
If I remove the imagepath no error shows.

2. As you see in the print screen below, the datepicker does not find the sprite, what can that be? (I have of course included the css-file and the image, because it works for other datepickers outside of grids.)

http://www.svenskwebbhandel.se/printscreen.gif

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="False" AutoGenerateColumns="False"
        GridLines="None" Skin="Gray" AllowAutomaticDeletes="false" AllowAutomaticInserts="false"
        OnInsertCommand="RadGrid1_InsertCommand" OnUpdateCommand="RadGrid1_UpdateCommand"
        OnNeedDataSource="RadGrid1_NeedDataSource"
        OnDeleteCommand="RadGrid1_DeleteCommand"
        onitemcreated="RadGrid1_ItemCreated"
        OnItemCommand="RadGrid1_ItemCommand"
        EnableEmbeddedSkins="false" ImagesPath="/App_Themes/Gray/Grid/">
        <ClientSettings>
            <ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" />
        </ClientSettings>
        <MasterTableView Name="Master" EditMode="EditForms" CommandItemDisplay="Top"
            GridLines="None" DataKeyNames="Id" NoMasterRecordsText="Det finns inga nyheter">
            <CommandItemSettings AddNewRecordText="Lägg till" RefreshText="Uppdatera" />
            <RowIndicatorColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <EditFormSettings EditFormType="Template">
                <FormTemplate>
                <table class="edittable">
                    <tr>
                        <td>Rubrik:</td>
                        <td>
                            <asp:TextBox ID="Heading" runat="server" Text='<%# Bind("Heading") %>' CssClass="large"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td>Text:</td>
                        <td>
                            <telerik:RadEditor ID="Text" runat="server" Skin="Gray" Content='<%# Bind("Text") %>' >
                                <Tools>
                                   <telerik:EditorToolGroup>
                                       <telerik:EditorTool Name="Bold" />
                                       <telerik:EditorTool Name="Italic" />
                                       <telerik:EditorTool Name="Underline" />
                                       <telerik:EditorTool Name="StrikeThrough" />
                                       <telerik:EditorTool Name="JustifyLeft" />
                                       <telerik:EditorTool Name="JustifyRight" />
                                       <telerik:EditorTool Name="JustifyCenter" />
                                       <telerik:EditorTool Name="JustifyFull" />
                                       <telerik:EditorTool Name="LinkManager" />
                                   </telerik:EditorToolGroup>
                               </Tools>
                            </telerik:RadEditor>
                        </td>
                    </tr>
                    <tr>
                        <td>Visas från:</td>
                        <td>
                            <telerik:RadDatePicker ID="StartDate" runat="server" dbSelectedDate='<%# Bind("StartDate") %>' EnableEmbeddedSkins="false">
                            </telerik:RadDatePicker>
                        </td>
                    </tr>
                    <tr>
                        <td>Visas t.o.m:</td>
                        <td>
                            <telerik:RadDatePicker ID="EndDate" runat="server" dbSelectedDate='<%# Bind("EndDate") %>' EnableEmbeddedSkins="false">
                            </telerik:RadDatePicker>
                        </td>
                    </tr>
                    <tr>
                        <td>Aktiverad:</td>
                        <td>
                            <asp:CheckBox ID="IsEnabled" runat="server" Checked='<%# (Container is GridEditFormInsertItem) ? false : Eval("IsEnabled") %>' /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                             <asp:Button ID="btnUpdate" Text="Spara" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />
                        </td>
                    </tr>
                </table>
                </FormTemplate>
            </EditFormSettings>
            <ExpandCollapseColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn HeaderText="Rubrik" UniqueName="Heading" DataField="Heading" />
                <telerik:GridHTMLEditorColumn UniqueName="Text" DataField="Text" HeaderText="Text" Display="false" />
                <telerik:GridDateTimeColumn UniqueName="StartDate" HeaderText="Visas från" DataField="StartDate" DataFormatString="{0:d}" />
                <telerik:GridDateTimeColumn UniqueName="EndDate" HeaderText="Visas t.o.m." DataField="EndDate" DataFormatString="{0:d}" />
                <telerik:GridCheckBoxColumn UniqueName="IsEnabled" HeaderText="Aktiverad" DataField="IsEnabled" />

                <telerik:GridEditCommandColumn CancelText="Avbryt" EditText="Ändra" InsertText="Spara" UpdateText="Spara" ButtonType="ImageButton" UniqueName="EditCommandColumn">
                    <HeaderStyle HorizontalAlign="Right" Width="20" />
                    <ItemStyle HorizontalAlign="Right" Width="20" />
                </telerik:GridEditCommandColumn>
                <telerik:GridButtonColumn ConfirmText="Är du säker på att du vill radera denna nyhet?"
                    ConfirmDialogType="Classic" ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete"
                    Text="Radera" UniqueName="DeleteColumn">
                    <HeaderStyle HorizontalAlign="Right" Width="20" />
                    <ItemStyle HorizontalAlign="Right" Width="20" />
                </telerik:GridButtonColumn>
            </Columns>
            <EditItemTemplate>

            </EditItemTemplate>
            <PagerStyle PagerTextFormat="Ändra sida: {4} &amp;nbsp;Visar sida {0} av {1}, kunder {2} till {3} av {5}." />
        </MasterTableView>
        <FilterMenu EnableTheming="True">
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </FilterMenu>
    </telerik:RadGrid>

[Dimo]

Hello Mattias,

You seem to have not specified a skin for the datepickers, that's why the Default skin is set. However, if you want Gray to be used, you should set it explicitly, because RadControls inside a RadGrid template do not inherit the RadGrid skin setting automatically.

As for the focus error, I can't reproduce this, but you should be aware that when you set ImagesPath, all RadGrid sprite buttons (which are actually PushButtons) are rendered as ImageButtons or ordinary images. Have this in mind if you are implementing some custom Javascript.

Let us know if you need more information. Please send us a complete runnable page if the focus error persists.


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mattias]

Hi Dimo,

thank you for your reply! :)

1. Added "Gray" to the skin property solved it.
2. I found the problem: I had client script OnGridCreated activated in the grid (but not using it) and in the function there is the focus the cause the error:

function GridCreated(sender, eventArgs)
         {
         editedRow = null;

         var gridElement = sender.get_element();
         var elementsToUse = [];
             inputs = gridElement.getElementsByTagName("input");
             for (var i = 0; i < inputs.length;i++)
             {
             if(inputs[i].type.toLowerCase() == "hidden")
             {
                        continue;
             }

             Array.add(elementsToUse, inputs[i]);
                 inputs[i].onchange = TrackChanges;
             }

             dropdowns = gridElement.getElementsByTagName("select");
             for (var i = 0; i < dropdowns.length;i++)
             {
                 dropdowns[i].onchange = TrackChanges;
             }

             setTimeout(function(){if(elementsToUse[0])elementsToUse[0].focus();},100);
         }

It's just some javascript I copy pasted from your website.
Removing the event cleared the error.