or
0 answers
1 view
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 youDario
0 answers
1 view
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
7 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
0 answers
8 views
Hello,
When I tried to filter my other columns it seems working, but for the payment type column, im getting error: At least one object must implement IComparable
Client model:
public Guid Id { get; set; }
[Display(Name = "Client Code")]
public string Ref { get; set; }
[Display(Name = "Company Name")]
public string CompanyName { get; set; }
[Display(Name = "Payment Options")]
public List<PaymentTypeViewModel> PaymentTypes { get; set; }
payment type model:
using System;
namespace Act2.Certificate.Api.Models.Client
{
public class PaymentTypeViewModel
{
public Guid Id { get; set; }
public string Name { get; set; }
public bool Selected { get; set; }
}
}
Controller file:
public async Task<IActionResult> GetClientList([DataSourceRequest] DataSourceRequest request
)
{
try
{
var list = await _mediator.Send(new ClientsQuery());
DataSourceResult result = list.ToDataSourceResult(request);
return new JsonResult(result);
}
catch (Exception ex)
{
return BadRequest(new { message = ex.Message });
}
}
}
Do take note, that the payment type has multiple value per row, see below image:
When I tried to filter my other columns it seems working, but for the payment type column, im getting error: At least one object must implement IComparable
Client model:
public Guid Id { get; set; }
[Display(Name = "Client Code")]
public string Ref { get; set; }
[Display(Name = "Company Name")]
public string CompanyName { get; set; }
[Display(Name = "Payment Options")]
public List<PaymentTypeViewModel> PaymentTypes { get; set; }
payment type model:
using System;
namespace Act2.Certificate.Api.Models.Client
{
public class PaymentTypeViewModel
{
public Guid Id { get; set; }
public string Name { get; set; }
public bool Selected { get; set; }
}
}
Controller file:
public async Task<IActionResult> GetClientList([DataSourceRequest] DataSourceRequest request
)
{
try
{
var list = await _mediator.Send(new ClientsQuery());
DataSourceResult result = list.ToDataSourceResult(request);
return new JsonResult(result);
}
catch (Exception ex)
{
return BadRequest(new { message = ex.Message });
}
}
}
Do take note, that the payment type has multiple value per row, see below image:
5 answers
127 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!
0 answers
17 views
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.
2 answers
57 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
21 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
25 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
26 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!
