[Solved] showing selected Row in Bold of Grid

[ashes]

I have a Telerik MVC Grid where I have a column as " select " , " edit" forwhich I have used Format Property to show Links to my ActionMethods . Now I want to show the selected Row text in Bold when someone clicks on " Select" / " Edit " link ?

How to achieve this using JQuery / Javascript ? Tried using RowAction but couldnt sort out this as I am using Format Property and Ajax.ActionLink for Select and Edit ActionLinks.

This is my code and When user clicks on Select / Edit ActionLink ... Selected LegendName should be highlighted in bold . When I use Selectable property I am getting the selected row as highlighted ( new Background color for selected row which doesnt satisfy my requirement). Besides that I have one more requirement , I want to change the background color of my toolbar to GREY . Can you please help me

<% Html.Telerik().Grid(Model.GetLegends)
                   .Name("PaymentScheduleLegendGrid")

                   .ToolBar(toolBar => toolBar.Template(() =>
                                 {
                           %>
                                <label style="height:10px; float:left;padding-right:230px;" >Legend</label>

                                 <%= Ajax.ActionLink("Add", "AddLegend", "PaymentSchedule", new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style="text-decoration:underline;" })%>

                                <%
                       })).HtmlAttributes("style='background:none grey'")
                   .DataKeys(dataKeys => dataKeys.Add(m => m.LegendId))
                   .Columns(columns =>
                       {

                          // columns.Bound(m => m.Legend_color).ClientTemplate("<div><div style='float:right;text-align:left;width:80%'><#= legend_name #></div>" + "<div style='padding:3px;background-color:<#= legend_color #>;width:20px;height:15px'></div></div>").Title("Legend");
                           columns.Bound(m => m.LegendColor).Format(Html.ColorBlock("{0}").ToHtmlString()).Encoded(false).Title("");
                           columns.Bound(m => m.LegendId).Hidden(true).HeaderHtmlAttributes(new { @class = "newBack" }); ;
                           columns.Bound(m => m.LegendName).Title("");
                           columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Select", "Select", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "AddPaymentSchedule", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);
                           columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Edit", "EditLegend", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);
                       })
                    //   .RowAction(row => row.Selected = row.HtmlAttributes.Add("style", "background:#321211;"))
                       .Sortable()
                       .Selectable().HtmlAttributes("style=font:bold")
                       .DataBinding(databinding => databinding
                       .Ajax().Select("AjaxIndex", "Legend"))
                       .Pageable(pager => pager.PageSize(5))
                       .Render();
%>

[John DeVight]

Hi ashes,

I have a solution for turning the row text bold when it is selected.  I added an "OnRowSelect" client event to a grid that called a javascript function.  In the javascript function, I loop through all the rows and remove the font-weight on all the rows.  I then set the font-weight to bold for the selected row.

Here is a sample grid:

<%
    Html.Telerik().Grid(Model)
        .Name("MyGrid")
        .DataKeys(key => key.Add(p => p.Id))
        .Columns(columns =>
            {
                columns.Bound(p => p.FirstName);
                columns.Bound(p => p.LastName);
            }
        )
    .Selectable()
    .ClientEvents(events => events.OnRowSelect("MyGrid_OnSelect"))
    .Render();
%>

Here is the "MyGrid_OnSelect" javascript function:

<script type="text/javascript">
    MyGrid_OnSelect = function(e) {
        // Loop through all the rows in the body of the grid.
        $.each($('#MyGrid').find('tbody tr'), function(idx, row) {
            // Remove the font-weight.
            $(row).css('font-weight', '');
        });
        // Set the font-weight for the selected row.
        $(e.row).css('font-weight', 'bold');
    }
</script>

Let me know if this works for you...

As for the question about setting the background color of the toolbar to GREY, I'll do some research and get back to you....

Regards,

John DeVight

[John DeVight]

Hi ashes,

To turn the toolbar grey, I added an "OnLoad" client event that calls a javascript function.  In the javascript function, I locate the div that has the 't-grid-toolbar' class and set the background to grey.

Here is a sample grid with the OnLoad client event defined:

<%
    Html.Telerik().Grid(Model)
        .Name("MyGrid")
        .ToolBar(toolBar => toolBar.Template(() =>
        {%>
            <span>My List of People</span>
        <%}))
        .DataKeys(key => key.Add(p => p.Id))
        .Columns(columns =>
            {
                columns.Bound(p => p.FirstName);
                columns.Bound(p => p.LastName);
            }
        )
    .Selectable()
    .ClientEvents(events =>
        events
            .OnLoad("MyGrid_OnLoad")
            .OnRowSelect("MyGrid_OnSelect")
    )
    .Render();
%>

Here is the script block with the "MyGrid_OnLoad" javascript function:

<script type="text/javascript">
    MyGrid_OnLoad = function(e) {
        // Find the div with a class of t-grid-toolbar' and set the background to grey.
        $('#MyGrid').find('div.t-grid-toolbar').css('background', 'grey');
    }

    MyGrid_OnSelect = function(e) {
        // Loop through all the rows in the body of the grid.
        $.each($('#MyGrid').find('tbody tr'), function(idx, row) {
            // Remove the font-weight.
            $(row).css('font-weight', '');
        });
        // Set the font-weight for the selected row.
        $(e.row).css('font-weight', 'bold');
    }
</script>

Let me know if this works for you...

Regards,

John DeVight

[ashes]

I havent tested your code yet . I want to set my selected row text to be bold when someone clicks on Ajax.ActionLink.

I have already gone through RowSelect event which doesnt suit my requirement .

Lets say in my Telerik MVC Grid , I have 3 columns .

1. EmpID 2. EmpName 3. Select (Ajax.ActionLink )

Now when someone clicks on this " Select" ajax.ActionLink , I want EmpName in front of clicked ActionLink to be Bold

[John DeVight]

Sorry for the confusion.  I looked at the Ajax.ActionLink and found that the AjaxOptions has an OnBegin where a javascript function can be called.  I defined a javascript function called "MyGrid_OnRowSelect" that takes a parameter of id.  I then added an additional column to the end of the grid that is hidden that contains the id.  Here is a sample grid declaration:

<%
    Html.Telerik().Grid<TelerikMvcAspxApp.Models.Person>()
        .Name("MyGrid")
        .ToolBar(toolBar => toolBar.Template(() =>
        {%>
            <span>My List of People</span>
        <%}))
        .DataKeys(key => key.Add(p => p.Id))
        .Columns(columns =>
            {
                columns.Bound(p => p.FirstName);
                columns.Bound(p => p.LastName);
                columns.Bound(p => p.Id).Title("")
                    .Format(Ajax.ActionLink(
                        "Select",
                        "SelectPerson",
                        "Home",
                        new { Id = "{0}" },
                        new AjaxOptions {
                            OnBegin = "MyGrid_OnRowSelect({0})",
                            OnSuccess = "updateTarget",
                            UpdateTargetId = "AddPerson",
                            HttpMethod = "Get"
                        },
                        new { Style = "text-decoration:underline;" }
                ).ToHtmlString()).Encoded(false).Width(60);
                columns.Bound(p => p.Id).Hidden(true);
            }
        )
    .Selectable()
    .ClientEvents(events =>
        events
            .OnLoad("MyGrid_OnLoad")
    )
    .DataBinding(databinding => databinding
        .Ajax().Select("AjaxSelect", "Home")
    )
    .Render();
%>

In the MyGrid_OnRowSelect function, when I loop through the rows to remove the "font-weight", I also look for the row that contains the id in the hidden column that matches the id that was passed into the MyGrid_OnRowSelect function.  In the example above, the hidden column with the id is column index 3.  When I find it, I set the "selectedRow" variable equal to the row with the id.  I then set the "font-weight" for the selected row.

Here is the code:

MyGrid_OnRowSelect = function(id) {
    var selectedRow = null;

    // Loop through all the rows in the body of the grid.
    $.each($('#MyGrid').find('tbody tr'), function(idx, row) {
        // Remove the font-weight.
        $(row).css('font-weight', '');
        if ($($(row).find('td')[3]).text() == id) {
            selectedRow = row;
        }
    });

    // Set the font-weight for the selected row.
    $(selectedRow).css('font-weight', 'bold');
}

One thing, I did find that the code: Replace("{", "{{").Replace("}", "}}"))   was adding curly braces around the id that gets passed into the MyGrid_OnRowSelect function, so I took it out.  However, if you need that code, then you could alter the MyGrid_OnRowSelect function to remove the curly braces from the id that gets passed in.  Probably something like this:

id = id.replace('{', '').replace('}', '');

Hope this helps...

