Telerik Forums
This is a migrated thread and some comments may be shown as answers.

Sort Arrow Icons Missing in Grid Headers

5 Answers 1349 Views
Grid for HTML
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Randy
Top achievements
Rank 1
Randy asked on 05 Apr 2013, 01:00 AM
Need your help on this one:
We are using your grids, but doing a lot of CSS overrides on the header & rows.
I'm not a CSS guy, but about 3 other CSS guys made so many changes over the last couple weeks that I can't tell which set of changes killed off the sort icons in the header. I am the Telerik guy however, so it falls to me to see if it can be fixed.

I'll provide a sample of my code below with the CSS overrides we're using.
When you run the page, click the grid headers to sort - you'll see there are no arrow icons indicating ASC or DESC order, etc.
We would like the icons back but keep the styling that we are currently using.

Thanks,
Randy

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Grid Lost Sorting Arrows</title>
 
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <!-- Telerik RadControls 2013 Q1 -->
    <link href="Telerik.UI/css/common.css" rel="stylesheet" />
    <link href="Telerik.UI/css/light.css" rel="stylesheet" />
    <script src="Telerik.UI/js/jquery.js"></script>
    <script src="Telerik.UI/js/ui.js"></script>
 
    <link href="test.css" rel="stylesheet" />
    <script src="test.js"></script>
</head>
<body>
    <div style="background-color: white; height:768px; width:1366px;">
 
        <div id="gridAccountActivity" data-win-control="Telerik.UI.RadGrid" style="width:100%; height:100%;"></div>
 
    </div>
</body>
</html>


JS
// For an introduction to the Page Control template, see the following documentation:
(function () {
    "use strict";
 
    WinJS.UI.Pages.define("/pages/test.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
 
            var rawData = "[{\"date\":\"2013-01-09T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":550,\"withdrawal\":455,\"deposit\":0},{\"date\":\"2013-01-09T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":1005,\"withdrawal\":779.19,\"deposit\":0},{\"date\":\"2013-01-09T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":1784.19,\"withdrawal\":627.3,\"deposit\":0},{\"date\":\"2013-01-09T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER FROM      XXXXX0000\",\"balance\":2411.49,\"deposit\":380.1,\"withdrawal\":0},{\"date\":\"2013-01-09T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER FROM      XXXXX0000\",\"balance\":2031.39,\"deposit\":636.39,\"withdrawal\":0},{\"date\":\"2013-01-09T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER FROM      XXXXX0000\",\"balance\":1395,\"deposit\":1250,\"withdrawal\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":145,\"withdrawal\":1415.84,\"deposit\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX3222\",\"balance\":1560.84,\"withdrawal\":55,\"deposit\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":1615.84,\"withdrawal\":55,\"deposit\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":1670.84,\"withdrawal\":620,\"deposit\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":2290.84,\"withdrawal\":920,\"deposit\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":3210.84,\"withdrawal\":530.84,\"deposit\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":3741.68,\"withdrawal\":1049.9,\"deposit\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER TO        XXXXX0000\",\"balance\":4791.58,\"withdrawal\":90.28,\"deposit\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER FROM      XXXXX0000\",\"balance\":4881.86,\"deposit\":145,\"withdrawal\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER FROM      XXXXX0000\",\"balance\":4736.86,\"deposit\":1470.84,\"withdrawal\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER FROM      XXXXX0000\",\"balance\":3266.02,\"deposit\":675,\"withdrawal\":0},{\"date\":\"2013-01-08T08:00:00.000Z\",\"description\":\"ONLINE TRANSFER FROM      XXXXX0000\",\"balance\":2591.02,\"deposit\":1450.84,\"withdrawal\":0},{\"date\":\"2012-08-21T07:00:00.000Z\",\"description\":\"TRNSFR FR INTEREST CHECKING\",\"balance\":0,\"withdrawal\":1140.18,\"deposit\":0},{\"date\":\"2012-08-21T07:00:00.000Z\",\"description\":\"TRNSFR TO FREE CHECKING\",\"balance\":1140.18,\"deposit\":1140.18,\"withdrawal\":0}]"
            var data = JSON.parse(rawData);
 
            data.forEach(
                function (value, index, array)
                {
                    value.date = new Date(value.date);
                });
 
            // Build The RadGrid
            var gridAccountActivity = new Telerik.UI.RadGrid(document.getElementById("gridAccountActivity"), {
                dataSource: data,
                schema: {
                    model: {
                        fields: {
                            date: { type: "date" },
                            description: { type: "string" },
                            withdrawal: { type: "number" },
                            deposit: { type: "number" }
                        }
                    }
                },
                columns: [
                    { field: "date", title: "Date", format: "{0:MMM dd}", width: "150px" },
                    { field: "description", title: "Description", sortable: false },
                    { field: "withdrawal", title: "Withdrawals", format: "{0:N2}", width: "150px", attributes: { style: "text-align:right; padding-right: 20px;" }, headerAttributes: { style: "text-align: right; padding-right: 20px;" }, template: "#=withdrawal > 0 ? '$' + withdrawal.toFixed(2) : ''#" },
                    { field: "deposit", title: "Deposits", format: "{0:N2}", width: "150px", attributes: { style: "text-align: right; padding-right: 20px;" }, headerAttributes: { style: "text-align: right; padding-right: 20px;" }, template: "#=deposit > 0 ? '$' + deposit.toFixed(2) : ''#" }
                ],
                sortable: "single, allowUnsort",
                selectable: "none",
                filterable: false,
                groupable: false,
                reorderable: false,
                resizable: false
            });
 
 
        },
 
        unload: function () {
            // TODO: Respond to navigations away from this page.
        },
 
        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />
 
            // TODO: Respond to changes in viewState.
        }
    });
})();


