This is a migrated thread and some comments may be shown as answers.

skin problem and focus error

2 Answers 56 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mattias
Top achievements
Rank 1
Mattias asked on 21 Nov 2008, 09:40 AM
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> 



2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 24 Nov 2008, 10:32 AM
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.
0
Mattias
Top achievements
Rank 1
answered on 24 Nov 2008, 12:40 PM
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.

Tags
Grid
Asked by
Mattias
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Mattias
Top achievements
Rank 1
Share this question
or