Questions on UI for ASP.NET AJAX Forum

8 answers

404 views

ArgumentOutOfRangeException in Telerik.Web.UI.GridEditableItem.GetDataKeyValue(String keyName) only on last page

I have a RadGrid and a corresponding edit form, then I have a template column with a button like this:

<telerik:GridTemplateColumn UniqueName="EditRow" AllowFiltering="False"

AllowSorting="False" FilterControlAltText="Filter EditRow column">

<ItemTemplate>

<asp:ImageButton ID="EditLink" runat="server" ImageUrl="~/IMAGES/Edit16.png" ToolTip="Edit" />

</ItemTemplate>

<HeaderStyle Width="32px" />

</telerik:GridTemplateColumn>

Then I bind a custom handler in the code behind:

ImageButton editLink = (ImageButton)e.Item.FindControl("EditLink");

editLink.CommandArgument = item.GetDataKeyValue("AncilliaryID").ToString() + "," + item.GetDataKeyValue("ID").ToString();

editLink.Command += new CommandEventHandler(EditCommand);

The grid has 10 pages of data in it, 50 rows per page, and this all works perfectly on the first nine pages. However clicking the edit button on the 10th page leads to this error:

[ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.

Parameter name: index]

System.Collections.ArrayList.get_Item(Int32 index) +10705936

Telerik.Web.UI.GridEditableItem.GetDataKeyValue(String keyName) +48

Telerik.Web.UI.RadGrid.DescribeProperties(IScriptDescriptor descriptor) +5760

...

This error occurs even if I comment out all the event binding code. Something is happening in the RadGrid code for the last page of the grid only. What sort of thing could be causing this? I am assuming there is something basic I have overlooked in the properties or the binding of the grid that would only cause an issue on the last (non-full) page of the displayed grid but I have no idea how I can work out what that would be.

Grid

answered on 30 Nov 2015

1 answer

151 views

RadSearchBox filter - Dinstinct Values only

Hello,

I am working with the rad search box, and my code on the view page looks like:

<telerik:RadSearchBox ID="rsbCode" runat="server"
EmptyMessage="Search Options" Skin="Office2010Silver"
Width="460" DropDownSettings-Height="300"
DataSourceID="SqlDataSource1"
DataTextField="Code"
DataValueField="Code" >
</telerik:RadSearchBox>

The data source I am pulling from has a list of employees each with a code number. Each employee has a code number, but different employees can have the same code number. This causes an issues with the search box, as the filter will show multiple values.

For example, if 3 different employees has the code number 2100. As I type '21' on the RadSearchBox, the 2100 will appear 3 times. How can I make the filter only show distinct values, such that 2100 will only appear once?

Thanks very much for your help

SearchBox

answered on 27 Nov 2015

3 answers

110 views

batch editing when are changes finished

I have a grid in batch edit mode using batcheditcommand to process all updates.

How do I know there are not anymore changes to come if I edit multiple rows?

Gary

Grid

answered on 27 Nov 2015

7 answers

2.0K+ views

How to *append* a CSS class to a row

Hi,

Using v2009.3.1208.35, I'm trying to append a custom CSS class to each row of a grid depending on some databound condition. For example: appending either "active", "disabled" or "pending" depending on the "state" enum.

I tried the following code in the ItemDataBound event, but that replaces the CSS class instead of appending it.

    
            switch (state) { 
        
               case StateType.Active: 
        
                  e.Item.CssClass += " active"; 
        
                  break; 
        
               case StateType.Disabled: 
        
                  e.Item.CssClass += " disabled"; 
        
                  break; 
        
               case StateType.Pending: 
        
                  e.Item.CssClass += " pending"; 
        
                  break; 
        
            }

The rgRow and rgAltRow classes are lost from the rendered HTML result.

What I really want is this :

    
            <tr id="..." class="rgRow active"> 
        
              <td>row 1 (active css class)</td> 
        
            </tr> 
        
            <tr id="..." class="rgAltRow active"> 
        
              <td>row 2 (active css class)</td> 
        
            </tr> 
        
            <tr id="..." class="rgRow disabled"> 
        
              <td>row 3 (disabled css class)</td> 
        
            </tr> 
        
            <tr id="..." class="rgAltRow pending"> 
        
              <td>row 4 (pending css class)</td> 
        
            </tr>

