Выделите выделенный текст строки TELERIK MVC GRID жирным шрифтом. - PullRequest
Новая
       4

Выделите выделенный текст строки TELERIK MVC GRID жирным шрифтом.

0 голосов
/ 07 июля 2011

У меня есть Telerik MVC Grid, где у меня есть столбец «выбрать», «изменить», для которого я использовал свойство «Формат», чтобы показать ссылки на мои методы ActionMethods. Теперь я хочу показать выделенный текст строки жирным шрифтом, когда кто-то нажимает на ссылку «Выбрать» / «Изменить»?

Как этого добиться с помощью JQuery / Javascript? Пробовал использовать RowAction, но не смог разобраться с этим, так как я использую свойство Format и Ajax.ActionLink для выбора и редактирования ActionLinks. 

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

Это мой код, и когда пользователь щелкает по Select / Edit ActionLink ... Selected LegendName должно выделяться жирным шрифтом. Когда я использую свойство Selectable, я получаю выделенную строку как выделенную (новый цвет фона для выбранной строки, который не удовлетворяет моим требованиям). Помимо этого у меня есть еще одно требование, я хочу изменить цвет фона моей панели инструментов на СЕРЫЙ. Можете ли вы помочь мне

Ответы [ 2 ]

1 голос
/ 11 июля 2011

Чтобы применить определенный стиль для определенной строки таблицы, вам нужно использовать CSS. Для привязки на стороне сервера вы можете использовать атрибуты HtmlAttributes от RowAction. Однако я не знаю (как вы не описали), как определить, выбрана ли строка в методе RowAction. Если вам нужен более конкретный ответ, я предлагаю вам присоединить работающий проект, который показывает весь сценарий в ветке форума, которую вы открыли на форумах Telerik.

Если вы хотите сделать это на стороне клиента, вы можете использовать jQuery: 

<%: Html.Telerik().Grid().ClientEvents(e => e.OnLoad("onLoad")) %>

<script>
function onLoad() {
   $(this).delegate("tr a", "click", function(e){
       $(this).closest("tr").addClass("t-state-selected") // add the css class
                            .siblings()
                            .removeClass("t-state-selected") // remove css class from other rows
   });
}
</script>
0 голосов
/ 20 июля 2011 
    So far I have done this .

<style type="text/css"> 
#PaymentScheduleLegendGrid table thead 
{ 

}
.newBack
{
background:none grey;
}
.newBoldtext
{
 font-weight:bold;
 color:red;
 }
 </style>
<script type="text/javascript">
   function onLoad() {

    $(this).delegate("tr a", "click", function (e) {
        $(this).closest("tr").addClass("newBoldtext"); // or any other CSS class
    });
   }
</script>

<div>
 <% 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("onLoad"))                      
                    .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("test");

                            columns.Bound(m => m.LegendId).Title("")
                                .Format(Ajax.ActionLink("Select", "Select", "PaymentSchedule",
                                                         new { Id = "{0}"}
                                                        , new AjaxOptions { 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);                             
                        })

                        .Sortable()
                        .Selectable().HtmlAttributes("style=font:bold")
                        .DataBinding(databinding => databinding
                        .Ajax().Select("AjaxIndex", "Legend"))
                        .Pageable(pager => pager.PageSize(10))
                        .Render();                 
 %>

...