telerik:GridTemplateColumn problem after migrating from Visual Studio 2012 to 2013

After migrating my project from Visual Studio 2012 to 2013, i realized that telerik grids with GridTemplateColumn columns did not render successfully. The solution is adding the following to Web.xml:

http://weblogs.asp.net/imranbaloch/archive/2013/10/23/messy-html-and-js-errors-when-you-install-visual-studio-2013.aspx
http://blogs.msdn.com/b/webdev/archive/2013/06/28/browser-link-feature-in-visual-studio-preview-2013.aspx

upgrading telerik 2012 to 2013

In this post, i summarized my steps during upgrading from telerik 2012 to 2013. My assumption is the system all works fine with the previous Telerik version and the aim is just to upgrade Telerik..

In my case, there are two projects: the former is for developing telerik reports, and the latter is a web application which views the reports from the former project. By the way, i am using Visual Studio 2010.

1) install Telerik 2013 in your development machine.
2) in both projects, renew the references and make CopyLocal property true for each one of them.
3) in web.xml of the web application, replace all Version statements. In my case, i replaced Version=6.0.12.215 with Version=7.0.13.426.
4) and deploy the project to production as always. Remember to renew all Telerik dlls..

radgrid - export

It is fairly easy to export a radgrid content in various formats.
here is sample code:

<telerik:RadGrid ID="GridRaporListe" AllowFilteringByColumn="true" AutoGenerateColumns="false"
PageSize="10000" AllowPaging="True" AllowSorting="True" runat="server" ShowGroupPanel="false"
OnItemCreated="GridRaporListe_ItemCreated" AllowMultiRowSelection="true" ClientSettings-AllowColumnHide="True"
ClientSettings-AllowColumnsReorder="True">
<ClientSettings EnableRowHoverStyle="true">
<Selecting AllowRowSelect="False"></Selecting>
</ClientSettings>
<PagerStyle Mode="NextPrevAndNumeric" />
<GroupingSettings CaseSensitive="false" />
<MasterTableView TableLayout="Fixed" DataKeyNames="ID" CommandItemDisplay="TopAndBottom">
<CommandItemSettings ShowExportToExcelButton="true" ShowExportToPdfButton="true"
ShowExportToWordButton="true" ShowExportToCsvButton="true" ShowRefreshButton="false"
ShowAddNewRecordButton="false"></CommandItemSettings>
<Columns>
<telerik:GridBoundColumn HeaderText="OgretimYili" DataField="OgretimYili" UniqueName="OgretimYili"
SortExpression="OgretimYili" HeaderStyle-Width="100px" />
<telerik:GridBoundColumn HeaderText="Donem" DataField="Donem" UniqueName="Donem"
SortExpression="Donem" HeaderStyle-Width="100px" />
</Columns>
</MasterTableView>
<ExportSettings FileName="Rapor">
<Excel Format="Html"></Excel>
</ExportSettings>
<ClientSettings AllowDragToGroup="true">
</ClientSettings>
</telerik:RadGrid>

RadGrid: format double with eval

In order to format double with eval :

 <telerik:GridTemplateColumn HeaderText="Ortalama" DataField="Ortalama" UniqueName="Ortalama"  
                         SortExpression="Ortalama" HeaderStyle-Width="80px" >  
                         <ItemTemplate>  
                           <%# String.Format("{0:f2}", DataBinder.Eval(Container.DataItem, "Ortalama"))%>  
                         </ItemTemplate>  
                       </telerik:GridTemplateColumn>  

the solution is from: http://stackoverflow.com/questions/5168592/force-a-string-to-2-decimal-places

RadComboBox: custom sorting of items

