Questions on UI for ASP.NET AJAX Forum

2 answers

10 views

Ajax drag drop demo for radgrid

https://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/rows/drag-and-drop/defaultcs.aspx

This demo doesnt work - is there a working version?

Grid

answered on 03 Jun 2024

1 answer

10 views

Drag and drop grouped row

Is it possible in radgrid to allow a collapsed group to be selected by row and then drag and drop to new grid and all the collapsed rows under the group are dropped?

Grid

answered on 03 Jun 2024

1 answer

9 views

HTML Form button click triggers Radgrid's previous grid event.

Hi,

I have an HTML form and a RadGrid configured on a page. RadGrid's events and all the properties are dynamically built on the server side. RadGrid has an ExportToExcel toolbar command and works as it is. The issue is when I click the ExportToExcel toolbar button, It downloads the Excel file. When I click the HTML form's Save button, which means input type submit button, Radgrid downloads the Excel file again. If I click a different Radgrid toolbar command and then click the Form submit button, Radgrid will trigger its previous toolbar event.

Thanks

Grid

answered on 31 May 2024

1 answer

8 views

MultiColumnComboBox as RadGrid column filter

Hello, please consider to add scenario when MultiColumnComboBox is used as RadGrid column filter

Grid

MultiColumnComboBox

answered on 28 May 2024

1 answer

10 views

RadGrid Columns context menu ToolTip

I am attempting to show a 'tooltip'-like window/div on the RadGrid Columns context menu panel that slides out when you hover over 'Columns'.

The div is shown on the 'mouseenter' event, and then removed on the 'mouseout' event. The issue I'm experiencing is that the 'Columns' context menu will hide itself shortly after the 'tooltip' div is shown, thus causing the window to immediately be removed from the DOM.

Is there a more effective way to produce this kind of behavior? Additionally, I'm targeting the 'li.rmitem.rmtemplate' class, and I'm also wondering if that is the most appropriate one?

In this code snippet from the ClientEvents OnGridCreated event, I'm populating the 'tooltip' div with the column heading, but it will eventually be replaced with dynamic data based upon which column heading is hovered over.

let columnSlideOutItems = document.querySelectorAll('li.rmitem.rmtemplate');

columnSlideOutItems.forEach(function (c) {
	let thisNode = c.childNodes[0];
	let tooltip = document.createElement('div');
	tooltip.style.position = 'absolute';
	tooltip.style.backgroundColor = '#fff';
	tooltip.style.border = '1px solid #000';
	tooltip.style.padding = '10px';

	tooltip.innerHTML = thisNode.innerText;
	document.body.appendChild(tooltip2);

	thisNode.addEventListener('mouseenter', function (e) { 
		console.log(this.innerText);
		tooltip.style.left = e.pageX + 'px';
		tooltip.style.top = (e.pageY - 22) + 'px';
		tooltip.style.zIndex = 99999;
	});

	thisNode.addEventListener('mouseout', function (e) {
	    if (tooltip) tooltip.remove();
	});
});

Ajax

Grid

Menu

answered on 22 May 2024

1 answer

31 views

RadGrid popup position

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>

Grid

answered on 22 Apr 2024

1 answer

15 views

Cannot drag column to group by

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>

Grid

answered on 17 Apr 2024

1 answer

31 views

RadGrid AllowMultiRowSelection = "true" not firing ItemCommand for every row

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.

Grid

answered on 15 Apr 2024

5 answers

143 views

How to not allow user to select / highlight text in the grid

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!

Grid

updated answer on 26 Mar 2024

2 answers

75 views

Telerik RadGrid controls - RadGrid.net2 dll security vunerability.

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?

Grid