or

I have a RadGrid on my page, and have the ReorderColumnsOnClient property set to true. This all works fine.
However, I also have a requirement to hide columns which are dragged *off* the grid.
Anybody have any ideas on how I might do this?
PS - I'd prefer to do this with the the regular Telerik events, as opposed to using undocumented functionality which might break on the next version.
Here's the prototype aspx I created.
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content><asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <h2> How do I detect a column has been dragged off the grid? </h2> <asp:ScriptManager runat="server" /> <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" GridLines="None"> <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True"> </ClientSettings> <MasterTableView DataKeyNames="ProductID" DataSourceID="SqlDataSource1"> <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings> <RowIndicatorColumn> <HeaderStyle Width="20px"></HeaderStyle> </RowIndicatorColumn> <ExpandCollapseColumn> <HeaderStyle Width="20px"></HeaderStyle> </ExpandCollapseColumn> <Columns> <telerik:GridBoundColumn DataField="ProductID" DataType="System.Int32" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" UniqueName="ProductID"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" UniqueName="ProductName"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" UniqueName="CategoryName"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="UnitPrice" DataType="System.Decimal" HeaderText="UnitPrice" SortExpression="UnitPrice" UniqueName="UnitPrice"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="UnitsInStock" DataType="System.Int16" HeaderText="UnitsInStock" SortExpression="UnitsInStock" UniqueName="UnitsInStock"> </telerik:GridBoundColumn> </Columns> </MasterTableView> </telerik:RadGrid> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [ProductID], [ProductName], [CategoryName], [UnitPrice], [UnitsInStock] FROM [Alphabetical list of products]"> </asp:SqlDataSource></asp:Content><add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient" />
protected void GrdConfig_UpdateCommand(object sender, GridCommandEventArgs e) { Hashtable newValues = new Hashtable(); ((GridEditableItem)e.Item).ExtractValues(newValues); Alert.Show(newValues["ColumnName"].ToString()); ... Working SQL code ... }<telerik:RadSplitter ID="InquiryDetailSplitter" runat="server" Orientation="Vertical" OnClientResized="SetElementDimensions" OnClientLoaded="SetElementDimensions"> <telerik:RadPane ID="InquiryDetailFieldsPane" runat="server" Width="300px"> ... </telerik:RadPane> <telerik:RadPane ID="InquiryDetailGridsPane" runat="server"> <asp:Label ID="InquiryDetailPacketGridLabel" runat="server" CssClass="GridLabel" Font-Bold="true" Font-Size="80%"></asp:Label> <telerik:RadGrid ID="InquiryDetailPacketGrid" runat="server" ShowFooter="true" AutoGenerateColumns="false" CssClass="AccountGrid" OnItemCommand="InquiryDetailPacketGrid_ItemCommand" OnItemDataBound="InquiryDetailPacketGrid_ItemCommand"> <MasterTableView ClientDataKeyNames="Id" DataKeyNames="Id"> <Columns> <telerik:GridTemplateColumn HeaderText="View" UniqueName="View" DataField="Id" Aggregate="Count" FooterAggregateFormatString="{0} Accounts" HeaderStyle-Width="85px"> <ItemTemplate> <asp:LinkButton ID="ShowDetailLink" runat="server" CommandName="ShowDetail" CommandArgument='<%# Eval("ID") %>' Text="View" /> </ItemTemplate> </telerik:GridTemplateColumn> </Columns> </MasterTableView> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true" /> </ClientSettings> <FooterStyle HorizontalAlign="Right" /> </telerik:RadGrid> <asp:Label ID="InquiryDetailNotesLabel" runat="server" CssClass="GridLabel" Font-Bold="true" Font-Size="80%">Additional information</asp:Label> <telerik:RadTabStrip ID="InquiryDetailNotesTabStrip" runat="server" MultiPageID="InquiryDetailNotesMultiPage" ShowBaseLine="false" AutoPostBack="false" > <Tabs> <telerik:RadTab Text="Combined" Value="Combined" Visible="false" /> <telerik:RadTab Text="Transactions" Value="Transactions" Visible="false" /> <telerik:RadTab Text="Correspondence" Value="Correspondence" Visible="false" /> <telerik:RadTab Text="Comments" Value="Comments" Visible="false" /> <telerik:RadTab Text="Miscellaneous" Value="Misc" Visible="false" /> <telerik:RadTab Text="Online Activity" Value="OnlineActivity" /> <telerik:RadTab Text="Attachments" /> </Tabs> </telerik:RadTabStrip> <telerik:RadMultiPage ID="InquiryDetailNotesMultiPage" runat="server" SelectedIndex="0"> <telerik:RadPageView ID="CombinedPageView" runat="server" Visible="false" Height="100%"> <telerik:RadGrid ID="InquiryDetailCombinedGrid" runat="server" AutoGenerateColumns="false" Height="100%"> <MasterTableView Height="100%" > <Columns> <telerik:GridBoundColumn HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" /> <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" /> <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" /> </Columns> </MasterTableView> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true"/> </ClientSettings> </telerik:RadGrid> </telerik:RadPageView> <telerik:RadPageView ID="TransactionsPageView" runat="server" Visible="false" Height="100%"> <telerik:RadGrid ID="InquiryDetailTransactionsGrid" runat="server" AutoGenerateColumns="false" Height="100%"> <MasterTableView Height="100%"> <Columns> <telerik:GridBoundColumn HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" /> <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" /> <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" /> </Columns> </MasterTableView> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true"/> </ClientSettings> </telerik:RadGrid> </telerik:RadPageView> <telerik:RadPageView ID="CorrespondencePageView" runat="server" Visible="false" Height="100%"> <telerik:RadGrid ID="InquiryDetailCorrespondenceGrid" runat="server" AutoGenerateColumns="false" Height="100%"> <MasterTableView Height="100%"> <Columns> <telerik:GridBoundColumn HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" /> <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" /> <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" /> </Columns> </MasterTableView> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true"/> </ClientSettings> </telerik:RadGrid> </telerik:RadPageView> <telerik:RadPageView ID="CommentsPageView" runat="server" Visible="false" Height="100%"> <telerik:RadGrid ID="InquiryDetailCommentsGrid" runat="server" AutoGenerateColumns="false" Height="100%"> <MasterTableView Height="100%"> <Columns> <telerik:GridBoundColumn HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" /> <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" /> <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" /> </Columns> </MasterTableView> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true"/> </ClientSettings> </telerik:RadGrid> </telerik:RadPageView> <telerik:RadPageView ID="MiscellaneousPageView" runat="server" Visible="false" Height="100%"> <telerik:RadGrid ID="InquiryDetailMiscellaneousGrid" runat="server" AutoGenerateColumns="false" Height="100%"> <MasterTableView Height="100%"> <Columns> <telerik:GridBoundColumn HeaderText="Date/Time" DataField="NoteDateTime" DataFormatString="{0:g}" UniqueName="NoteDateTime" DataType="DateTime" HeaderStyle-Width="130px" /> <telerik:GridBoundColumn HeaderText="Text" DataField="Text" UniqueName="Text" AllowSorting="false" /> <telerik:GridBoundColumn HeaderText="Collector" DataField="Collector" UniqueName="Collector" HeaderStyle-Width="100px" Visible="false" /> </Columns> </MasterTableView> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true"/> </ClientSettings> </telerik:RadGrid> </telerik:RadPageView> <telerik:RadPageView ID="OnlineActivityPageView" runat="server" Height="100%"> <telerik:RadGrid ID="InquiryDetailOnlineActivityGrid" runat="server" AutoGenerateColumns="false" Height="100%"> <MasterTableView Height="100%"> <Columns> <telerik:GridBoundColumn HeaderText="Date/Time" DataField="Date" DataFormatString="{0:g}" UniqueName="OnlineActivityDate" DataType="DateTime" HeaderStyle-Width="130px" /> <telerik:GridTemplateColumn HeaderText="Activity" UniqueName="Activity"> <ItemTemplate> <%# AccountActionType((IAccountAction)Container.DataItem)%> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridBoundColumn HeaderText="User" DataField="UserFullName" UniqueName="UserFullName" /> <telerik:GridBoundColumn HeaderText="Details" DataField="Details" UniqueName="Details" /> </Columns> </MasterTableView> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true"/> </ClientSettings> </telerik:RadGrid> </telerik:RadPageView> <telerik:RadPageView ID="AttachmentsPageView" runat="server" Height="100%"> <telerik:RadGrid ID="InquiryDetailAttachments" runat="server" AutoGenerateColumns="false" Height="100%"> <MasterTableView Height="100%"> <Columns> <telerik:GridBoundColumn HeaderText="Date/Time" DataField="UploadDate" DataFormatString="{0:g}" UniqueName="UploadDate" DataType="DateTime" HeaderStyle-Width="130px" /> <telerik:GridTemplateColumn HeaderText="Name" UniqueName="Name"> <ItemTemplate> <%# AttachmentLink((CawFile)Container.DataItem) %> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridBoundColumn HeaderText="File Size" DataField="FormattedFileSize" UniqueName="FormattedFileSize" /> </Columns> </MasterTableView> <ClientSettings> <Scrolling AllowScroll="true" UseStaticHeaders="true"/> </ClientSettings> </telerik:RadGrid> </telerik:RadPageView> </telerik:RadMultiPage> </telerik:RadPane></telerik:RadSplitter><telerik:RadScriptBlock ID="GridDimensionScriptBlock" runat="server"> <script type="text/javascript"> // this function will set the MultiPage dimensions and then for every PageView in the MultiPage, // the nested RadGrid within the PageView will be redrawn to fulfill the new CSS rules. function SetElementDimensions(sender, args) { // set the dimensions according to the new window size var setHeight = SetMultiPageDimensions(); // get the multi page control to interate through the page views var telerikMultiPage = $find("<%= InquiryDetailNotesMultiPage.ClientID %>"); var pageCollection = telerikMultiPage.get_pageViews(); // iterate the page views for (var i = 0; i != pageCollection._data.length; ++i) { var pageIteration = pageCollection._data[i]; // check the size on the Page View element to make sure that it is sized at 100 var pageElement = $("#" + pageIteration._element.id); pageElement.height(setHeight); // if the page has children, use them to select the grid by its id and set rgDataDiv height if (pageIteration._element.children.length > 0) { var nestedGridId = pageIteration._element.children[0].id; var nestedGrid = $find(nestedGridId); $("#" + nestedGridId).height(setHeight); nestedGrid.repaint(); } } } // Calculates and sets the height of the MultiPage element. This is accomplished by getting the top offset of the tabStrip and the // height of the tabStrip. These dimensions are then added together and subtracted from the height of the splitter itself for // the needed difference. function SetMultiPageDimensions(sender, args) { // get overall height available var splitterDivHeight = $("#" + "<%= InquiryDetailSplitter.ClientID %>").height(); var tabStripDiv = $("#" + "<%= InquiryDetailNotesTabStrip.ClientID %>"); // figure out the offset of the tab strip, and the height of the tabStrip to use in calculating available space // additional two: one for border and one for extra space var topOffset = tabStripDiv.offset().top + tabStripDiv.height() + 2; var additionalInfoMultiPageDiv = $("#" + "<%= InquiryDetailNotesMultiPage.ClientID %>"); var heightToSet = splitterDivHeight - topOffset; additionalInfoMultiPageDiv.height(heightToSet); return heightToSet; } </script></telerik:RadScriptBlock>