TELERIK GRID CSS OVERRIDES
/**************************************************************
START: SITE WIDE RADGRID OVERRIDES - LIGHT THEME
**************************************************************/
 
 
 
 
/*-------------------------------------------------------------
START Style Header cells (see question 1)
      How do we change the grid header background & font colors, plus the "selected" header blue color?
-------------------------------------------------------------*/
/* START Default Header cell style */
.k-grid-header .k-header
{
    /*border-color: transparent;  This color changes the border of header cells  */
    background-image: none;
    background-color: white; /* (1) This color changes the header cells background */
    border-top:1px solid #898989 !important;
    
     
    
     
}
 
.k-grid-header .k-header:first-child
{
    /*border-left-color: #898989;  Make this color same as (1)
    border-top-color: #898989;
    border:none;*/
    border-left:1px solid #898989 !important;
     
      
}
 
.k-grid-header .k-header:last-child
{
    /*border-right-color: #898989;  Make this color same as (1)
    border-top-color: #898989;
    border:none;*/
    border-right:1px solid #898989 !important;
         
}
 
.k-grid-header .k-header,
.k-grid-header .k-header .k-link
{
    color: #56646E; /* This color changes the text color of the header cells */
    border:none;
     
 
     
     
}
 
.k-grid-header th.k-header
{
    border-bottom-color: rgba(200, 200, 200, .9); /* This color changes the bottom shadow of the header cells */
    border-top-color: #898989;
    text-transform:none;   /* Remove Forced Upper Case from header*/
    border:none;
}
/* END Default Header cell style */
 
/* START Selected Header cell style */
.k-grid .k-header.t-dragged,
.k-grid-header .t-selected,
.k-grid-header .t-resize-handle
{
    background-color: #006ac1; /* (2) This color changes the selected header cells background */
    background-image: none;
    color: #fff; /* This color changes the text color of the selected header cells */
     
}
 
.k-grid-header .t-dragged.k-header:last-child,
.k-grid-header .t-selected.k-header:last-child
{
    border-right-color: #898989;  /*Make this color same as (2) */
     
}
 
