Hi,

I’m working on a product that utilizes Kendo Grids where the text displayed in the column headers are often too wide to be displayed without ellipses.

There are too many columns to use the 'auto-width' functionality (we must have a horizontal scroll bar), and we cannot rely on fixed widths to be sufficiently wide enough when the text is translated into different languages. 

In some cases, as when the titles consist of several words, a simple CSS fix like this would suffice (although it yields unevenly aligned filter icons):

.k-grid  .k-header{
    overflow: visible;
    white-space: normal;
}

However, given that the text in these headers is internationalized (and runs the risk of being translated into long German nouns), there should be a more robust solution for viewing these column names. Do you know of any thing we can do to alleviate this problem?

Proposed solutions include:
 - automatically line-breaking words with hyphens, instead of truncating with ellipses
 - adding tooltips that display the full name of the column on hover

We are trying to call .blur() on an auto complete after the user has selected an item.  The main reason for this is that when the textbox has focus, the keyboard on the iPad remains up.  We were given a requirement that we hide the keyboard after the user selects an item, something we figured we could accomplish by simply invoking .blur() on the input field.  What we are finding though is that something in the framework immediately re-calls focus() on the input right after we call blur().  I've tried many different little hacks to override, cancel, or prevent the various events but I've had no luck.  I've created a Dojo that demonstrates this behavior:

 http://dojo.telerik.com/oWalE

If you look at the console, you can see the order in which events are firing:

focus
open
change
close
blur  <-- I called this one programatically
focus <-- I did not call this one!

Any ideas as to how we can get the iOS keyboard to go away after an item has been selected?

 Thanks!

I want to add an ​img to the series label and put the same image into the series drawing area if possible, i did the following:

  <script>

            function createChart() {
                $("#chart").kendoChart({
                    title: {
                        position: "bottom",
                        text: "Shareholders Share Percentage"
                    },
                    legend: {
                        visible: false
                    },
                    chartArea: {
                        background: "#f4f4f4"
                    },
                    seriesDefaults: {
                        labels: {
                            visible: true,
                            background: "transparent",
                            template: function(e) { 

return ' A  ';



}, //"  #= category # \n #=value#% ",
                            font: "18px 'ralewayregular'"
                        }
                    },
                    series: [{
                        type: "pie",
                        startAngle: 150,
                        data: [{
                            category: "ADNOC",
                            value: 60.0,
                            color: "#3b6492"
//explode: "explode"
                        }, {
                            category: "JODCO",
                            value: 12.0,
                            color: "#b3c1db",
                        }, {
                            category: "BP",
                            value: 14.64,
                            color: "#7d9ac6",
                        }, {
                            category: "Total",
                            value: 13.32,
                            color: "#4877af",
                        }]
                    }],
                    tooltip: {
                        visible: true,
                        format: " <b style='font-size:16px'>{0}%</b> "
                    }
                });
            }

            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
        </script>​ 

In my grid, one of the filterable columns (using the mult-checkbox filterable) has data that is quite long. Is there an option to tell kendo to allow wrapping of this data in the dropdown filterable mult-checkbox popup?

Thanks,

--Ed

Hi

I'm usig with kendo ui grid with virtual scroll and sever paging configuration, in my solution there are a lot of grids that i create from one query,Each grid had been created from a defined directive, these grids holds by vertical main scroll container.

<-HERE IS THE SCROLL PROBLEM->

Grids that created with vertical scroll  keep the event scroll to be manage over page while grid without vertical scroll preventing

the main scrolling event.to work while the focus still in the grid.(see the attacment image).

Is it common problem or a bug ?

please advise  

thanks