How can I achieve this result? It's NOT a custom skin, just a css class that will be added on top of the skin.

The only another similar thread I've found was this one, but the ApplyStylesOnClient properties mentioned is no longer supported it seems so I cannot try it.

Thanks for your help,

dstj.

Grid

answered on 27 Nov 2015

6 answers

764 views

RadComboBox in Grid EditForm Template

I have a grid on the bottom of a page with an AjaxLoadingPanel. In the grid edit form template, I have a RadComboBox and in the grid's ItemDataBound even, I fill the combo box from a service call with a list of users (and if editing a record, pre-select the user).

However, when I add a new record, the AjaxSettings fire and the grid refreshes and the add/edit template is displayed. Except no data is bound to the combo box. If I remove the AjaxSettings, the whole page is refreshed when I add a new item, and data IS bound to the combo box.

Is there a trick to using the combo box in an edit form template with the loading panel?

Grid

answered on 27 Nov 2015

1 answer

121 views

RadLightBox not rendering controls inside RadLightBoxItem.

We are using telerik Q3 2015.We had implemented rad lightbox (responsive) in our application. The requirement is to have the image on one side of the popup and on the right side we need to have a table that can contain many rows.

The problem that i am facing is that no controls are rendering inside the rad lightbox. I Would like to know on the following .

1. Is it possible to render image and controls inside rad light box(image on one side of the popup and on the right side we need to have a table that can contain many rows.) ?

2. why the controls even though put inside <telerik:RadLightBoxItem> , are not rendering inside the popup

Please see the code used:

<telerik:RadLightBox DataImageUrlField="ImageUrl" runat="server" ID="RadLightBoxImageDetails" Modal="true" Width="1000px" Height="200px">
<ClientSettings>
<ClientEvents OnLoad="example.radLightBoxLoad" OnShowed="SetCenter()" />
</ClientSettings>
<Items>
<telerik:RadLightBoxItem>
<ItemTemplate>
<telerik:RadTextBox ID="RadTextBox1" runat="server" CssClass="demo">
</telerik:RadTextBox>
</ItemTemplate>
</telerik:RadLightBoxItem>
</Items>
</telerik:RadLightBox>

Any help will be greatly appreciated.

LightBox

answered on 27 Nov 2015

3 answers

123 views

rmfocused not begin applied

Hi there,

Following your example on the TripXpert demo I wanted to style my menu exactly the same. Everything works fine, except that .rmfocused is not being applied. I have searched for hours, trying to add keyboard navigation to enable it, trying solutions from the forum like http://www.telerik.com/forums/how-to-get-rmfocused-on-menu-item or from stackoverflow but I was still not succesfull to enable this.

The thing i want to achieve is what I have attached as 1.png but the thing i get is what i attached as 2.png.

I use a masterpage with the following code:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

<div id="Header">

<asp:ContentPlaceHolder ID="cphMenu" runat="server">

</asp:ContentPlaceHolder>

with the css applied to the header like this:

#Header {

position: fixed;

z-index: 10000;

height: 100px;

background: #fff;

width: 100%;

}

Then on the aspx page i have the following code:

<asp:Content ID="Content2" ContentPlaceHolderID="cphMenu" runat="server">

<telerik:RadMen runat="server ID="MainNav EnableEmbeddedSkins="false CssClass="tx_desctop_nav_menu" nItemClick="RadMenu1_ItemClick">

</telerik:RadMenu>

<telerik:RadMen runat="server ID="MainNavMobile RenderMode="Mobile" ssClass="tx_mobile_nav_menu" nItemClick="RadMenu1_ItemClick">

</telerik:RadMenu>

</asp:Content>

My code on the server side is this:

protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)

{

MpKlant.PageViews.Clear();

RadPageView pageView = new RadPageView();

pageView.ID = e.Item.Value;

MpKlant.PageViews.Add(pageView);

pageView.Selected = true;

}

and loading the radmenu items like this:

RadMenuItem rmiNav2 = new RadMenuItem();

