Alphabetic paging in Radgrid

16 posts, 0 answers
  1. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 18 Jul 2012 Link to this post

    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



  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 18 Jul 2012 Link to this post

    Thanks Shinu.
    It is working.
  5. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    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
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Jul 2012 Link to this post

    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.
  7. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    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?


  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jul 2012 Link to this post

    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.
  9. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 21 Jul 2012 Link to this post

    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;
                }
             
        }
  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Jul 2012 Link to this post

    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.
  11. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 23 Jul 2012 Link to this post

    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
  12. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Jul 2012 Link to this post

    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.
  13. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 24 Jul 2012 Link to this post

    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();
                }
  14. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 25 Jul 2012 Link to this post


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

    Thanks,
    Soumya
  15. Guss
    Guss avatar
    26 posts
    Member since:
    Nov 2011

    Posted 17 May 2015 Link to this post

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

  16. Guss
    Guss avatar
    26 posts
    Member since:
    Nov 2011

    Posted 17 May 2015 in reply to Guss Link to this post

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

  17. Eyup
    Admin
    Eyup avatar
    3006 posts

    Posted 21 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017