I have seen the demo in (Alphabetic Pager) http://demos.telerik.com/aspnet-ajax/grid/examples/programming/alphabeticpaging/defaultcs.aspx .
How can I pass the below select parameter to the program while performing the SELECT query.
<SelectParameters>
<asp:Parameter Name="Letter" DefaultValue="%" />
</SelectParameters>
I have just started using the telerik controls. Please help me on this.
Thanks,
Soumya
20 Answers, 1 is accepted

Please take a look into the sample code snippet I tried to do the Alphabetic paging using NeedDataSource event.
ASPX:
<
telerik:RadGrid
ID
=
"RadGrid1"
AllowPaging
=
"True"
runat
=
"server"
OnItemCreated
=
"RadGrid1_ItemCreated"
OnItemCommand
=
"RadGrid1_ItemCommand"
onneeddatasource
=
"RadGrid1_NeedDataSource"
>
<
PagerStyle
Mode
=
"NextPrevAndNumeric"
AlwaysVisible
=
"true"
/>
</
telerik:RadGrid
>
C#:
public
string
PageLetter =
string
.Empty;
public
static
string
connection = WebConfigurationManager.ConnectionStrings[
"NorthwindConnectionString3"
].ConnectionString;
SqlConnection conn =
new
SqlConnection(connection);
public
SqlCommand Sql =
new
SqlCommand();
public
void
RadGrid1_ItemCreated(
object
sender, Telerik.Web.UI.GridItemEventArgs e)
{
if
(e.Item
is
GridPagerItem)
{
GridPagerItem pagerItem = (e.Item
as
GridPagerItem);
pagerItem.PagerContentCell.Controls.Clear();
for
(
int
i = 65; i <= 65 + 25; i++)
{
LinkButton linkButton1 =
new
LinkButton();
LiteralControl lc =
new
LiteralControl(
" "
);
linkButton1.Text =
""
+ (
char
)i;
linkButton1.CommandName =
"alpha"
;
linkButton1.CommandArgument =
""
+ (
char
)i;
pagerItem.PagerContentCell.Controls.Add(linkButton1);
pagerItem.PagerContentCell.Controls.Add(lc);
}
LiteralControl lcLast =
new
LiteralControl(
" "
);
pagerItem.PagerContentCell.Controls.Add(lcLast);
LinkButton linkButtonAll =
new
LinkButton();
linkButtonAll.Text =
"All"
;
linkButtonAll.CommandName =
"NoFilter"
;
pagerItem.PagerContentCell.Controls.Add(linkButtonAll);
}
}
public
void
RadGrid1_ItemCommand(
object
source, Telerik.Web.UI.GridCommandEventArgs e)
{
String value =
null
;
switch
(e.CommandName)
{
case
(
"alpha"
):
{
value =
string
.Format(
"{0}%"
, e.CommandArgument);
break
;
}
case
(
"NoFilter"
):
{
value =
"%"
;
break
;
}
}
PageLetter = value;
RadGrid1.Rebind();
}
protected
void
RadGrid1_NeedDataSource(
object
sender, GridNeedDataSourceEventArgs e)
{
if
(PageLetter ==
""
)
{
PageLetter =
"%"
;
}
string
selectQuery1 =
"SELECT [ContactName], [ContactTitle], [CompanyName] FROM [Customers] WHERE [ContactName] LIKE '"
+PageLetter+
"'"
;
SqlDataAdapter adapter1 =
new
SqlDataAdapter(selectQuery1, conn);
DataTable dt1 =
new
DataTable();
conn.Open();
adapter1.Fill(dt1);
conn.Close();
RadGrid1.DataSource = dt1;
}
Thanks,
Shinu.

It is working.

I have an issue in the alphabetic paging,on clicking 'All' link.
On clicking 'All',records from begining should be shown.But for me it is showing some records randomly.Even in the Telerik Demo ,behaviour is the same.
In the NeedDataSource event,RadGrid1.DataSource is having the whole records from the beginning.But those records are not coming in the display.Do we need to rebing the grid again.But rebind in the NeedDataSource even is not allowed.
protected
void
RadGrid1_NeedDataSource(
object
sender, GridNeedDataSourceEventArgs e)
{
if
(PageLetter ==
""
)
{
PageLetter =
"%"
;
}
string
selectQuery1 =
"SELECT [ContactName], [ContactTitle], [CompanyName] FROM [Customers] WHERE [ContactName] LIKE '"
+PageLetter+
"'"
;
SqlDataAdapter adapter1 =
new
SqlDataAdapter(selectQuery1, conn);
DataTable dt1 =
new
DataTable();
conn.Open();
adapter1.Fill(dt1);
conn.Close();
RadGrid1.DataSource = dt1;
}
Please let me know if it is the same for you also.
Appreciate help from anyone.
Thanks,
Soumya

