Hi Team,
I am using the Telerik Radgrid to populate the data from Database in 2 level Hierarchical (Master and Details) as below. I want to reorder the rows similar to Column on client side without Postback to the server.
Also I want to save the Grid data changes at once to the Database on a ASP.Net Button Click.
Could you please help me.
Thanks,
Sujana.
<telerik:RadGrid ID="RadDetails" runat="server" AutoGenerateColumns="False" AutoGenerateHierarchy="True" GroupPanelPosition="Top"
OnDetailTableDataBind="RadDetails_DetailTableDataBind" Style="overflow: hidden" Height="600px" OnBatchEditCommand="RadDetails_BatchEditCommand"
OnItemCreated="RadDetails_ItemCreated">
<ClientSettings AllowColumnsReorder="true" AllowExpandCollapse="true" AllowRowsDragDrop="true" ReorderColumnsOnClient="true" ColumnsReorderMethod="Reorder">
<Selecting AllowRowSelect="true" EnableDragToSelectRows="true" />
<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
<Resizing AllowColumnResize="true" EnableRealTimeResize="true" AllowResizeToFit="true" ResizeGridOnColumnResize="true" />
<ClientEvents OnRowClick="RowClicked" OnRowDropping="onRowDropping" OnRowDropped="OnRowDropped" />
</ClientSettings>
<MasterTableView HierarchyLoadMode="Client" HierarchyDefaultExpanded="true" ClientDataKeyNames="DisplayOrder" DataKeyNames="DisplayOrder" EditMode="Batch" TableLayout="Fixed">
<HeaderStyle Font-Bold="true" Wrap="false" />
<ItemStyle Wrap="false" Width="200px" />
<BatchEditingSettings EditType="Cell" SaveAllHierarchyLevels="true" OpenEditingEvent="DblClick" />
<Columns>
<telerik:GridBoundColumn ItemStyle-Font-Bold="true" HeaderText="" DataField="OrderFormSubCategory"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Category Notes" DataField="CategoryNotes"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="DisplayOrder" DataField="DisplayOrder" Visible="false"></telerik:GridBoundColumn>
</Columns>
<DetailTables>
<telerik:GridTableView DataKeyNames="OrderFormSubCategory" runat="server" Name="Details" AutoGenerateColumns="false" EditMode="Batch" HierarchyLoadMode="Client">
<HeaderStyle Font-Bold="true" Wrap="false" Width="100px" HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle Wrap="false" HorizontalAlign="Left" VerticalAlign="Middle" />
<AlternatingItemStyle Wrap="false" HorizontalAlign="Left" VerticalAlign="Middle" />
<BatchEditingSettings EditType="Cell" OpenEditingEvent="DblClick" />
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="OrderFormSubCategory" MasterKeyField="DisplayOrder" />
</ParentTableRelation>
<Columns>
<telerik:GridBoundColumn HeaderText="Order Form Sub Category" DataField="OrderFormSubCategory" Visible="false"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="ISBN" DataField="ISBN" HeaderStyle-Width="100px" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="ISBN13" DataField="ISBN13" ReadOnly="true"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Shot Title" DataField="TitleDesc" ReadOnly="true" Resizable="true"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Author" DataField="Author" ReadOnly="true"></telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Indent" UniqueName="Indent" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:CheckBox ID="chkIndent" runat="server" Checked='<%# Eval("IsIndent") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn HeaderText="Format" DataField="Format" ReadOnly="true"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="RRP" DataField="RRP" ReadOnly="true" DataType="System.Decimal" DataFormatString="{0:F2}"></telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Featured Title" UniqueName="FeaturedTitle">
<ItemTemplate>
<asp:CheckBox ID="chkFeaturedttl" runat="server" Checked='<%# Eval("IsShaded") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn HeaderText="Notes" HeaderStyle-Width="200px" DataField="Notes"></telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Page After" UniqueName="PageAfter">
<ItemTemplate>
<asp:CheckBox ID="chkPageAfter" runat="server" Checked='<%# Eval("NewPageAfter") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="LocalAuthor" UniqueName="LocalAuthor">
<ItemTemplate>
<asp:CheckBox ID="chkLocalAuthor" runat="server" Checked='<%# Eval("IsAustAuthor") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn HeaderText="Order" DataField="DisplayOrder" ReadOnly="true"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Boxed" DataField="Boxed"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="BIC" DataField="BIC" ReadOnly="true"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Series" DataField="Series" ReadOnly="true"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Page Extent" DataField="PageExtent" ReadOnly="true"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Long Title" DataField="LongTitle" ReadOnly="true"></telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
</MasterTableView>
</telerik:RadGrid>
3 Answers, 1 is accepted
I am afraid reordering rows on client-side is not supported:
http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/rows/drag-and-drop/defaultcs.aspx
You can try to implement a custom jQuery solution to reorder the tr elements, but please keep in mind that this approach would be out of our support scope.
You can check Batch editing for the second requirement:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx
Regards,
Eyup
Telerik
Rank 1
Hi Eyup,
I have got Reorder working fine. but with the Batch Edit, i want to save all the changes from Master and Details table views to Database. i am using the below code for that.
function saveChangesInGrid(Sender, Agrs) {
var DetailsGrid = $find("<%= RadDetails.ClientID %>");
var BatchMgr = DetailsGrid.get_batchEditingManager();
var hasChanges = BatchMgr.hasChanges(DetailsGrid.get_masterTableView());
if (hasChanges) {
alert("there are some changes in the OF");
//BatchMgr.saveTableChanges([DetailsGrid.get_masterTableView()]);
BatchMgr.saveAllChanges();
}
};
The below line is outside of the grid
<asp:Button runat="server" ID="btnSaveOrderForm" Text="Save OrderForm" OnClientClick="saveChangesInGrid();" />
and this is triggering OnBatchEditCommand. until this all fine.
the problem is, it is not updating the Details table.
Please help me on this.
Thanks,
Sujana.
Please make sure that you are not using DataBind() to bind the grid. Performing complex grid operations such as Inserting, Deleting, Updating, Hierarchy relations, Grouping, Exporting, Paging, Sorting, Filtering, etc. require accommodating appropriate database operations. Therefore, we suggest you to avoid Simple Databinding and strongly recommend the use of more advanced databinding methods, which automatically handle the aforementioned functions:
Declarative DataSource
Programmatic Data Binding (NeedDataSource event)
In addition, temporarily disable any AJAX on the page if present (RadAjaxManager, RadAjaxPanel, UpdatePanel, etc.) and see whether the functionality works as expected. Also, enable your script debugger (FireBug or F12) to see whether there are any script or server errors interfering.
Also, please make sure you are using the latest release version of the controls.
Regards,
Eyup
Telerik