how to show β in grid view columns title?

7 posts, 0 answers
  1. Hubert
    Hubert avatar
    9 posts
    Member since:
    Aug 2014

    Posted 09 Mar 2017 Link to this post

    hi:

    my grid view data is using databound:

    @model List<StockBetaVolatility>
    @(Html.KendoGrid<StockBetaVolatility>()
                .Name("MainGridTable")
                .EnableCustomBinding(true)
                .Columns(columns =>
                {
                    columns.Bound(p => p.TradeDate).Width(100);
                    columns.ForeignKey(p => p.StockID, Shared.StockBaseNameList());
                    columns.Bound(p => p.StockBeta);
                    columns.Bound(p => p.StockVolatility);
                })
                .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Read(r => r.Action("AjaxRead", ViewContext.ControllerName())
                                                     .Data("PanelBarParameters"))
                                                     .ServerOperation(true)

                )
                .DefaultFormat()
                .Events(events => events.Change("GridMainSelect"))
    )

     

    in the browser is show B,

    columns define:

     [DisplayName("stockβvalue")]
     public decimal StockBeta { get; set; }

    how can i do?

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1261 posts

    Posted 09 Mar 2017 Link to this post

    Hello Hubert,

    When the Grid is configured for Ajax binding, you can use the Title() method to specify the column title (sample screenshots attached).

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Hubert
    Hubert avatar
    9 posts
    Member since:
    Aug 2014

    Posted 09 Mar 2017 in reply to Dimiter Topalov Link to this post

    hi Dimiter :

     

    thanks for your replay.

    I trying your solution,but that's not work:

    @model List<StockBetaVolatility><br>@(Html.KendoGrid<StockBetaVolatility>()<br>            .Name("MainGridTable")<br>            .EnableCustomBinding(true)<br>            .Columns(columns =><br>            {<br>                columns.Bound(p => p.TradeDate).Width(100);<br><br>                columns.ForeignKey(p => p.StockID, Shared.StockBaseNameList());<br>                columns.Bound(p => p.StockBeta).Title("stockβvalue");<br>                columns.Bound(p => p.StockVolatility);<br><br>            })<br>            .DataSource(dataSource => dataSource<br>                                    .Ajax()<br>                                    .Read(r => r.Action("AjaxRead", ViewContext.ControllerName())<br>                                                 .Data("PanelBarParameters"))<br>                                                 .ServerOperation(true)<br><br>            )<br>            .DefaultFormat()<br>            .Events(events => events.Change("GridMainSelect"))<br>)

    Maybe telerik version is problem point?

    This project telerik version is Q3 2015 9.2.15.1216

    compiler :Visual studion 2013  

     

    thanks!

  4. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 13 Mar 2017 Link to this post

    Hello Hubert,

    It looks like the web page has CSS styles that capitalize the Grid column titles. As a result it is normal for the lowercase "β" to appear as uppercase, namely "B". The only Kendo UI theme, which capitalizes Grid column titles is "Office365", which you don't seem to be using, so the issue is most likely caused by custom CSS code. Please verify and let me know if you need more information related to Kendo UI.

    Regards,
    Dimo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Hubert
    Hubert avatar
    9 posts
    Member since:
    Aug 2014

    Posted 15 Mar 2017 in reply to Dimo Link to this post

    hi Dimo:

     

    That's css code problem,i solved the question

    I override "office365" css code text-transform to none

     

    1.<script>
    2.    $(function () {       
    3.        $("#GridName").find('th').css("text-transform", "none");
    4.    });
    5.</script>

     

    Thanks a lot!

  6. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 15 Mar 2017 Link to this post

    Hello Hubert,

    The desired result can be achieved with CSS only, no need for JavaScript.

    .k-grid th.k-header {
      text-transform: none;
    }
     
    /* or if you want to target one Grid instance only */
     
    #GridName th {
      text-transform: none;
    }


    Regards,
    Dimo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Hubert
    Hubert avatar
    9 posts
    Member since:
    Aug 2014

    Posted 15 Mar 2017 in reply to Dimo Link to this post

    Hi Dimo:

    I try using your way in my css code,

    both way is work!  

    Thanks a lot again.

Back to Top