Questions on UI for ASP.NET AJAX Forum

3 answers

158 views

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

409 views

[Solved] 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.3K+ 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

343 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

2 answers

209 views

Button in Modal window causes full postback

HI Telerik

In my application, I have a Radwindow which is entirely created in javascript as follows:

var oWnd = radopen("Default.aspx", "EditWindow", 1100, 800, 0, 0);

After this window is loaded , it has a button that is executing code on server side. Clicking this button causes full postback and page is reloaded in the Radwindow. I have all the ajaxsettings for all the controls that are being updated by this button. Still, I don't understand what is causing this postback.. Please advise.

Thank you very much in advance for your help..

Window

answered on 26 Nov 2015

3 answers

79 views

RadDateTimePicker broken inside a Raddock on a Scheduler Page in the latest release.

Attached image

Scheduler

answered on 26 Nov 2015

1 answer

120 views

show textbox when user marks checkbox in radgrid

I've a radgrid where there are checkboxex. The data comes from database. On of the value is "OTHERS". I want that when user checks the "OTHERS" checkbox, textbox should appear by its side. How can it be done using JAVASCRIPT or by using any radgrid property like OnPreRender ?

<telerik:RadGrid ID="grid_diag_group" runat="server"

Width="100%"

AutoGenerateColumns="false"

HeaderStyle-HorizontalAlign="Left" >

<MasterTableView>

<Columns>

<telerik:GridTemplateColumn UniqueName="TempCol1" HeaderText="Select" ReadOnly="true">

<ItemTemplate>

<asp:CheckBox ID="CheckBox1" runat="server" />

</ItemTemplate>

<EditItemTemplate>

<asp:CheckBox ID="CheckBox2" runat="server" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="diag_code" Display="false" Visible="true" AutoPostBackOnFilter="false" ItemStyle-HorizontalAlign="Left" CurrentFilterFunction="Contains" />

<telerik:GridBoundColumn DataField="diag_desc" UniqueName="diag_description" HeaderText="Diagnosis"

AutoPostBackOnFilter="false" ItemStyle-HorizontalAlign="Left" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

My UI looks like this >> ( checkbox == [])

[] MALARIA

[] T.B.

[] GLYCOMA

[] MEASELES

[] FUNGAL INFECTION

[] OTHERS

When user checks the OTHERS checkbox, textbox should appear beside "OTHERS" inside the grid. How can I do it?

Please help !!! Thanks.

Grid

answered on 26 Nov 2015

5 answers

2.0K+ views

[Solved] RadGrid Default Filtering not working

Hello,

I'm trying to render a RadGrid with default filtering as explained here. I've managed to configure the grid so that filter controls are set when the page loads, but the data in the grid is not filtered. I suspect that I've missed something simple so here's my code for you to laugh at:
ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="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">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</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>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<telerik:RadGrid ID="rgdUsers" runat="server"

AutoGenerateColumns="false"

AllowFilteringByColumn="true"

OnNeedDataSource="rgdUsers_NeedDataSource"

OnPreRender="rgdUsers_PreRender" >

<MasterTableView DataKeyNames="Id, Active, Name, Surname" >

<Columns>

<telerik:GridBoundColumn UniqueName="ActiveColumn" DataField="Active" HeaderText="Active"

AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo"

CurrentFilterValue="True" />

<telerik:GridBoundColumn UniqueName="NameColumn" DataField="Name" HeaderText="Name" />

<telerik:GridBoundColumn UniqueName="SurnameColumn" DataField="Surname" HeaderText="Surname" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

C#

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Linq;

using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void rgdUsers_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

using (SwmpHermesEntities ent = new SwmpHermesEntities())

{

var Users = ent.Users.ToList();

rgdUsers.DataSource = Users;

}

protected void rgdUsers_PreRender(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

rgdUsers.MasterTableView.FilterExpression = "([Active] = True)";

GridColumn activeColumn = rgdUsers.MasterTableView.GetColumnSafe("ActiveColumn");

activeColumn.CurrentFilterFunction = GridKnownFunction.EqualTo;

activeColumn.CurrentFilterValue = "True";

}

If I toggle the Active column checkbox, the grid behaves as expected. I'm using RadControls for ASP.NET AJAX Q2 2013.

Thanks in advance,
Matt

Grid

answered on 26 Nov 2015

6 answers

200 views

How do I add a Date Suffix to the ColumnHeaderDateFormat in a RadScheduler Timeline view?

I know how to format the column headers in a RadScheduler's TimeLineView so I can display the date in any format I choose, but cannot see how I would add the date suffix.

For example I want to show the short version of the days name, followed by the date of the month.
For today (Tuesday, 12th of March 2013) I want to display "Tue 12th" but all I can get is "Tue 12".

Personally, it makes no odds to me and I prefer just the "Tue 12" for a number of reasons, but the powers that be want the date suffix!

Anyone have any ideas?
Thanks,
Karl

Scheduler