[Solved] RadGrid drag and drop fails in IE

[John M]

My drag and drop works perfectly in Chrome, however I just discovered that in IE, the grid 'loses' the associated styles and javascript after a postback.  When the page first loads, everything looks and works.  But after dragging, the page does a full postback (even though I am using a RadAjaxPanel) and when it loads again I see my grid populated with all the right data but it does not display correctly and the drag and drop no longer works.

The attached images show what it looks like before and after a drag.

Here are my grids:

                <telerik:RadGrid runat="server" ID="grdAvailableItems" AllowMultiRowSelection="True"

                    Visible="true" ShowHeader="false" Height="145" Width="620" OnNeedDataSource="grdAvailableItems_NeedDataSource"

                    OnRowDrop="grdAvailableItems_RowDrop" AutoGenerateColumns="False" GridLines="None"

                    Skin="Default" BorderColor="#8CB71F" BorderWidth="1px">

                    <MasterTableView DataKeyNames="ItemTypeID">

                        <NoRecordsTemplate>

                            <div style="padding: 3px 0px 0px 5px">

                                Click on an item above to load selections</div>

                        </NoRecordsTemplate>

                        <Columns>

                            <telerik:GridBoundColumn DataField="ItemTypeName" HeaderText="ItemTypeName" UniqueName="ItemTypeName">

                            </telerik:GridBoundColumn>

                        </Columns>

                    </MasterTableView>

                    <ClientSettings AllowRowsDragDrop="True">

                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />

                        <ClientEvents OnRowDropping="onRowDropping" />

                        <Scrolling AllowScroll="True" />

                    </ClientSettings>

                </telerik:RadGrid>

and 

 <telerik:RadGrid runat="server" ID="grdSelectedItems" AllowMultiRowSelection="true"

                    OnDeleteCommand="grdSelectedItems_DeleteCommand" Visible="true" ShowHeader="false"

                    Height="125" Width="620" AutoGenerateColumns="False" OnNeedDataSource="grdSelectedItems_NeedDataSource"

                    OnRowDrop="grdSelectedItems_RowDrop" Skin="Default" BorderColor="#8CB71F" BorderWidth="1px">

                    <MasterTableView DataKeyNames="ItemTypeID">

                        <NoRecordsTemplate>

                            <div style="height: 95px; width: 590px; cursor: pointer; padding: 3px 0px 0px 5px">

                                Drag selected items to this area</div>

                        </NoRecordsTemplate>

                        <Columns>

                            <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" Text="Delete"

                                UniqueName="DeleteColumn">

                                <ItemStyle HorizontalAlign="Center" Width="20px" />

                            </telerik:GridButtonColumn>

                            <telerik:GridBoundColumn DataField="ItemTypeName" HeaderText="ItemTypeName" UniqueName="ItemTypeName">

                            </telerik:GridBoundColumn>

                        </Columns>

                    </MasterTableView>

                    <ClientSettings AllowRowsDragDrop="True">

                        <Selecting AllowRowSelect="False" EnableDragToSelectRows="True" />

                        <Scrolling AllowScroll="True" />

                    </ClientSettings>

                </telerik:RadGrid>

Thanks for any help!

- John

[Pavlina]

Hi John,

Could you please examine the following online demo and let us know what is the difference in your scenario?
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx

Best wishes,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[John M]

As best I could tell there are no differences.  I actually began this by copying the grid in the sample and changing it to work the way I needed it too. I have a few changes to the style of the grid, and that is it.  I pasted the code for my grid above in case I turned some setting on that I shouldn't have.  Again, it works perfect in Chrome, IE8 is the only issue.  Does anything look wrong with my grid, is there anything that shouldn't be there?  Any ideas would be great.  See the attached images in the orginal post for reference.

Thanks!

- John

[John M]

I have found a fix for this problem.  I was implementing a radcombobox with search and was experiencing incorrect behavior.  After some googling I cam across this article:http://www.telerik.com/community/forums/aspnet-ajax/editor/q1-2-9-image-manager-disable-new-folder-button-and-disable-image-editor.aspx which led me to the hotfix.  After updating to the latest DLL everything is working great in both IE and Chrome.

- John