The link (http://www.telerik.com/help/aspnet-ajax/combobox-how-to-implement-custom-sorting.html) explains how to implement a custom sorting mechanism for RadComboBox..
It says that Telerik RadComboBox sorts by using the text by default, but it seems to use the value instead..
In order to sort by text, the following class can be used:

1:  public class RadComboSortByText : IComparer  
2:    {  
3:      public int Compare(object x, object y)  
4:      {  
5:        RadComboBoxItem p1 = new RadComboBoxItem();  
6:        RadComboBoxItem p2 = new RadComboBoxItem();  
7:        if (x is RadComboBoxItem)  
8:          p1 = x as RadComboBoxItem;  
9:        if (y is RadComboBoxItem)  
10:          p2 = y as RadComboBoxItem;  
11:        int cmp = 0;  
12:        if (p1.ComboBoxParent.Sort == RadComboBoxSort.Ascending)  
13:        {  
14:          //here we compare the Text of the items  
15:          cmp = String.Compare(p1.Text, p2.Text, !p1.ComboBoxParent.SortCaseSensitive);  
16:        }  
17:        if (p1.ComboBoxParent.Sort == RadComboBoxSort.Descending)  
18:        {  
19:          //here we compare the Text of the items  
20:          cmp = String.Compare(p1.Text, p2.Text, !p1.ComboBoxParent.SortCaseSensitive) * -1;  
21:        }  
22:        return cmp;  
23:      }  
24:    }  

.. and itemBound of RadComboBox:

1:  protected void ComboEgitimDali_ItemDataBound(object sender, RadComboBoxItemEventArgs e)  
2:      {  
3:        ComboEgitimDali.Sort = RadComboBoxSort.Ascending;  
4:        ComboEgitimDali.SortItems(new RadComboSortByText());  
5:      }  

 <telerik:RadComboBox ID="ComboEgitimDali" runat="server" OnItemDataBound="ComboEgitimDali_ItemDataBound">  

RadGrid: to deselect the last selected item on client side

In order to deselect the last selected item in the RadGrid, the following function can be used on client side:
javascript:

 <telerik:RadCodeBlock ID="RadCodeBlock" runat="server">  
     <script type="text/javascript">  
       function DeselectLastSelected(gridID, index) {  
         var masterTable = $find(gridID).get_masterTableView();  
         masterTable.deselectItem(masterTable.get_selectedItems()[index].get_element());  
       }  
        function RowSelected(sender, eventArgs) {  
         if (sender != null) {  
           var numOfSelected = sender.get_masterTableView().get_selectedItems().length;  
           DeselectLastSelected(sender.ClientID, numOfSelected - 1);  
         }  
       }  
  </script>  
   </telerik:RadCodeBlock>  

RadGrid:

 telerik:RadGrid AutoGenerateColumns="False" ID="GridOgrenciDersListe" AllowFilteringByColumn="false"   
    AllowPaging="False" AllowSorting="False" runat="server" ShowGroupPanel="false"   
    Width="560px" AllowMultiRowSelection="True" ShowFooter="false" Visible="false">   
    <PagerStyle Mode="NextPrevAndNumeric" />   
    <GroupingSettings CaseSensitive="false" />   
    <ClientSettings EnableRowHoverStyle="true">   
     <Selecting AllowRowSelect="True" UseClientSelectColumnOnly="true"></Selecting>   
     <ClientEvents OnRowSelected="RowSelected" OnRowDeselected="RowDeselected" />   
    </ClientSettings>   
    <MasterTableView TableLayout="Fixed" DataKeyNames="ID" Font-Size="XX-Small" ClientDataKeyNames="ID">   
     <Columns>   
      <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">   
      </telerik:GridClientSelectColumn>   
  </Columns>   
    </MasterTableView>   
   </telerik:RadGrid>   

RadGrid: to disable select-all checkbox in header

In order to disable (or make invisible) the select-all checkbox, the following javascript may be used:
the javascript code:

 <telerik:RadCodeBlock ID="RadCodeBlock" runat="server">  
     <script type="text/javascript">  
       function DisableAllSelectOption(sender, eventArgs) {  
         var prefix = sender.ClientID.substring(0, sender.ClientID.lastIndexOf("_"));  
         document.getElementById(prefix + '<%= "_GridOgrenciDersListe_ctl00_ctl02_ctl00_ClientSelectColumnSelectCheckBox"%>').style.visibility = 'hidden';  
       }  
  </script>  
   </telerik:RadCodeBlock>  

radgrid:

 <telerik:RadGrid AutoGenerateColumns="False" ID="GridOgrenciDersListe" AllowFilteringByColumn="false"  
     AllowPaging="False" AllowSorting="False" runat="server" ShowGroupPanel="false"  
     Width="560px" AllowMultiRowSelection="True" ShowFooter="false" Visible="false">  
     <PagerStyle Mode="NextPrevAndNumeric" />  
     <GroupingSettings CaseSensitive="false" />  
     <ClientSettings EnableRowHoverStyle="true">  
       <Selecting AllowRowSelect="True" UseClientSelectColumnOnly="true"></Selecting>  
       <ClientEvents OnRowSelected="RowSelectionChanged" OnRowDeselected="RowSelectionChanged"  
         OnDataBound="RowSelectionChanged" OnGridCreated="DisableAllSelectOption"/>  
     </ClientSettings>  
     <MasterTableView TableLayout="Fixed" DataKeyNames="ID" Font-Size="XX-Small" ClientDataKeyNames="ID">  
       <Columns>  
         <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">  
         </telerik:GridClientSelectColumn>  
 </Columns>  
     </MasterTableView>  
   </telerik:RadGrid>  

RadGrid: coloring a line dynamically on client side

In a radgrid, changing forecolor of a row dynamically on client side is pretty easy. It can be achieved by using GridTemplateColumn:

 <telerik:GridTemplateColumn HeaderText='Not' HeaderStyle-Width="50px">  
           <ItemTemplate>  
             <div style='color: <%# Eval("Renk")%>'>  
               <%# Eval("OgrenciNihaiNot")%>  
             </div>  
           </ItemTemplate>  
         </telerik:GridTemplateColumn>  

a good article on string matching in Linq

A good article about string matching in Linq :
http://blogs.telerik.com/blogs/posts/12-04-17/string-matching-in-linq.aspx?utm_source=facebook&utm_medium=sm&utm_campaign=top2012

how to telerik:RadMenu show path

In order to view the selected path from your telerik RadMenu as in the picture below, you can use the following code:

aspx code:


<telerik:RadSiteMap ID="BreadCrumbSiteMap" runat="server" DataTextField="Text" DataNavigateUrlField="NavigateUrl">
        <DefaultLevelSettings ListLayout-RepeatDirection="Horizontal" SeparatorText="/" Layout="Flow" />
</telerik:RadSiteMap>



csharp code:


      protected void Page_Load(object sender, EventArgs e)
        {
            RadMenuItem currentItem = RadMenu.FindItemByUrl(Request.Url.PathAndQuery);
            if (currentItem != null)
            {
                currentItem.HighlightPath();
                DataBindBreadCrumbSiteMap(currentItem);
            }
            else
                RadMenu.Items[0].HighlightPath();
        }

        private void DataBindBreadCrumbSiteMap(RadMenuItem currentItem)
        {
            List breadCrumbPath = new List();
            while (currentItem != null)
            {
                breadCrumbPath.Insert(0, currentItem);
                currentItem = currentItem.Owner as RadMenuItem;
            }
            BreadCrumbSiteMap.DataSource = breadCrumbPath;
            BreadCrumbSiteMap.DataBind();
        }



The solution is from here: http://demos.telerik.com/aspnet-ajax/menu/examples/programming/showpath/defaultcs.aspx?Page=Blogs

using Telerik Scheduler to view weekly lesson plan

In this post, i present the code that configures Telerik radscheduler to view a weekly lesson plan. In order to do this, the selected date attribute should be a month starting at Monday (which is the first week day in the scheduler.)

.aspx code (actually i use it as a user control )

<telerik:RadScheduler runat="server" ID="RadScheduler" Width="750px" SelectedView="WeekView"

    TimeZoneOffset="00:00:00" SelectedDate="2013-04-01" DayStartTime="07:00:00" DayEndTime="23:59:00"

     ReadOnly="true"

     DataEndField="End" 

     DataKeyField="DersProgramiID" DataStartField="Start" DataSubjectField="DersItem" 

     AllowDelete="False" AllowEdit="False" AllowInsert="False" 

     DayView-DayStartTime="07:00:00" DayView-DayEndTime="23:59:00" LastDayOfWeek="Sunday" 

     WeekView-DayEndTime="23:59:00" WeekView-DayStartTime="07:00:00" WeekView-WorkDayEndTime="23:59:00" 

     WeekView-WorkDayStartTime="07:00:00" WorkDayEndTime="23:59:00" WorkDayStartTime="07:00:00" FirstDayOfWeek="Monday" 

     Height="900px" ShowNavigationPane="True" ShowAllDayRow="False" ShowHeader="False" ShowFullTime="False" ShowFooter="False" HoursPanelTimeFormat="HH:mm">

    <TimelineView UserSelectable="false" ShowDateHeaders="false"></TimelineView>

    <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>

    <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>

</telerik:RadScheduler>

csharp code to fill the scheduler:

 public void fill(List list)

 {

      this.RadScheduler.DataSource = list;

      this.RadScheduler.DataBind();

  }

The weekly lesson plan is as follows:

The original Telerik demo is here: http://demos.telerik.com/aspnet-ajax/scheduler/examples/dbschedulerprovider/defaultcs.aspx 

introduction to telerik reports

it has been years since i have not dealt with reporting.. so, i am a total newbie for this..
in this post, i share my one-day activity on warming up using telerik reports, a sample telerik report about a specific user's information viewed in a web app and how to deploy it in a remote server..
first thinngs first.. my bookmarks:

• http://tv.telerik.com/search?&keywords=reporting -> all videos about telerik reports 
• http://tv.telerik.com/watch/reporting/webinar/telerik-reporting-101 -> a startup webinar by Kevin Babcock.. the webinar pretty much follows the totorial on http://www.telerik.com/support/documentation-and-tutorials/step-by-step-tutorial-for-reporting.aspx. i recommend to watch the webinar, it is easier to understand..
• http://tv.telerik.com/watch/reporting/webinar/falafelreportingwebinar -> another startup webinar.. i have not watched this yet, but i am planning to do so..
• http://tv.telerik.com/watch/reporting/video/telerik-trainer-reporting-parameters -> about report parameters. good demos..
• http://tv.telerik.com/watch/reporting/sqldatasource/using-parameterized-queries-telerik-reporting-with-sqldatasource-component and http://tv.telerik.com/watch/reporting/video/telerik-reporting-design-time-support-for-parameterized-queries -> these two videos are actually for my specific needs.. producing a report by passing the user id from the hosting web app.. 

Report library part:

Now, the first step is creating a report library project.. Then a telerik report is created. i used the report wizard and used an SqlDataSource as the data source. My select query contains a parameter:

SELECT ...

FROM  ...  

WHERE TableStudent.ID = @StudentID

The report also contains a parameter with the same name. 

The constructor for the report is something like that:

        public ReportStudent(int studentID)

        {

            InitializeComponent();

            this.ReportParameters["StudentID"].Value = studentID;

            this.StudentDataSource.Parameters[0].Value = studentID;

            this.StudentDataSource.SelectCommand =           this.StudentDataSource.SelectCommand.Replace("@StudentID", studentID.ToString());

        }

Web app part:

In the web app which is going to view the report, i added a report viewer from the toolbox, but left the report property unassigned.  In the web page, the user selects a student, then presses a button and the report for the selected student is viewed inside the report viewer.

The button click event code is as follows:

protected void ButtonReport_Click(object sender, EventArgs e)

        {

            if (Session["StudentID"] != null &&

                !(((string)Session["StudentID"]).Trim().Equals("")))

            {

                ReportViewer viewer = (ReportViewer)this.ReportContent.Controls[0];

                ReportStudent report = new ReportStudent(Int32.Parse((string)Session["StudentID"]));

                viewer.Report = report;

                viewer.RefreshReport();

            }

        }

The above scenario works perfectly..

When deploying to the remote server, change the connection strings accoringly in:

• Web.config of web app
• Settings.settings and app.config for the report library.

Besides,  add the telerik libraries shown in the figure. (By the way, i am not sure if this list is minimal or not...)

and finally, here is telerik relevant portions of my web.config:



<configuration>
  <configSections>
    <section name="Telerik.Reporting" type="Telerik.Reporting.Processing.Config.ReportingConfigurationSection, Telerik.Reporting, Version=6.0.12.215, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" allowLocation="true" allowDefinition="Everywhere" />
  </configSections>
  <Telerik.Reporting>
    <Extensions>
      <Render>
        <Extension name="IMAGE" visible="false"></Extension>
        <Extension name="HTML" visible="false"></Extension>
        <Extension name="MHTML" visible="false"></Extension>
        <Extension name="XLS" visible="false"></Extension>
        <Extension name="CSV" visible="false"></Extension>
        <Extension name="RTF" visible="false"></Extension>
      </Render>
    </Extensions>
  </Telerik.Reporting>
  ...
  <appSettings>
    <add key="Telerik.Skin" value="Web20" />
    <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
  </appSettings>
  <system.web>
    <pages>
      <controls>
        <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" />
      </controls>
    </pages>
    <compilation targetFramework="4.0">
      <assemblies>
        <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
        <add assembly="System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
        <add assembly="System.Speech, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="Telerik.ReportViewer.WebForms, Version=6.0.12.215, Culture=neutral, PublicKeyToken=A9D7983DFCC261BE" />
        <add assembly="Telerik.Reporting, Version=6.0.12.215, Culture=neutral, PublicKeyToken=A9D7983DFCC261BE" />
      </assemblies>
    </compilation>
    <httpHandlers>
      <add path="ChartImage.axd" verb="*" type="Telerik.Web.UI.ChartHttpHandler"
        validate="false" />
      <add path="Telerik.Web.UI.SpellCheckHandler.axd" verb="*" type="Telerik.Web.UI.SpellCheckHandler"
        validate="false" />
      <add path="Telerik.Web.UI.DialogHandler.aspx" verb="*" type="Telerik.Web.UI.DialogHandler"
        validate="false" />
      <add path="Telerik.RadUploadProgressHandler.ashx" verb="*" type="Telerik.Web.UI.RadUploadProgressHandler"
        validate="false" />
      <add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource"
        validate="false" />
      <add path="Telerik.ReportViewer.axd" verb="*" type="Telerik.ReportViewer.WebForms.HttpHandler, Telerik.ReportViewer.WebForms, Version=6.0.12.215, Culture=neutral, PublicKeyToken=a9d7983dfcc261be"
     validate="true" />
    </httpHandlers>
  </system.web>
  <system.webServer>
    <handlers>
      <remove name="ChartImage_axd" />
      <add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode" />
      <remove name="Telerik_Web_UI_SpellCheckHandler_axd" />
      <add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode" />
      <remove name="Telerik_Web_UI_DialogHandler_aspx" />
      <add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode" />
      <remove name="Telerik_RadUploadProgressHandler_ashx" />
      <add name="Telerik_RadUploadProgressHandler_ashx" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" preCondition="integratedMode" />
      <remove name="Telerik_Web_UI_WebResource_axd" />
      <add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode" />
      <add name="Telerik.ReportViewer.axd_*" path="Telerik.ReportViewer.axd" verb="*" type="Telerik.ReportViewer.WebForms.HttpHandler, Telerik.ReportViewer.WebForms, Version=6.0.12.215, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" preCondition="integratedMode" />
    </handlers>
  </system.webServer>
</configuration>