Hello, I am having problem positioning correctly popup window when grid pagesize is 100 and grid using static headers.
When scrolling to the bottom of the page and clicking edit button, popup form displaying outside of screen boundries.
I tried approach with implementing event OnPopShowing, but I think it missing Y position in scrolling area.
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
var popUp;
function PopUpShowing(sender, eventArgs) {
popUp = eventArgs.get_popUp();
var gridWidth = sender.get_element().offsetWidth;
var gridHeight = sender.get_element().offsetHeight;
var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
}
</script>
</telerik:RadCodeBlock>
<telerik:RadGrid ID="gridLockbox" runat="server" PageSize="100" PagerStyle-PageButtonCount="5"
OnNeedDataSource="gridLockbox_NeedDataSource" OnDetailTableDataBind="gridLockbox_DetailTableDataBind"
OnItemDataBound="gridLockbox_ItemDataBound" OnUpdateCommand="gridLockbox_UpdateCommand"
AllowPaging="true" AllowSorting="true" ShowGroupPanel="true" Height="700px"
RenderMode="Lightweight" Skin="WebBlue">
<GroupingSettings ShowUnGroupButton="True" CaseSensitive="false" />
<ClientSettings AllowColumnsReorder="true" AllowColumnHide="true" AllowDragToGroup="true">
<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
<ClientEvents OnPopUpShowing="PopUpShowing" />
</ClientSettings>
<MasterTableView EditMode="PopUp" AutoGenerateColumns="false" AllowFilteringByColumn="true" DataKeyNames="TransUID"
AllowMultiColumnSorting="true" CommandItemDisplay="None" ShowGroupFooter="true" TableLayout="Fixed" Font-Size="10">
<EditFormSettings EditFormType="WebUserControl" UserControlName="LockboxCtrl.ascx">
<PopUpSettings Modal="true" Width="1500px" KeepInScreenBounds="False"/>
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>
Group by is only available when done at design time.
<telerik:RadGrid ID="gridLockbox" runat="server" PageSize="20" PagerStyle-PageButtonCount="5" AllowMultiRowSelection="true"
OnNeedDataSource="gridLockbox_NeedDataSource" OnDetailTableDataBind="gridLockbox_DetailTableDataBind"
OnItemDataBound="gridLockbox_ItemDataBound" OnUpdateCommand="gridLockbox_UpdateCommand"
AllowPaging="true" AllowSorting="true" ShowGroupPanel="true" CellSpacing="0" Width="100%" Height="700px"
RenderMode="Lightweight" ShowFooter="true" Skin="WebBlue">
<GroupingSettings ShowUnGroupButton="True" CaseSensitive="false"/>
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
</ClientSettings>
<MasterTableView EditMode="PopUp" AutoGenerateColumns="false" AllowFilteringByColumn="true" DataKeyNames="TransUID"
AllowMultiColumnSorting="true" CommandItemDisplay="None" TableLayout="Fixed" Font-Size="10">
<DetailTables>
<telerik:GridTableView DataKeyNames="RecordId" Name="Details" Width="100%" AutoGenerateColumns="false" TableLayout="Fixed">
<Columns>
<telerik:GridBoundColumn DataField="FileOperation" HeaderText="File Operation" HeaderButtonType="None">
<HeaderStyle Width="180px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="FileStatus" HeaderText="File Status" HeaderButtonType="TextButton">
<HeaderStyle Width="200px" />
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="CreatedDateTime" HeaderText="Created At">
<HeaderStyle Width="250px" />
</telerik:GridDateTimeColumn>
<telerik:GridBoundColumn DataField="Notes" HeaderText="Notes" HeaderButtonType="TextButton"></telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
<GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldAlias="Date_Time" FieldName="Date_Time" FormatString="{0:MM/dd/yyyy}" HeaderValueSeparator=" from date: " />
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField FieldName="Date_Time" SortOrder="Descending" />
</GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
<Columns>
<telerik:GridEditCommandColumn UniqueName="EditColumn" HeaderText="Edit" Exportable="false">
<HeaderStyle Width="50px" />
</telerik:GridEditCommandColumn>
<telerik:GridBoundColumn UniqueName="Lockbox" DataField="Lockbox" HeaderText="Lockbox" HeaderStyle-Width="180px" FilterControlWidth="70%">
<FilterTemplate>
<telerik:RadComboBox RenderMode="Lightweight" ID="cmbLockbox" DataSource='<%#LockboxNames %>' DataTextField="Name"
DataValueField="ID" Width="150px" AppendDataBoundItems="true"
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Lockbox").CurrentFilterValue %>'
runat="server" OnClientSelectedIndexChanged="LockboxIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="All" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function LockboxIndexChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("Lockbox", args.get_item().get_value(), "EqualTo");
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn UniqueName="Date_Time" DataField="Date_Time" HeaderText="Date" DataFormatString="{0:MM/dd/yyyy}">
<HeaderStyle Width="180px" />
</telerik:GridDateTimeColumn>
<telerik:GridBoundColumn UniqueName="TransSource" DataField="TransSource" HeaderText="Trans Type" Display="false"></telerik:GridBoundColumn>
<telerik:GridNumericColumn UniqueName="Amount" DataField="Amount" HeaderText="Amount" DataType="System.Decimal" DataFormatString="{0:C}" FilterControlWidth="80%" Aggregate="Sum">
<HeaderStyle Width="140px" />
</telerik:GridNumericColumn>
<telerik:GridBoundColumn UniqueName="ABA_RT" DataField="ABA_RT" HeaderText="Routing number">
<HeaderStyle Width="200px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="AccountNum" DataField="AccountNum" HeaderText="Account number">
<HeaderStyle Width="210px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="CheckNum" DataField="CheckNum" HeaderText="Check Number">
<HeaderStyle Width="200px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="FileOperation" DataField="FileOperation" HeaderText="File Operation">
<HeaderStyle Width="200px" />
<FilterTemplate>
<telerik:RadComboBox RenderMode="Lightweight" ID="cmbFileOperation" DataSource='<%#FileOperationNames %>' DataTextField="Name"
DataValueField="ID" Width="150px" AppendDataBoundItems="true"
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("FileOperation").CurrentFilterValue %>'
runat="server" OnClientSelectedIndexChanged="FileOperationIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="All" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
<script type="text/javascript">
function FileOperationIndexChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("FileOperation", args.get_item().get_value(), "EqualTo");
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="FileStatus" DataField="FileStatus" HeaderText="FileStatus">
<HeaderStyle Width="200px" />
<FilterTemplate>
<telerik:RadComboBox RenderMode="Lightweight" ID="cmbFileStatus" DataSource='<%#FileStatusNames %>' DataTextField="Name"
DataValueField="ID" Width="150px" AppendDataBoundItems="true"
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("FileStatus").CurrentFilterValue %>'
runat="server" OnClientSelectedIndexChanged="FileStatusIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="All" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
<script type="text/javascript">
function FileStatusIndexChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("FileStatus", args.get_item().get_value(), "EqualTo");
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="ImageFilePath" DataField="ImageFilePath" Display="false"></telerik:GridBoundColumn>
<telerik:GridNumericColumn UniqueName="PaymentId" DataField="PaymentId" HeaderText="Payment Id" FilterControlWidth="70%">
<HeaderStyle Width="120px" />
</telerik:GridNumericColumn>
</Columns>
<EditFormSettings EditFormType="WebUserControl" UserControlName="LockboxCtrl.ascx">
<PopUpSettings Modal="true" Width="1500px"/>
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>
Hi,
I'm having problems with the style regarding the pager part of my RadGrid (see attachment). I use it with Bootstrap v. 5.3.3. Can you explain to me what I need to add in my CSS file to fix.
Thank you
Hello,
I'm working with a RadGrid that has AllowMultiRowSelection set to "true":
<telerik:RadGrid ID="sampleRgId" runat="server" AllowPaging="True" AllowCustomPaging="True" SkinID="Default"
PageSize="20" AllowAutomaticDeletes="false" AllowAutomaticUpdates="false" AllowMultiRowSelection="true" OnDetailTableDataBind="sampleRgDetailTableDataBind" RetainExpandStateOnRebind="True" HierarchyLoadMode="ServerOnDemand" EnableViewState="true">
<ClientSettings>
<Selecting AllowRowSelect="true" />
<ClientEvents OnRowSelected="sampleRgRowSelected"
OnRowDeselected="sampleRgRowDeselected"/>
</ClientSettings>
<MasterTableView Name="sample"
runat="server" Width="100%"
HierarchyLoadMode="ServerOnDemand" ShowHeader="True"
ShowFooter="True" AllowPaging="True"
AllowCustomPaging="True" PageSize="20"
AllowFilteringByColumn="True" DataMember="sampleRgTable"
EnableHierarchyExpandAll="True" EnableGroupsExpandAll="True"
RetainExpandStateOnRebind="True" DataKeyNames="dataKeyOne, dataKeyTwo">
<Columns>
<telerik:GridClientSelectColumn UniqueName="uniqueNameOne" Display="True" HeaderStyle-Width="35px"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
<telerik:GridBoundColumn HeaderText="Header Text" DataField="dataFieldOne" UniqueName="UniqueNameTwo"
SortExpression="UniqueNameTwo" HeaderStyle-Width="50%" FilterControlWidth="70%" />
...
The "sampleRgRowSelected" function looks like this:
asyncfunctionsampleRgRowSelected(sender, args){
let masterTable = $find("<%= sampleRgId.ClientID %>").get_masterTableView();
let itemIndex = args.get_itemIndexHierarchical();
masterTable.fireCommand("SelectRow", itemIndex);
}
The "SelectRow" function in the code-behind looks like this:
PrivateSub SelectParentGroup(e As GridCommandEventArgs)
Dim itemIndex as Integer = e.CommandArgument
Dim item As GridDataItem = e.Item.OwnerTableView.Items(itemIndex)
processData(item)
item.Selected = trueEndSub
I'm having two problems with the above when I click the "multi row selection" / "select all" checkbox in the RadGrid:
1- Selected rows aren't staying selected. When I click "Select All," every row is selected at first. After a minute, though, only the last row shows as selected. I'm guessing that is because of the ItemCommand taking some time to fire for each row. Then the final state is only having the last row selected.
2- When I have > 6 rows, not every row is selected. When I click "Select All," the sampleRgRowSelected() JavaScript function runs for every row in the RadGrid, starting with the last row. However, the ItemCommand is not fired for every row in the RadGrid. Only the first 6 rows as well as the last one have had "SelectRow" called on them.
Is there a way to know when "select all" has been selected in a RadGrid? If I knew that, I could just manually call processData and select each item. That would work better because I could also select paginated items when "select all" has been clicked.
Thanks for your time.
I have a Telerik RadGrid that has a DetailTable that can be expanded by the user. The DetailTable contains several selectable rows. The user is able to select some rows, then click a "Process Data" button that saves the row data in a Visual Basic code-behind file.
The RadGrid uses HierarchyLoadMode="conditional" to keep track of the DetailTable.
Two Problems-
1. When a user:
- expands the DetailTable,
- selects a row,
- collapses the DetailTable,
- clicks "Process Data,"
no data is saved because RadGrid.SelectedItems has 0 items. Even though the selected row is shown as selected in the UI.
However, if a user:
- selects a row,
- collapses the detail table,
- clicks "Process Data" + gets an error from the VB saying "No rows selected,"
- expands the detail table again,
- selects the row again,
- clicks "Process Data" again,
then the data will be saved because RadGrid.SelectedItems will include the row. Perhaps this is a bug?
In other words, a post back is needed to clear the detail table selections before RadGrid.SelectedItems actually includes items that have been selected in a collapsed HierarchyLoadMode="conditional" table.
2. Is there a way to have selections persist across pagination? Eg. If the user expands the DetailTable, selects a row, navigates to "page 2" of the detail table, then navigates back to "page 1," their selection is not saved.
We have an application which is using Telerik RadGrid controls - RadGrid.net2 dll.
Our security team has reported vulnerabilities in this application and a lot of them are in these RadControls, for example RadGrid.js
client DOM stored code injection. They are looking us to fix these.
What is the solution for this?
Dear Sir,
Can I enable grid column total function like below screen? thanks
We have a RadAsyncUpload control on a page. The "Select" button is displayed to allow the user to choose files. All good. What we'd like is a way to detect when the Select button is clicked to clean up other parts of the page.
For example... we also have a RadGrid on the page. The user might have a row open in an EditForm. We'd like to close that edit form when the user clicks the Select button of the RadAsyncUpload control. I don't see an obvious client side event for that, and the Select button doesn't trigger a server side event.
Is there a client-side equivalent for the RadGrid ClearEditItems method that could be called as part of the click event on the RadAsyncUpload Select button?
Any suggestions would be appreciated.