rmiNav2.Value = "MijnBerekeningen";

rmiNav2.Text = "Mijn berekeningen";

MainNav.Items.Add(rmiNav2);

I use the css classes from the example, but how can I get the .rmfocused being applied to the li.rmitem?

Kind Regards,

Corné

Menu

answered on 27 Nov 2015

4 answers

369 views

Export to PDF when custom pagination is Enabled

I have a radgrid with custom pagination enabled, so far all it's working as expected, I mean, each time that OnNeedDataSource event is fired, the grid datasource is updated with the needed data, in my case I have configured a PageSize = 10. So the problems comes when I'm trying to export to PDF, When the RadGrid pagination is in the first page, for example I have 15 items, so the first page is displaying just 10 items, then the export works fine, all items are well exported to pdf file, but if I go to the next page in the grid, in this case are showing the last 5 items in the second page, and I try to export to pdf, I 'm getting a blank pdf. How can I fix this ? some suggestion, please ? Just in case here some fragments of the code :

<asp:View ID="ViewFiles" runat="server">

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" >

<telerik:RadGrid ID="RadGridFiles" runat="server" GridLines="None" TableLayout="Auto" Skin="Metro" PageSize="10"

AllowSorting="false" AllowMultiRowSelection ="false" AllowPaging="true" AllowCustomPaging="true" OnNeedDataSource ="RadGridFiles_NeedDataSource" ShowStatusBar="True" OnBiffExporting="grdSettings_BiffExporting" OnPdfExporting="grdSettings_PdfExporting">

<ClientSettings AllowDragToGroup="true">

</ClientSettings>

<ExportSettings ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true"> </ExportSettings>

<PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="True" />

<MasterTableView TableLayout="Fixed">

<NoRecordsTemplate>

<div>

<asp:Label ID="lblNoResultDisplay" Text="There are no records to display" runat="server"

CssClass="Label" meta:resourcekey="lblNoResultDisplayResource">

</asp:Label>

</div>

</NoRecordsTemplate>

</MasterTableView>

</telerik

:RadGrid>

      </telerik:RadAjaxPanel>

 </asp:View>

protected void btnExport_Click(object source, EventArgs e)
       {
 
 
           RadGridFiles.IsExportPDF = false;
           RadGridFiles.ExportSettings.FileName = string.Format("SDAR_{0}", tabValue);
           RadGridFiles.PageSize = RadGridFiles.MasterTableView.VirtualItemCount;
           RadGridFiles.ExportHeaderRow = new List<string>() { "Document Activity" };
 
           switch (fileTypeExport)
           {
               case "xml":
               case "xls":
                   RadGridFiles.ExportSettings.Excel.FileExtension = fileTypeExport;
                   RadGridFiles.ExportSettings.Excel.Format = (fileTypeExport == "xml") ? GridExcelExportFormat.ExcelML : GridExcelExportFormat.Biff;
                   RadGridFiles.MasterTableView.ExportToExcel();
                   break;
               case "pdf":
                   RadGridFiles.IsExportPDF = true;
                   RadGridFiles.ExportSettings.Pdf.PageHeight = Unit.Parse("300mm");
                   RadGridFiles.ExportSettings.Pdf.PageWidth = Unit.Parse("600mm");
                   RadGridFiles.ExportSettings.Pdf.PageHeader.LeftCell.Text = "<div style=\"font-size:14px;margin-left:70px;\"> LOGO </div>";
                   RadGridFiles.ExportSettings.Pdf.PageHeader.LeftCell.TextAlign = GridPdfPageHeaderFooterCell.CellTextAlign.Left;
 
                    
                   string dateText = string.Format("{0} - {1}",  this.StartDate.ToString("MMMM dd, yyyy"), this.EndDate.ToString("MMMM dd, yyyy"));
 
                   RadGridFiles.ExportSettings.Pdf.PageHeader.RightCell.Text = "<div style=\"font-size:14px;margin-right:80px;\">" + dateText + "</div>";
                   RadGridFiles.ExportSettings.Pdf.PageHeader.RightCell.TextAlign = GridPdfPageHeaderFooterCell.CellTextAlign.Right;
                   RadGridFiles.PDFExportColWidths = new List<int>();
                   RadGridFiles.MasterTableView.ExportToPdf();
                   break;
           }
 
       }