Please try setting the PageSize property of RadGrid to the total count of records to show the entire records in RadGrid on clicking the 'All' option.In the above code I set the PageSize to '80' and could see all the records.
ASPX:
<
telerik:RadGrid
ID
=
"RadGrid1"
AllowPaging
=
"true"
PageSize
=
"80"
runat
=
"server"
GridLines
=
"None"
Width
=
"100%"
OnItemCreated
=
"RadGrid1_ItemCreated"
OnItemCommand
=
"RadGrid1_ItemCommand"
onneeddatasource
=
"RadGrid1_NeedDataSource"
>
Thanks,
Shinu.

I have inline Edit in the same grid.When I click the 'Add new record' button,it behaves as before.On clicking refresh button,do not refresh the page also.it remains in the same page with some randomly selected records.
Any idea on this?

I guess your requirement is to show all records on refresh and to close the insert form.Please take a look into the following code snippet.
C#:
public
string
Value
{
get
{
return
(
string
)ViewState[
"Value"
] ??
"%"
;
}
set
{
ViewState[
"Value"
] = value;
}
}
public
void
RadGrid1_ItemCommand(
object
source, Telerik.Web.UI.GridCommandEventArgs e)
{
if
(e.CommandName == RadGrid.RebindGridCommandName)
{
RadGrid1.MasterTableView.IsItemInserted =
false
;
RadGrid1.Rebind();
}
switch
(e.CommandName)
{
case
(
"alpha"
):
{
Value =
string
.Format(
"{0}%"
, e.CommandArgument);
break
;
}
case
(
"NoFilter"
):
{
Value =
"%"
;
break
;
}
}
PageLetter = Value;
RadGrid1.Rebind();
}
Thanks,
Shinu.

I have one more question.
In case of Fliter(Grid buil in filter function),how to check for the search key word in the below code block?I have No Filter,Equal To and Contains in the filter.
switch
(e.CommandName)
{
case
(
"alpha"
):
{
Value =
string
.Format(
"{0}%"
, e.CommandArgument);
break
;
}
case
(
"NoFilter"
):
{
Value =
"%"
;
break
;
}
}

Please try the following code snippet to get the search key word as well as the filter function.
C#:
switch
(e.CommandName)
{
case
(
"alpha"
):
{
Value =
string
.Format(
"{0}%"
, e.CommandArgument);
break
;
}
case
(
"NoFilter"
):
{
Value =
"%"
;
break
;
}
case
(
"Filter"
):
{
Pair filterPair = (Pair)e.CommandArgument;
string
filterpair = filterPair.First.ToString();
// contains the Filter function
GridFilteringItem item = (GridFilteringItem)e.Item;
TextBox searchValue = (TextBox)(e.Item
as
GridFilteringItem)[
"ContactName"
].Controls[0];
string
searchvalue = searchValue.Text;
// contains the text given in the filter textbox
if
(filterpair ==
"Contains"
)
{
//your code
}
else
if
(filterpair ==
"No Filter"
)
{
//your code
}
else
{
//your code
}
break
;
}
}
Thanks,
Shinu.

I still have an issue with alphabetic paging.Please let me know if you too have the same issue and the solution if you know.
1)While using alphabetic paging,I was not able to show all records corresponding to a particular aplhabet dynamically,since I am setting the page size.
So for this I have used the slider to move to next record along with alphabetic paging.
Here I have an issue as below
a) Select a letter that returns multiple pages of data
b) Change the page
The page changes successfully, but the grid is being rebound and the alphabetic selection is removed. i.e. it goes back to "All" when you change pages.
Same issue had been discussed before also (http://www.telerik.com/community/forums/aspnet-ajax/grid/paging-alphabetic-slider.aspx )
I am using the same code given in the above link.But result is same.
2)Also I am using EditMode="EditForms" in the grid to insert and edit records.
While edit mode and insert mode I need to disable the 'Add new record' button,refresh button,slider and the alphabets.
Command Item Template in aspx
<
CommandItemTemplate
>
<
asp:PlaceHolder
ID
=
"PlaceHolder1"
runat
=
"server"
></
asp:PlaceHolder
>
<
table
>
<
tr
>
<
td
align
=
"left"
>
<
asp:Button
ID
=
"btnAdd"
runat
=
"server"
CommandName
=
"InitInsert"
CssClass
=
"rgAdd"
/>
<
asp:Label
ID
=
"lbladd"
runat
=
"server"
Text
=
"Add Nationality"
></
asp:Label
>
</
td
>
<
td
align
=
"right"
>
<
asp:Button
ID
=
"btnRefresh"
runat
=
"server"
CommandName
=
"RebindGrid"
Text
=
"Refresh"
CssClass
=
"rgRefresh"
/>
<
asp:Label
ID
=
"lblref"
runat
=
"server"
Text
=
"Refresh"
></
asp:Label
>
</
td
>
</
tr
>
</
table
>
</
CommandItemTemplate
>
I have used the below piece of code for disabling the command items.
protected
void
gvNation_PreRender(
object
sender, EventArgs e)
{
GridPagerItem pagerItem = (GridPagerItem)gvNation.MasterTableView.GetItems(GridItemType.Pager)[1];
if
(gvNation.EditIndexes.Count > 0)
{
pagerItem.Enabled =
false
;
GridCommandItem commandItem = (GridCommandItem)gvNation.MasterTableView.GetItems(GridItemType.CommandItem)[0];
Button btn = (Button)commandItem.FindControl(
"btnAdd"
);
btn.Enabled =
false
;
Button btnR = (Button)commandItem.FindControl(
"btnRefresh"
);
btnR.Enabled =
false
;
}
else
{
pagerItem.Enabled =
true
;
//
}
}
But here I am not able to disable the alphabets as "
pagerItem.Enabled = false" will disable only the slider.
a)How to disable the alphabets in edit mode & insert mode?
b)Also how to disable the command items in insert mode?How do I check if it is in insert mode here?Thanks,
Soumya

