Questions on UI for ASP.NET AJAX Forum

38 answers

7.5K+ views

This sticky thread lists known issues and breaking changes introduced in the UI for ASP.NET AJAX releases.

Q3 2011 (Version number: 2011.3.1115)

Problem: When adding items to OData-enabled controls (RadMenu, RadTreeView, RadListBox, RadComboBox) through design time erroneous markup is applied to the control:

<telerik:RadListBox runat="server" ID="RadListBox1">
    <Items>
    </Items>
    <WebServiceSettings>
        <ODataSettings InitialContainerName="">
        </ODataSettings>
    </WebServiceSettings>
</telerik:RadListBox>

Please note the added ODataSettings section. It will cause JavaScript errors on the page.

Solution: Remove the ODataSetting section and the issue will vanish. The problem is also fixed in the Q3 SP1 release, version number 2011.3.1305

General Discussions

updated answer on 05 Mar 2024

1 answer

551 views

I'm getting an error with Telerik

When I run my project I'm getting this error

Could not load file or assembly 'Telerik.Web.UI' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

In my web.config I checked that the version in the web.config is the same as the version I'm using in references

General Discussions

answered on 22 Oct 2021

1 answer

15 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

0 answers

5 views

Sample for DataPager used with a client-side databound ListView

I have a ListView using automatic client-side databinding to a web service. Additionally, there is a DataPager placed just after the ListView in the page's markup as in the code pasted below.

When the page loads, the ListView shows data, which means the automatic client-side databinding is working, but the DataPager is showing nothing i.e. there is no pager visible even though there is more than one page of records in the database.

Is there a sample that uses a similar scenario of DataPager with a ListView? I tried searching online, but couldn't find any.

<telerik:RadListView ID="RadListView1" runat="server" RenderMode="Auto" AllowPaging="true" PageSize="5" ItemPlaceholderID="items">
    <ClientSettings>
        <ClientEvents OnDataBinding="RadListView1_Comments_DataBinding" OnDataBound="RadListView1_Comments_DataBound" OnDataSourceResolved="RadListView1_Comments_DataSourceResolved" />
        <DataBinding ItemPlaceHolderID="items">
            <LayoutTemplate>
                        <label for="" class="comments">Comments</label>
                        <div id="items"></div>
                       <%--<div id="pagerContainer"></div>--%>
            </LayoutTemplate>
            <ItemTemplate>
                       <div>
                            <div class="subject">#=Subject#</div>
                            <div class="comment">#=CommentText#</div>
                            <div class="author">by #=Author# on #=CreateDate# </div>
                      </div> 
            </ItemTemplate>
            <EmptyDataTemplate>
                        <div>
                            No Comments have been posted for this page
                        </div>
            </EmptyDataTemplate>
            <DataService Location="~/CommentsService.asmx" DataPath="GetComments" FilterParameterType="Sql" SortParameterType="Sql" CountPropertyName="Count"></DataService>
        </DataBinding>
    </ClientSettings>
</telerik:RadListView>
<telerik:RadDataPager RenderMode="Auto" ID="RadDataPager1" runat="server" PagedControlID="RadListView1">
    <Fields>
        <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
        <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
        <telerik:RadDataPagerGoToPageField></telerik:RadDataPagerGoToPageField>
    </Fields>
</telerik:RadDataPager>

I tried adding the following JavaScript code in the client-side databinding event of ListView so that all needed properties of DataPager get set, but still the DataPager shows nothing.

function RadListView1_Comments_DataBound(sender, args) {
    //set datapager properties
    let dataPager = $find(pageBag.radDataPager1Id);
    dataPager.set_currentPageIndex(sender._currentPageIndex);
    dataPager._totalRowCount = sender._virtualItemCount;
    dataPager.set_pageSize(sender._pageSize);
    dataPager._pageCount = Math.ceil(dataPager._totalRowCount / dataPager._pageSize);
    dataPager._startRowIndex = startRowIndex;
}

DataPager

ListView

updated question on 22 Apr 2024

0 answers

7 views

Double quote get switched to single quote and vice versa in Telerik UI for RichText Editor

Hi,

Anyone had issue with RichText editor automatically replacing double quote " with single quote ' and vice versa, when toggling between Design and HTML mode? I have tested all options under "BUILT-IN FILTERS CONFIGURATOR" and they all switched the double quote with single quote and vice versa, which breaks the HTML5 data attribute element as the single quote formatting is important for JSON specification.

https://demos.telerik.com/aspnet-ajax/editor/examples/builtincontentfilters/defaultcs.aspx

I have attached a snippet of the code, which shows data-wb-geomap element's single quote got replaced with double quote after toggling between Design and HTML mode.

Before (HTML mode):

<div id="geomap1" class="wb-geomap position scaleline geocoder geolocation mapcontrols" data-wb-geomap='{

"tables": [{

"title": "Test",

"caption": "Test",

"id": "test",

"zoom": true,

"tab": true,

"type": "symbol"

}

}]

}'>

After (Design mode):

<div id="geomap1" class="wb-geomap position scaleline geocoder geolocation mapcontrols" data-wb-geomap="{

'tables': [{

'title': 'Test',

'caption': 'Test',

'id': 'test',

'zoom': true,

'tab': true,

'type': 'symbol'

}

}]

}'>

UI for ASP.NET AJAX in ASP.NET MVC

asked on 19 Apr 2024

2 answers

153 views

Telerik controls are not loading in container

Hi Friends,

I'm trying to migrate ASP.NET web application (.NET 4.7.2) running on Windows server to ECS windows container but having following issues after hosting the image saying

1. 'Failed to load resource: the server responded with a status of 404()' for WebResource.axd, ScriptResource.axd and Telerik.Web.UI.WebResource.axd.

2. Uncaught Error: ASP.NET Ajax client-side framework failed to load.

3. Uncaught ReferenceError: Sys is not defined at jsdebug

4. Uncaught ReferenceError: $get is not defined

Please someone help me in resolving these issues.

Ajax

answered on 18 Apr 2024

1 answer

9 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

0 answers

5 views

RadGrid pager style

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
Dario

Grid

Styling

asked on 16 Apr 2024

1 answer

15 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

1 answer

8 views

Changing the visible property server side not working

I have a RadNumericTextbox where the visible field is set to false. Depending on another variables value, the RadNumericTextbox visible may change to true. This is not working. The field is in a panel.

I stepped through the code and the visible property will not change.

I even directly changed the value to true and the value remained false in the watch list.

NumericTextBox