Alphabetic paging in Radgrid

[Soumya]

I am trying to make a grid alphabetic paging.
I have seen the demo in (Alphabetic Pager) http://demos.telerik.com/aspnet-ajax/grid/examples/programming/alphabeticpaging/defaultcs.aspx .

Iam binding the grid using  NeedDataSource event.
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

[Shinu]

Hi,

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.

[Soumya]

Thanks Shinu.
It is working.

[Soumya]

Hi shinu,
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

[Shinu]

Hi,

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.

[Soumya]

It is working.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?

[Shinu]

Hi Soumya,

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.

[Soumya]

Thanks for the answer 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;

            }

         

    }

[Shinu]

Hi Soumya,

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.

[Soumya]

Thanks shinu. It is working.
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

[Shinu]

Hi 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.

[Soumya]

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();
            }

[Soumya]

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

Thanks,
Soumya

[Guss]

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);
            }
        }
    }

[Guss]

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);
               }

[Eyup]

Hi Guss,

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

[Fahad]

Can we use the same technique in other syntax as well?

[Neil N]

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.

[Eyup]

Hi Neil,

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

[Neil N]

The only thing adding the same logic for CommandItem in the ItemDataBound event handler changed was to add duplicate (non-functional on mobile) alphabetical linkbuttons in the PlaceHolder control. Removed the RadAjaxPanel.

[Eyup]

Hi Neil,

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