1.I also experience the rebinding of the RadGrid when changing the page of the slider.Whenever the page is changed, the RadGrid rebinds calling the NeedDataSource event. So the 'PageLetter' will be taking the value '%', I tried setting the 'PageLetter' as a Static variable and worked fine at my end.
2.Please check the following code snippet to disable 'Add new record' button,refresh button,slider and the alphabets while adding or editing.
C#:
public
static
string
PageLetter =
string
.Empty;
protected
void
RadGrid1_PreRender(
object
sender, EventArgs e)
{
GridPagerItem pagerItem = (GridPagerItem)RadGrid1.MasterTableView.GetItems(GridItemType.Pager)[1];
GridCommandItem commandItem = (GridCommandItem)RadGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0];
PlaceHolder PlaceHolder1 = (PlaceHolder)citem.FindControl(
"PlaceHolder1"
);
if
(RadGrid1.MasterTableView.IsItemInserted || RadGrid1.EditIndexes.Count > 0)
{
pagerItem.Enabled =
false
;
PlaceHolder1.Visible =
false
;
//made the alphabets invisbile
Button btn = (Button)commandItem.FindControl(
"btnAdd"
);
btn.Enabled =
false
;
Button btnR = (Button)commandItem.FindControl(
"btnRefresh"
);
btnR.Enabled =
false
;
}
else
{
PlaceHolder1.Visible =
true
;
pagerItem.Enabled =
true
;
}
}
Thanks,
Shinu.

I have made 'PageLetter' as a Static variable and it is working.
But, after going to the second page of an alphabet,on clicking refresh button,the grid goes to the 2nd page of the whole records.Same is the case if we click 'All' or any other alphabet when the slider is moved to next.Do we need to reset the slider?
I have given
PageLetter =
"%"
for refresh as below.
What is the issue here.Am I missing something?
if
(e.CommandName == RadGrid.RebindGridCommandName)
{
gvNation.MasterTableView.IsItemInserted =
false
;
gvNation.MasterTableView.ClearEditItems();
PageLetter =
"%"
;
gvNation.Rebind();
}

I have given Radgrid.CurrentPageIndex = 0;
This solved my issue.
Thanks,
Soumya

I just thought that most examples are such ugly styling, here is one if you are also using bootstrap in your website:
protected
void
RadGridRoleMembers_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridPagerItem)
{
GridPagerItem pagerItem = (e.Item
as
GridPagerItem);
pagerItem.PagerContentCell.Controls.Clear();
HtmlGenericControl nav =
new
HtmlGenericControl(
"nav"
);
nav.Style.Add(
"background-color"
,
"#f5f5f5"
);
HtmlGenericControl ul =
new
HtmlGenericControl(
"ul"
);
ul.Attributes.Add(
"class"
,
"pagination pagination-sm"
);
ul.Style.Add(
"margin"
,
"7px 5px 1px 10px"
);
for
(
int
i = 65; i <= 65 + 25; i++)
{
HtmlGenericControl li =
new
HtmlGenericControl(
"li"
);
LinkButton lb =
new
LinkButton();
lb.Text =
""
+ (
char
)i;
lb.CommandName =
"alpha"
;
lb.CommandArgument =
""
+ (
char
)i;
li.Controls.Add(lb);
ul.Controls.Add(li);
}
HtmlGenericControl liAll =
new
HtmlGenericControl(
"li"
);
LinkButton lbAll =
new
LinkButton();
lbAll.Text =
"All"
;
lbAll.CommandName =
"NoFilter"
;
liAll.Controls.Add(lbAll);
ul.Controls.Add(liAll);
nav.Controls.Add(ul);
pagerItem.PagerContentCell.Controls.Add(nav);
}
}
}

