Change RadWindow’s Title from Javascript or from Client-side


As per my scenario, I have RadGrid which contains Add and Edit button for Adding new record and Updated existing record respectively. On click of any of these button it will open a RadWindow which contains all my page controls. And I have a requirement to set the Title of RadWindow accordinly. I mean when user click Add button at that time RadWindow’s Title should be Add Mode and for Edit button click it should be Edit Mode.

And I found an easy way to set the Title of RadWindow from client-side, which I am going to share with you.

On Button, I have a ClientClick() event from where I am opening RadWindow, so now I am going to pass the Mode of the RadWindow in which it is going to be opened. Say for example,

OnClientClick=”openFileBuilderDialog(‘Add’);”

Here, openFileBuilderDialog is my Javascript Function, which is shown as below.

function openFileBuilderDialog(Mode) {

var wnd = $find(‘<%=RadWindow1.ClientID %>’);

if (Mode == “View”) {

wnd.set_title(“View File Information”);

}

elseif (Mode == “Edit”) {

wnd.set_title(“Edit File Information”);

}

elseif (Mode == “Add”) {

wnd.set_title(“Add File Information”);

}

wnd.show();

}

 In this function,

  1. Get the RadWindow using its ClientID.
  2. Find the current mode of the RadWindow, which I have supply on appropriate button’s onClientClick event.
  3. Then use the “set_title” method to set the Title that we want.
  4. And finally called, “show” method to open the RadWindow.

That’s it.

If the content page has its own title set in the @Page directive or in the <head> section, this title will override the RadWindow’s one.

To find more methods of RadWindow and examples please follow the below link,

http://www.telerik.com/help/aspnet-ajax/window-programming-radwindow-methods.html

Export to Excel or PDF in RadGrid


Introduction:

RadGrid has a built-in facility to export the grid’s data into different formats like Excel, CSV, Word or PDF and we can export the same as per the system requierement. Here I will show you how to export grid’s data in PDF or Excel format.

Code:

First of all in RadGrid, place the ExportSettings tag as below in the code. Here I have set properties like IgnorePaging equal to True to export all grids data and OpenInNewWindow equal to true to open the export data in a seperate window. Also in ExportSettings section I have defined the width of the PDF page.

<ExportSettingsIgnorePaging=”true”OpenInNewWindow=”true”>

<PdfPageWidth=”1500px”/>

</ExportSettings>

Now in RadAjaxManager of your page add the following event:

ClientEvents-OnRequestStart=”requestStart”

Then, add the following javascript function in your aspx page:

function requestStart(sender, args) {

if (args.get_eventTarget().indexOf(“btnExportToPDF”) > 0 ||

args.get_eventTarget().indexOf(“btnExportToExcel”) > 0)

args.set_enableAjax(false);

}

And then add the command name for the button as like following for PDF or Excel.

CommandName=”ExportToPdf”

and it’s done.

GROUPING in RadGrid


Introduction:

RadGrid supports grouping of items based on the value of a particular column. You can even have multilevel grouping based on different criteria.

To group the data in a grid, specify grouping criteria by setting the GroupByExpressions property of a table view in the grid

Code:

<MasterTableView Width=”100%” CommandItemDisplay=”Top” GroupLoadMode=”Server” ShowGroupFooter=”true”>

<GroupByExpressions>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldAlias=”Security” FieldName=”SEC_CODE” SortOrder=”Ascending” />

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldAlias=”Security” FieldName=”SEC_CODE” SortOrder=”Ascending” />

</GroupByFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

</MasterTableView>

Change RadGrid PageSize Dropdown


Introduction:

Telerik’s RadGrid provides in-built functionality for paging. User have to select the number of records from the Page Size combo box (default is 10, 20 and 50) and selected number of records is going to display in RadGrid. But we can also change the Page Size in combo box as per our requirement. Following is the code to do the same:

Code:

protectedvoid grdViewReport_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item isGridPagerItem)

{

RadComboBox PageSizeCombo = (RadComboBox)e.Item.FindControl(“PageSizeComboBox”);

PageSizeCombo.Items.Clear();

PageSizeCombo.Items.Add(newRadComboBoxItem(“100”));

PageSizeCombo.FindItemByText(“100”).Attributes.Add(“ownerTableViewId”, grdViewReport.MasterTableView.ClientID);

PageSizeCombo.Items.Add(newRadComboBoxItem(“200”));

PageSizeCombo.FindItemByText(“200”).Attributes.Add(“ownerTableViewId”, grdViewReport.MasterTableView.ClientID);

PageSizeCombo.Items.Add(newRadComboBoxItem(“500”));

PageSizeCombo.FindItemByText(“500”).Attributes.Add(“ownerTableViewId”, grdViewReport.MasterTableView.ClientID);

PageSizeCombo.FindItemByText(e.Item.OwnerTableView.PageSize.ToString()).Selected = true;

}

}

Simple way to Show/Hide Filter in RadGrid


Description:

Telerik’s RadGrid provides in-built search functionality. You can find the search functionality at top of the grid just below the header columns. But user should be able to hide the same to save unnecessary space all the time from the grid.

RadGrid Example when Filter is not visible to the user:

Radgrid without Filter

Radgrid without Filter

RadGrid Example when Filter is visible to the user:

RadGrid With Filter

RadGrid With Filter


Code:

First of all in RadGrid’s MasterTableView tag, add following checkbox:

<MasterTableView Width=”100%” CommandItemDisplay=”Top” GroupLoadMode=”Server”>

<CommandItemTemplate>

<asp:CheckBox ID=”CheckBox2″ AutoPostBack=”true” CssClass=”CheckBox” runat=”server”

ForeColor=”White” Text=”Show Filter” />

</CommandItemTemplate>

After that add the ItemCreated event in the RadGrid as following code does:

protected void grdManageTransType_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item.ItemType == GridItemType.CommandItem)

{

GridCommandItem commandItem = e.Item as GridCommandItem;

CheckBox chkFilter2 = (CheckBox)commandItem.FindControl(“CheckBox2”);

chkFilter2.AutoPostBack = true;

chkFilter2.ForeColor = System.Drawing.Color.White;

chkFilter2.Checked = grdManageTransType.AllowFilteringByColumn;

//Adding the event handler

chkFilter2.CheckedChanged += new EventHandler(chkFilter2_CheckedChanged);

}

if (e.Item.ItemType == GridItemType.SelectedItem)

e.Item.BackColor = Color.FromName(“#FFEDC1”);

}

In above portion of code we are creating CheckedChanged event of the checkbox. So now create the CheckedChanged event of the checkbox as per following code:

protected void chkFilter2_CheckedChanged(object sender, EventArgs e)

{

grdManageTransType.AllowFilteringByColumn = !grdManageTransType.AllowFilteringByColumn;

grdManageTransType.Rebind();

}

As per the above code portions, we can the checkbox at the top of the RadGrid. On click of that checkbox RadGrid’s filter should be visible on or off.

Count items in Telerik’s RadComboBox


Description:

It is general requirement to show and count number of items in Telerik’s RadComboBox. And we can do that by using a simple javascript function.

Code:

In javasript:

function UpdateItemCountField(sender, args) {

//set the footer text

sender.get_dropDownElement().lastChild.innerHTML = “A total of “ + sender.get_items().get_count() + ” items”;

}

In aspx page:

add footer template as shown below code.

<FooterTemplate>

A total of

<asp:Literal runat=”server” ID=”RadComboItemsCount” />

items

</FooterTemplate>