or
1 answer
30 views
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>
Vasko
Telerik team
answered
on
22 Apr 2024
1 answer
13 views
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>
1 answer
27 views
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.
Attila Antal
Telerik team
answered
on
15 Apr 2024
5 answers
136 views
Hello,
I want to stop the grid from highlighting text when the user clicks, holds, and drags across the cell. Is this possible?
Attached is an image of what I'm trying to avoid.
I want a single click to highligh the row (which works fine), a double click to return a postback (works fine), but don't want any text highlighted on single click / drag.
Thanks!
I want to stop the grid from highlighting text when the user clicks, holds, and drags across the cell. Is this possible?
Attached is an image of what I'm trying to avoid.
I want a single click to highligh the row (which works fine), a double click to return a postback (works fine), but don't want any text highlighted on single click / drag.
Thanks!
2 answers
71 views
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?
Rumen
Telerik team
answered
on
21 Mar 2024
1 answer
30 views
Dear Sir,
Can I enable grid column total function like below screen? thanks
Rumen
Telerik team
updated answer
on
19 Mar 2024
1 answer
35 views
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.
Rumen
Telerik team
answered
on
13 Mar 2024
1 answer
33 views
Greetings,
I'm currently trying to revamp one of my pages from server side binding to a web service binding and encountered a hickup.
The page is as follows (see picture attached):
The Outside is a RadSplitter.
On the left side of the RadSplitter is an update panel, where inside is the RadTreeView.
On the right side, also inside an update panel, is a RadGrid.
The RadTreeView gets a basic set of nodes ("stations") on creation, but everything after that is loaded on demand by webservice. If a "station" is expaned, and the webservice is triggered and supplies nodes to the radgrid. This works correctly.
If I click on a "station", a client side event is triggered, which expands the node (therefore triggering the webservice and supplying nodes) and also calling the RadGrid to rebind (by client side). The Rebind triggers the OnNeedDataSource event of the RadGrid, where it loads its data server side.
The problem is with the click & expand, as the nodes are then only briefly visible in the RadTreeView and immediately removed again.
Is this a know problem? What can I do? I need the nodes in the tree but also the data in the RadGrid.
I made a video of the error, but it seems I cannot upload the video here. I also created a very basic test project.
I'm using Telerik 2023.1.117.45.
Thank you in advance!
1 answer
25 views
Hi,
I would like to use a version of this code
// Event fires upon a cell is intering into edit mode
function OnBatchEditOpening(sender, args) {
// get the unique name of the column
var columnName = args.get_columnUniqueName();
// get the currently edited row's ID
var rowId = parseInt(args.get_row().id.split("__")[1]);
// Setup a condition for the row ID
if (rowId % 3 == 0) { // If condition 1 is met
// if this row and the Freight column
if (columnName == "Freight") {
// cancel the Editing event
args.set_cancel(true);
}
}
}to get the value of the cell. If the cell is empty (null or a space), then I don't want the cell to be editable. In this Javascript, how do I get the actual value of the cell?
This code is getting me close
var cell = args.get_cell(); alert(cell.childNodes[0].innerHTML)
but it is showing the whole span, like this:
<span id="ctl00_MainContent_mygrid_ctl00_ctl10_mylabel">this is the value I want to access</span>
Thanks!
1 answer
31 views
Hi,
My situation: I have a Radgrid with TooltipManager setup which works fine.
Now I have to place another RadGrid in the Tooltip which has an update button per row.
How would one configure so, that the Tooltip's RadGrid is updated in the Tooltip.
Please see attached screenshot...
Thanks for any pointers.
Marc