An to make the current pager item active, do this: (see if (....Selectparameters.....)
for (int i = 65; i <= 65 + 25; i++)
{
HtmlGenericControl li = new HtmlGenericControl("li");
if (SqlDataSourceRoleMembers.SelectParameters["PageLetter"].DefaultValue == (char)i + "%") {
li.Attributes.Add("class", "active");
}
LinkButton lb = new LinkButton();
lb.Text = "" + (char)i;
lb.CommandName = "alpha";
lb.CommandArgument = "" + (char)i;
li.Controls.Add(lb);
ul.Controls.Add(li);
}
Generally, our help articles demonstrate the core implementation of some functionality, but you are right that we may improve their stylization later on. Thank you for sharing your approach with our community.
Regards,
Eyup
Telerik


The above code works for both desktop and mobile browsers but I'm trying to implement two different pager styles as detailed here: http://www.telerik.com/forums/paging-alphabetic-slider and having some problems with mobile. That is, the code on the linked page works fine in all desktop browsers (Windows, macOS X) but paging doesn't work on any mobile browsers (iOS, Android).
aspx:
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel1"
runat
=
"server"
CssClass
=
"grid_wrapper"
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
OnItemCreated
=
"RadGrid1_ItemCreated"
OnItemCommand
=
"RadGrid1_ItemCommand"
AllowPaging
=
"True"
PageSize
=
"50"
AllowSorting
=
"true"
RenderMode
=
"Auto"
>
<
PagerStyle
Position
=
"TopAndBottom"
AlwaysVisible
=
"true"
/>
<
MasterTableView
AutoGenerateColumns
=
"False"
AllowFilteringByColumn
=
"true"
TableLayout
=
"Fixed"
CommandItemDisplay
=
"TopAndBottom"
>
<
CommandItemTemplate
>
<
asp:PlaceHolder
ID
=
"PlaceHolder1"
runat
=
"server"
></
asp:PlaceHolder
>
</
CommandItemTemplate
>
<
Columns
>
Works on desktop and mobile:
public
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridPagerItem)
{
GridPagerItem pagerItem = (e.Item
as
GridPagerItem);
pagerItem.PagerContentCell.Controls.Clear();
for
(
int
i = 65; i <= 65 + 25; i++)
{
LinkButton linkButton1 =
new
LinkButton();
LiteralControl lc =
new
LiteralControl(
" "
);
linkButton1.Text =
""
+ (
char
)i;
linkButton1.CommandName =
"alpha"
;
linkButton1.CommandArgument =
""
+ (
char
)i;
pagerItem.PagerContentCell.Controls.Add(linkButton1);
pagerItem.PagerContentCell.Controls.Add(lc);
}
LiteralControl lcLast =
new
LiteralControl(
" "
);
pagerItem.PagerContentCell.Controls.Add(lcLast);
LinkButton linkButtonAll =
new
LinkButton();
linkButtonAll.Text =
"All"
;
linkButtonAll.CommandName =
"NoFilter"
;
pagerItem.PagerContentCell.Controls.Add(linkButtonAll);
}
}
Works on desktop, not mobile:
public
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridCommandItem)
{
GridCommandItem commandItem = (e.Item
as
GridCommandItem);
PlaceHolder container = (PlaceHolder)commandItem.FindControl(
"PlaceHolder1"
);
for
(
int
i = 65; i < 65 + 25; i++)
{
LinkButton linkButton1 =
new
LinkButton();
LiteralControl lc =
new
LiteralControl(
" "
);
linkButton1.Text =
""
+ (
char
)i;
linkButton1.CommandName =
"alpha"
;
linkButton1.CommandArgument =
""
+ (
char
)i;
container.Controls.Add(linkButton1);
container.Controls.Add(lc);
}
LiteralControl lcLast =
new
LiteralControl(
" "
);
container.Controls.Add(lcLast);
LinkButton linkButtonAll =
new
LinkButton();
linkButtonAll.Text =
"All"
;
linkButtonAll.CommandName =
"NoFilter"
;
container.Controls.Add(linkButtonAll);
}
}
When trying to debug, I even had both methods running at the same time. Both worked hand-in-hand on desktop, only the pagerItem code worked on mobile.
Try adding the same logic for CommandItem in the ItemDataBound event handler as well. Also, you can temporarily remove AJAX to check whether there are any errors interfering.
Regards,
Eyup
Progress Telerik

Please open a formal support ticket so we can further investigate this case and provide additional information about your exact grid configuration, preferably a runnable web site sample.
Regards,
Eyup
Progress Telerik