Regards,

John DeVight

[ashes]

its not working . Replacing Toolbar BckGround Color works but replacing Font weight doesnt work.

[John DeVight]

Attached is a sample project with the code that shows the font weight being replaced.

Could you provide some details as to what is happening in your code?  Is the OnBegin event handler getting called?  If so, is the LegendId getting passed in correctly?  Have you added a hidden column to the grid with the LegendId in it?  In the loop to remove the font weight, is the comparison between the LegendId passed into the OnBegin event handler and the LegendId comparing the LegendId's properly?  Is the selectedRow variable getting set?

Let me know what you find and I can investigate.

Regards,

John DeVight

[ashes]

I cannot open your project in Visual Studio 2010 . Yes i have added a hidden field . I did all the necessary things but still this thing is not working . I am opening a partial view on the click of Select Link and I want Selected person text should turn to Bold before opening the partial view . Once I select other Person , previous Selected Person Text should return back to normal .

Following is my Code .


OnBegin Event gets called . But
 After I run this , I get an error that "Microsoft JScript runtime error: 'b' is null or not an object " in MicrossoftAjax.js file because  passed "{0}" is ZERO  and it always remains ZERO also "selectedRow" always comes out to be Null.

<% Html.Telerik().Grid(Model.GetLegends)
                        .Name("PaymentScheduleLegendGrid")
                        .ToolBar(toolBar => toolBar.Template(() =>
                                      {
                                %>
                                     <label style="height:10px; float:left;padding-right:230px;" >Legend</label>

                                      <%= Ajax.ActionLink("Add", "AddLegend", "PaymentSchedule", new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style="text-decoration:underline;" })%>

                                     <%
                            })).HtmlAttributes("style='background:none grey'")
                        .DataKeys(dataKeys => dataKeys.Add(m => m.LegendId))
                       //  .ClientEvents(e => e.OnLoad("onRowSelect"))
                        .Columns(columns =>
                            {
                                columns.Bound(m => m.LegendColor).Format(Html.ColorBlock("{0}").ToHtmlString()).Encoded(false).Title("");
                                columns.Bound(m => m.LegendId).Hidden(true).HeaderHtmlAttributes(new { @class = "newBack" }); ;
                                columns.Bound(m => m.LegendName).Title("");
                                  // ClientTemplate("<span id='LegendName<#=LegendId #>'><#=LegendName #></span>");
                                columns.Bound(m => m.LegendId).Title("")
                                    .Format(Ajax.ActionLink("Select", "Select", "PaymentSchedule",
                                                             new { Id = "{0}"}
                                                            , new AjaxOptions
                                                                  {
                                                                      OnBegin = "MyGrid_OnRowSelect('{0}')",
                                                                      OnSuccess = "updateTarget",
                                                                      UpdateTargetId = "AddPaymentSchedule",
                                                                      HttpMethod = "Get"
                                                                  }
                                                            , new { name = "SelectRow", Style = "text-decoration:underline;" }
                                                             ).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);
                                columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Edit", "EditLegend", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);
                                columns.Bound(m => m.LegendId).Hidden(true);

                            })
                            .Sortable()
                            .Selectable().HtmlAttributes("style=font:bold")
                             .ClientEvents(events =>
        events
            .OnLoad("MyGrid_OnLoad"))
                            .DataBinding(databinding => databinding
                            .Ajax().Select("AjaxIndex", "Legend"))
                            .Pageable(pager => pager.PageSize(5))
                            .Render();
     %>

</div>
<div style="font-weight:bold"></div>
<script type="text/javascript">
    MyGrid_OnLoad = function(e) {
        // Find the div with a class of t-grid-toolbar' and set the background to grey.
        $('#PaymentScheduleLegendGrid').find('div.t-grid-toolbar').css('background', 'grey');
    };

    MyGrid_OnRowSelect = function(id) {
        debugger;
        var selectedRow = null;

        id = id.replace('{', '').replace('}', '');


        // Loop through all the rows in the body of the grid.
        $.each($('#PaymentScheduleLegendGrid').find('tbody tr'), function(idx, row) {
            // Remove the font-weight.
            $(row).css('font-weight', '');
            if ($($(row).find('td')[3]).text() == id) {
                selectedRow = row;
            }
        });

        // Set the font-weight for the selected row.
        $(selectedRow).css('font-weight', 'bold');
    };


</script>