.k-grid-header .t-dragged.k-header:first-child,
.k-grid-header .t-selected.k-header:first-child
{
    border-left-color: #898989; /* Make this color same as (2) */
}
/* END Selected Header cell style */
/*-------------------------------------------------------------
END Style Header cells (see question 1)
-------------------------------------------------------------*/
 
 
 
 
 
/*-------------------------------------------------------------
START Style odd/even rows (see question 2)
      How do we change the odd/even row background colors
-------------------------------------------------------------*/
.k-grid-content > table
{
    background-color: #e6edf0; /* This color changes the odd rows background */
    border-left:1px solid #898989 !important;
    border-right:1px solid #898989 !important; 
    border-bottom:1px solid #898989 !important;
}
 
.k-grid .k-alt
{
    background-color: #fff; /* This color changes the even rows background */
}
 
.k-grid td
{
    /*border-color: #a5aad;  This color changes border-colors of the grid */
    border-color:transparent;
}
 
.k-grid
{
    color: #000; /* This color changes the text color of the grid */
}
/*-------------------------------------------------------------
END Style odd/even rows (see question 2)
-------------------------------------------------------------*/
 
 
 
 
 
/*-------------------------------------------------------------
START Style Selected row (see question 3)
      How do we change the "selected" row color?
-------------------------------------------------------------*/
.k-grid tr.k-state-selected,
.k-grid tr > td.k-state-selected
{
    background-color: #ebebeb; /* (5) This color changes the background of the selected cells */
    color: #006ac1; /* This color changes the text color of the selected cells */
}
 
div.k-grid-content tr:first-child.k-state-selected > td,
.k-grid tr.k-state-selected > td:before
{
    border-top-color: #006ac1; /* (3) Selected outer borders color */
}
 
.k-grid tr.k-state-selected > td:last-child
{
    border-right-color: #006ac1; /* (3) Selected outer borders color */
}
 
.k-grid tr.k-state-selected > td
{
    border-bottom-color: #006ac1; /* (3) Selected outer borders color */
}
 
.k-grid tr.k-state-selected > td:first-child,
.k-grid td.k-state-selected + td,
.k-grid td.k-state-selected + td:not(.k-state-selected):before
{
    border-left-color: #006ac1; /* (3) Selected outer borders color */
}
 
.k-grid td.k-state-selected,
.k-grid td.k-state-selected.t-range-start:before
{
    border-color: #006ac1; /* (3) Selected outer borders color */
}
 
.k-grid td.k-state-selected:before
{
    border-color: #ccc; /* (4) Selected inner borders color */
}
 
.k-grid tr.k-state-selected + tr.k-state-selected > td:before,
.k-grid tr.k-state-selected + tr.t-detailRow-collapse + tr.k-state-selected > td:before
{
    border-top-color: #ccc; /* (4) Selected inner borders color */
}
 
.k-grid .k-state-selected > td + td,
.k-grid td.k-state-selected + td.k-state-selected
{
    border-left-color: #ccc; /* (4) Selected inner borders color */
}
 
.t-expand span
{
    background-color: #006ac1; /* Selection expander border color. Make sure it is same as (3) */
    border-color: #ebebeb; /* Make this color similar to (5) */
}
 
.t-expand.t-active span
{
    background-color: #000; /* This color changes the active state of the selection expander */
}
/*-------------------------------------------------------------
END Style Selected row (see question 3)
-------------------------------------------------------------*/
 
 
 
 
 
/*-------------------------------------------------------------
START Background of the grid (see question 4)
      How do we change the background color of the grid itself (when there would normally be white space)
-------------------------------------------------------------*/
.k-grid
{
    background-color: transparent; /* Change this color to affect the grid's background (this is the white space in question 4). You can make it transparent to match the background of the app (or the parent container of the grid) or any other valid color */
}
/*-------------------------------------------------------------
END Background of the grid (see question 4)
-------------------------------------------------------------*/
 
 
/**************************************************************
  END: SITE WIDE RADGRID OVERRIDES - LIGHT THEME
**************************************************************/

