making the GridLine bold

7 posts, 2 answers
  1. Anjali
    Anjali avatar
    101 posts
    Member since:
    Dec 2010

    Posted 12 May 2011 Link to this post

    Hi All,

    I have a gridview. I have one linkbutton in the gridView and others are gridTemplatecolumns. I want to make the whole row bold whenever the user clicks on the link button

    2344       abc   def        ghi    nes

    so for e.g.

    whenever user clicks on 2344, I want to make  2344 abc  gth rwe nes bold or of different color. Is it possible to do that.
    so far my code is like below

    <telerik:RadGrid ID="RadGrid_Picker" AllowSorting="True" PageSize="100" AllowPaging="True"
                                            AllowMultiRowSelection="True" runat="server" GridLines="None" OnPageIndexChanged="RadGrid_Picker_PageIndexChanged"
                                            OnPageSizeChanged="RadGrid_Picker_PageSizeChanged" Width="1500px" Visible="false" OnItemCommand="RadGrid_Picker_ItemCommand" OnItemDataBound="RadGrid_Picker_ItemDataBound"   >
                                            <ClientSettings EnableRowHoverStyle="true"><Selecting AllowRowSelect="true" /></ClientSettings>
                                            <MasterTableView Width="100%" Summary="RadGrid table" DataKeyNames="ID" />
                                            <MasterTableView RetrieveAllDataFields="true" AutoGenerateColumns="false" >
                                                <Columns>
                                                   <telerik:GridBoundColumn DataField="ID"  Visible="false"></telerik:GridBoundColumn>
                                                    <telerik:GridTemplateColumn UniqueName="TemplateLinkColumn"  AllowFiltering="false" HeaderText="ID">
                                                        <ItemTemplate>
                                                            <asp:LinkButton ID="ID_Link" runat="server" OnClick="ID_Link_Click" Text='<%#Bind("ID") %>' CommandName="Bold"></asp:LinkButton>
                                                          
                                                        </ItemTemplate>
                                                    </telerik:GridTemplateColumn>
    </Columns>
                                            </MasterTableView>
                                            <PagerStyle Mode="NextPrevAndNumeric" />
                                        </telerik:RadGrid>
      
      
    and in the code behind
      
        protected void RadGrid_Picker_ItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == "Bold")
            {
                GridDataItem item = (GridDataItem)e.Item;
                string value = item.GetDataKeyValue("ID").ToString();
                e.Item.Style.Add(HtmlTextWriterStyle.FontWeight, "Bold");
            }
        }



    Thanks.

  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 12 May 2011 Link to this post

    Hi Anjali,

    I think the simplest way to highlight a row in a RadGrid is to make the row selected. The code is simple, just all the below code snippet to your RadGrid.

    <ClientSettings>
    <Selecting AllowRowSelect="true" />
    </ClientSettings>

    Here's a like to the documentation article:
    http://www.telerik.com/help/aspnet-ajax/grid-selecting-row-with-click-client-side.html

    Here's more info on how to style the selected row however you like:
    http://www.telerik.com/help/aspnet-ajax/grid-appearance-customizing-row.html

    Hope this helps,
    -Gimmik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anjali
    Anjali avatar
    101 posts
    Member since:
    Dec 2010

    Posted 12 May 2011 Link to this post

    Hi Gimmik,

     I read that artile too before posting the question, but my problem is First I need to retain the row being bold after postback and also, I have another button at the top of the grid, if User  click on that button then it should only return few rows, fewer than the one that were returned originally with the row that was selected previously in bold.
    The complete scenerio is  I have a Search text box at the top of the grid, user types something in that text box and results are returned in a gridview. Now he clicks on the linkbutton inside the grid. I need to return that particular row that he clciked to different color or bold, but there is another button at the top of the gridview that will return the row he clicked on and also the rows that are closely matching the rows that he selected so for e.g if he selected 123 in below grid

                   row1    row2    row3
    123         abc      def      ghi
    456         pqr       def      ghi

    Both 123 and 456 have "def": and "ghi" in common so I need to return both 123 and 456, but since he clicked 123, that particular row will be bolded.

    please let me know if you have any example like that.
  5. Answer
    Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 13 May 2011 Link to this post

    Hi Anjali,

    This should be fairly simple to accomplish if you're comfortable with client-side programming. The simplest way to highlight a single row is via selection. The appearance of selected rows is very customizable. The issue seems to be persisting the selection after the grid rebinds. There is a nice document online on how to do exactly that. Basically you wire-up the client-side RowSelected event to save the unique ID of the currently selected row to a JavaScript array (in your case, "123"). Then you wire-up the RowCreated event to search through the array and set "set_selected(true)" for the current row when there is a match. You'll also need to wire-up the RowDeselected event. Here is the full document with sample code. I think this will work well for you.

    http://www.telerik.com/help/aspnet-ajax/grid-persist-selected-rows-client-sorting-paging-grouping-filtering.html

    Hope this helps!
    -Gimmik
  6. Anjali
    Anjali avatar
    101 posts
    Member since:
    Dec 2010

    Posted 13 May 2011 Link to this post

    Thank you very much!! It worked!!

    I really appreciate all your help!
  7. Anjali
    Anjali avatar
    101 posts
    Member since:
    Dec 2010

    Posted 13 May 2011 Link to this post

    It does n't work the way I want it to be. when I rebind the grid, the seletced row is gone.
    Is their any way the selection is preserved after rebinding the grid.
  8. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 18 May 2011 Link to this post

    Hello Anjali,

    You would need to use some custom logic in order to persist the selected row on rebind. Sample implementation is available here:
    Persisting the selected rows server-side on sorting/paging/filtering/grouping

    Best wishes,
    Tsvetina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017