Grid

answered on 26 Nov 2015

3 answers

1.2K+ views

how to get datasource of a RadGrid after postback event

Hello,

I have a simple RadGrid using OnNeedDataSource to bind data on initial page load. And on a button (outside grid) clicked event I try to get the RadGrid datasource using code below:

01.private DataTable GetFilteredDataSource()

02. {

03. DataTable DT = new DataTable();

04.

05. DataTable FilteredDT = new DataTable();

06. string filterexpression = string.Empty;

07. filterexpression = RadGrid1.MasterTableView.FilterExpression;

08. // DT = (DataTable)RadGrid1.DataSource;

09. DT = RadGrid1.MasterTableView.DataSource as DataTable;

10.

11. FilteredDT = DT.AsEnumerable()

12. .AsQueryable()

13. .Where(filterexpression)

14. .CopyToDataTable();

15. return FilteredDT;

16. }

line 09 will give DataSource = null.

Please help. Thanks!

Grid

answered on 26 Nov 2015

1 answer

312 views

ListBox on Mobile Phone

We are using a RadListBox on a mobile phone site - test url is http://photo.lenos.us

We want the list of contacts to scroll. If you access this on a mobile andriod phone w/ Chrome it will scroll very 'rough' only in small increments. BUT - if on Chrome, you click on the menu item REQUEST DESKTOP SITE - it will reload the page and the listbox scrolling will be perfect, smooth and graceful

Code is attached.

I would expect the smooth scroll / flick-scroll effect when it is loaded as a mobile site.

Any help would be appreciated.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<style type="text/css">
html, body{
margin: 0px;
height: 98vh;
min-height: 98vh;
}
</style>

<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>

</head>

<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadSkinManager Runat="server" Skin="Bootstrap"></telerik:RadSkinManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager>

<div style="width: 100%;">
<div style="width: 100%; height: 100%;" >
<telerik:RadNavigation runat="server" ID="Nav1">
<Nodes>
<telerik:NavigationNode Text="Pep Locations" BackColor="Yellow">
<Nodes>
<telerik:NavigationNode Text="Cincinnati"></telerik:NavigationNode>
<telerik:NavigationNode Text="Panama"></telerik:NavigationNode>
<telerik:NavigationNode Text="Chicago"></telerik:NavigationNode>
<telerik:NavigationNode Text="Pittsburg"></telerik:NavigationNode>
<telerik:NavigationNode Text="Boston"></telerik:NavigationNode>
<telerik:NavigationNode Text="Skillman"></telerik:NavigationNode>
</Nodes>
</telerik:NavigationNode>
<telerik:NavigationNode Text="Pep Clients">
<Nodes>
<telerik:NavigationNode Text="Kraft"></telerik:NavigationNode>
<telerik:NavigationNode Text="P&G"></telerik:NavigationNode>
<telerik:NavigationNode Text="Georgia Pacific"></telerik:NavigationNode>
<telerik:NavigationNode Text="Heinz"></telerik:NavigationNode>
<telerik:NavigationNode Text="Johnson & Johnson"></telerik:NavigationNode>
<telerik:NavigationNode Text="Wells Fargo"></telerik:NavigationNode>
</Nodes>
</telerik:NavigationNode>
</Nodes>
</telerik:RadNavigation>
</div>
<div style="width: 100%; height: 94vh;" >
<telerik:RadListBox runat="server" ID="RadListBoxSource" Height="100%" Width="100%" RenderMode="mobile" style="">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/bell.jpg" style="border-radius:90px" height="75px" Width="75px" />
<asp:label runat="server" Text="Bell,Steph" /><br />
<a href="tel:847-555-5555">847-555-5555</a>
</ItemTemplate>
<Items>
<telerik:RadListBoxItem> </telerik:RadListBoxItem >
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
<telerik:RadListBoxItem Text="Lenos, Doug" ></telerik:RadListBoxItem>
</Items>
</telerik:RadListBox>
</div>
</div>
</form>
</body>
</html>

ListBox

answered on 26 Nov 2015