5 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 05 Apr 2013, 08:05 AM
RadControlsWindows8HtmlApp1.zip
Hi Randy,

I copied your code in a navigation app and managed to reproduce the issue when using wrongly registered references to the Telerik controls. Note that the references should be prefixed by three slashes:
<!-- Telerik RadControls 2013 Q1 -->
<link href="///Telerik.UI/css/common.css" rel="stylesheet" />
<link href="///Telerik.UI/css/light.css" rel="stylesheet" />
<script src="///Telerik.UI/js/jquery.js"></script>
<script src="///Telerik.UI/js/ui.js"></script>

Furthermore, it is enough to place the references once in the default page and they will be accessible from all internal ones. For a reference, you can check the attached sample, using your code.

All the best,
Tsvetina
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Randy
Top achievements
Rank 1
answered on 08 Apr 2013, 09:05 PM
Hi Tsvetina,

I put a single test page together for you that displays the grid sorting arrow issue we're having.
We otherwise do have a large project, with a single default page that contains our references.
Please ignore that stuff - I gave you all the code you need to be able to reproduce the issue we're having.

About the three slashes: We're using NuGet to get the Telerik controls into our project.
We're referencing Telerik without the slashes as suggested by you on Feb 22nd, 2013 at
http://www.telerik.com/community/forums/metro/general-discussions/samples-not-working---missing-telerik-ui-dll.aspx
(see your # 2 option) "It would still work if you have the "///" in the front from earlier references, but the recommended way is to remove them."

I tried putting 3 slashes in, but the sort icons still won't show.
Can you still try to see why the sort icons are missing, using the code I have already supplied?
It's more important for the company to have the CSS overrides than the sorting, so if you guys can't see what's wrong, we'll probably have to eliminate the sorting.
I notice our CSS guys had to use a number of "important!" tags in the CSS overrides, maybe you know another way to get the look and still keep the sort icons?

Thanks,

Randy
0
Tsvetina
Telerik team
answered on 09 Apr 2013, 08:57 AM
Hello Randy,

Apart from the references difference, we were unable to reproduce the issue on our side. However, you can try the following simple fix.

Add these styles to your CSS overrides:
.k-grid .k-header .k-link .k-i-arrow-n {
   border-bottom-color: #000;
}
.k-grid .k-header .k-link .k-i-arrow-s {
 border-top-color: #000;
}

We assume that the problem is you get white arrows on white background and the above styles will color the arrows in black, so they are visible.

If this does not help, another option is, if you have already isolated a test app, to open a support ticket and send it to us there (the entire test project), so we can work with the same structure as you.
In case this isn't possible, we will replace the SDK reference in my previously attached test project with a NuGet package and see if we observe the issue with this setup.

Greetings,
Tsvetina
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Randy
Top achievements
Rank 1
answered on 09 Apr 2013, 08:48 PM
Thanks Tsvetina,
ok, yea, we may open a ticket then.
The CSS doesn't make a difference for our site, but when I add "background-color: black;" to both your overrides, I see a tiny black square - so I think your white foreground on white background theory is probably true.
0
Tsvetina
Telerik team
answered on 10 Apr 2013, 07:59 AM
Hi Randy,

I just tested my sample with a NuGet package installed, instead of using the controls SDK and again I managed to reproduce the issue only when there is a problem with the references. For example, if in the default page you have the Telerik controls registered with the dark theme, even if you register the light theme in test.html, styles for dark are loaded (including white arrows).

However, on my side this was fixed with the CSS from my previous post, so I guess there is something else in your app, which produces the different behavior, that is missing in mine. Therefore, a ticket with a test app attached is the best option if you still cannot track the styling issue.

All the best,
Tsvetina
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Tags
Grid for HTML
Asked by
Randy
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Randy
Top achievements
Rank 1
Share this question
or