Resize can be trigger on multiple events:

• expand / collapse
• user move splitbar
• by window if splitter is inside window and window is resized

I need to act differently based on who trigger resize. There is expand/collapse events so this 2 events solve problems with first trigger. But what about second?

Basically I need to know if user move splitbar. How?

How can I hide bars and the space taken up by the bars if their values are null? In the chart shown in the following dojo Product Line 2 and Product Line 3 would be the same height and Product Line 1 would be twice their height. 

 

http://dojo.telerik.com/ANalE/4

I love the select behavior for a categoryAxis when clicking and dragging. On my page I want to use it as an interactive element to select multiple months on a bar graph. However the mousewheel behavior of the select interferes with scrolling up and down the page and I'd like to disable it, but. I found that the documentation supports categoryAxis.zoom.mousewheel as "left", "right", and "both", but has no option for "none". Is there some other way to disable the scroll behavior but keep the click and drag behaviors?

I have a grid with a 'type' column.  The dataSource gives me the typeId which relates to data in another array.  Based on the type, I want to display a font-awesome image along with the type name.  I have the font-awesome class as a property of the object in the array.  Now, obviously, I can use the text and value properties in the array of type objects to set the label, but how can I add the third property of the classes?  

I currently have it hard-coded in the template as follows:

However, that requires hard-coding the data values into the template instead of using what comes across in the data.  Is there a way to do something like this where type would be some kind of reference to the array of types?

Thanks!

I saw some similar posts, but this issue still happens to me.
I have added id, and I think it should work.

Demo here:

http://jsfiddle.net/5nJPH/36/

to reproduce:

1. click edit button
2. click cancel
3. observe row disappear from grid.

I tried using datasource like this:

$('#grid').kendoGrid({

                dataSource:
                    {
                        data: dataSourceSelectedItems.data(),

                    },
                schema:
                    {
                        model: {
                            id: "Id"
                        }
                    }

and it seems to take care of the row-removed issue, but puts the row in a weird state where update button no longer works.

Help?

When focus is given to the dropdownlist, a screen reader (using NVDA) will announce, “list collapsed submenu”.  The problem is the selected value is not read out, and thus a screen reader user has no idea what the selected value is.  Any one of the Kendo dropDownList demos will illustrate this:  simply activate a screen reader like NVDA and focus on the dropdown element.  E.g.:  http://dojo.telerik.com/@richm/UyUqO

Is there a way to compel a screen reader to announce a dropDownList’s current value without expanding the list?

The overarching ARIA role for a Kendo dropDownList is “listbox”.  In an experiment, I forced the dropDownList’s role to “combobox” instead of “listbox”, and NVDA read out the value as expected.   The design pattern Kendo UI follows (a wrapper element around the <ul> element) is similar to what is described by the W3 here:  https://www.w3.org/TR/wai-aria-practices/#checkbox,  and note the outer element has role=”combobox”, not “listbox”.  

Should the Kendo dropDownList have a role of combobox instead of listbox?  I understand Kendo differentiates a dropDownList from a comboBox by its editable input (http://www.telerik.com/forums/combobox-vs-dropdownlist-widgets, but the W3C explicitly allows for readonly combobox elements.  I am not certain and this and would like to hear Telerik’s thoughts.

I have a kendo grid which I bind to a kendo.obervable view model.
The grid (shown below) has the attribute 
`data-pageable='{ "pageSize": 10 }'`

This is not working, all records (2000 or so) are on the first page.
I have other kendo grids in my application with almost the same structure, and paging works (I've shown an example of a page whose paging works on the bottom)


Here is the grid that is not working (no paging):

    <div id="PatrolRecords">
        <div data-filterable='{ "mode": "row" }'
             data-role='grid'
             data-sortable='true'
             data-detail-template='patrolDetailTemplate'
             data-detail-init='detailInit'
             data-bind='source: reportData, events: {excelExport: excelExportHandler}'
             data-pageable='{ "pageSize": 10 }'
             data-toolbar='["excel"]'
             data-excel='{ "fileName": "Patrols.xlsx", "allPages": "true" }'
             data-columns='[
                 {
                        field: "patrol_id_plain",
                        title: "Patrol ID",
                        filterable: false,
                        width: 70
                    },
                    {
                        field: "tour_name",
                        title: "Tour",
                        filterable: { cell: { operator: "contains" } }
                    },
                    {
                        field: "location_name",
                        title: "Location",
                        filterable: { cell: { operator: "contains" } }
                    },
                    {
                        field: "client_company",
                        title: "Company",
                        filterable: { cell: { operator: "contains" } }
                    },
                    {
                        field: "address",
                        title: "Address",
                        template: kendo.template($("#addressTemplate").html()),
                        filterable: { cell: { operator: "contains" } }
                    },
                    {
                        field: "end_date_seconds",
                        title: "Date & Time",
                        template: kendo.template($("#dateTemplate").html()),
                        filterable: false
                    },
                    {
                        field: "patrolled_by",
                        title: "Patrolled By",
                        filterable: { cell: { operator: "contains" } }
                    },
                    {
                        field: "checkpoints",
                        title: "Checkpoints",
                        template: kendo.template($("#checkpointsTemplate").html()),
                        filterable: false,
                        width: 90
                    },
                    {
                        field: "incident_count",
                        title: "Incidents",
                        filterable: false,
                        width: 70
                    },
                    {
                        title: "GPS",
                        template: kendo.template($("#gpsTemplate").html()),
                        filterable: false,
                        width: 50
                    },
                    {
                        title: "",
                        template: kendo.template($("#viewLinkTemplate").html()),
                        filterable: false,
                        width: 60
                    },
            ]'>
        </div>
    </div>
    
    <script type="text/x-kendo-template" id="dateTemplate">
        ${end_date}
    </script>
    
    <script type="text/x-kendo-template" id="patrolDetailTemplate">
        <div class="container">
        </div>
    </script>
    
    <script type="text/x-kendo-template" id="viewLinkTemplate">
        <a href="/patrol/patrol.aspx?r=1&p=${patrol_id}" target="_blank">View</a>
    </script>
    
    <script type="text/x-kendo-template" id="gpsTemplate">
        # if((longitude && latitude) || Number(checkpoint_gps_count) > 0) { #
            <a href="\\#" onclick="javascript: OpenWindow('/patrol/gpsmap.aspx?p=${patrol_id}', 'gps_map', 750, 550); return false;"><img style="border:0px;" src="/images/icons/gps.gif"></a>
        # } else { #
            -   
        # } #
    </script>
    
    <script type="text/x-kendo-template" id="checkpointsTemplate">
        # if(incident_only == "1") { #
            -
        # } else { #
            ${completed_checkpoint_count} of ${total_checkpoint_count}
        # } #
    </script>
    
    <script type="text/x-kendo-template" id="addressTemplate">
        # if(address) { #
            # address = address.trim(); #
            ${address}<br/>
        # } #
        # if(city) { #
            # city = city.trim(); #
            ${city},&nbsp;
        # } #
        # if(abbreviation) { #
            # abbreviation = abbreviation.trim(); #
            ${abbreviation}
        # } #
    </script>
    
    
    <script type="text/x-kendo-template" id="patrolUserTemplate">
        # if(first_name) { #
            # first_name = first_name.trim(); #
            ${first_name}
        # } #
            # if(last_name) { #
            # last_name = last_name.trim(); #
            ${last_name}
        # } #
    </script>
    
    <script type="text/x-kendo-template" id="geotagTemplate">
        # if(barcode) { #
        # if(barcode_scanned == "1") { #
        <span style="color:\\#009900;">Scanned</span>
        # } else if(barcode_required == "1") { #
        <span style="color:\\#FF0000;">Not scanned - Overridden</span>
        # } else { #
        <span style="color:\\#FF0000;">Not scanned</span>
        # } #
        # } else { #
        N/A
        # } #
    </script>
    
    
    <script type="text/x-kendo-template" id="geofenceTemplate">
        # if(geofence_enabled == "1") { #
            # if(!latitude || !longitude) { #
                <span style="color:\\#FF0000;">No GPS</span>
            # } else if(Number(geofence_distance) > Number(geofence_radius)) { #
                <span style="color:\\#FF0000;">Outside (${geofence_distance}  feet from center)</span>
            # } else { #
                <span style="color:\\#009900;">Inside (${geofence_distance} feet from center)</span>
            # } #
            # } else { #
            N/A
        # } #
    </script>
    
    <script type="text/x-kendo-template" id="completedTemplate">
        # if(completed_date) { #
            ${completed_date}
        # } else { #
            <span style="color:\\#FF0000;">Not Completed</span>
        # } #
    </script>
    
    <script type="text/x-kendo-template" id="gpsTemplateCheckpoint">
        # if(latitude && longitude){ #
            <a href="\\#" onclick="javascript: OpenWindow('/patrol/gpsmap.aspx?ptc=${ptc_id}', 'gps_map', 750, 550); return false;"><img style="border:0px;" src="/images/icons/gps.gif"></a>
        # } else { #
            N/A
        # } #
    </script>
    
    <script type="text/x-kendo-template" id="patrolledByTemplate">
        # if(!first_name && !last_name) { #
            n/a
        # } else { #
            # if(first_name) { #
                # first_name = first_name.trim(); #
                ${first_name}&nbsp;
            # } #
            # if(last_name) { #
                # last_name = last_name.trim(); #
                ${last_name}
            # } #
        # } #
    </script>
    
    <script type="text/javascript">
    
        function createLocationDropdownlist(args) {
            createDropdownlistFilter(args, viewModel.reportData.PatrolDurations, "location_name");
        }
    
        function detailInit(e) {
            e.detailRow.find(".container").kendoGrid({
                dataSource: e.data.CheckpointRecord,
                columns: [
                    {
                        field: "checkpoint_name",
                        title: "Checkpoint"
                    },
                    {
                        field: "patrolled_by",
                        title: "Patrolled By"
                    },
                    {
                        field: "geotag",
                        title: "GeoTag",
                        template: kendo.template($("#geotagTemplate").html())
                    },
                    {
                        field: "geofence",
                        title: "GeoFence",
                        template: kendo.template($("#geofenceTemplate").html())
                    },
                    {
                        field: "completed_date",
                        title: "Completed",
                        template: kendo.template($("#completedTemplate").html())
                    },
                    {
                        field: "gps",
                        title: "GPS",
                        template: kendo.template($("#gpsTemplateCheckpoint").html())
                    }
                ]
            });
        }
    
    </script>






And here is the similar grid on a different page that is working (10 records per page)

    <div id="CustomFormLocationRecords">
        <div data-filterable='{ "mode": "row" }'
             data-role='grid'
             data-sortable='true'
             data-detail-template='locationDetailTemplate'
             data-detail-init='detailInit'
             data-bind='source: reportData.CustomFormPerLocation, events: {excelExport: excelExportHandler}'
             data-pageable='{ "pageSize": 10 }'
             data-toolbar='["excel"]'
             data-excel='{ "fileName": "CustomFormPerLocation.xlsx", "allPages": "true" }'
             data-columns='[
                {
                    "field": "location_name",
                    "title": "Location",
                    "filterable": {
                        cell: {
                            template: createLocationDropdownlist,
                            showOperators: false
                        }
                    }
                },
                {
                    "field": "client_name",
                    "title": "Client",
                    "filterable": false
                },
                {
                    "field": "patrol_count",
                    "title": "Patrols",
                    "filterable": false
                },
                {
                    "field": "form_count",
                    "title": "Forms",
                    "filterable": false
                }
            ]'>
        </div>
    </div>
    
    <script type="text/x-kendo-template" id="locationDetailTemplate">
        <div class="container">
        </div>
    </script>
    
    <script type="text/x-kendo-template" id="patrolUserTemplate">
        # if(first_name) { #
            # first_name = first_name.trim(); #
            ${first_name}
        # } #
        # if(last_name) { #
            # last_name = last_name.trim(); #
            ${last_name}
        # } #
    </script>
    
    <script type="text/x-kendo-template" id="viewFormLinkTemplate">
        <a href="/forms/formsubmission.aspx?r=1&ptc=${ptc_id}" target="_blank">View Form</a>
    </script>
    
    <script type="text/x-kendo-template" id="viewPatrolLinkTemplate">
        <a href="/patrol/patrol.aspx?r=1&p=${patrol_id}" target="_blank">View Patrol</a>
    </script>
    
    <script type="text/javascript">
    
        function createLocationDropdownlist(args) {
            createDropdownlistFilter(args, viewModel.reportData.CustomFormPerLocation, "location_name");
        }
    
        function detailInit(e) {
            e.detailRow.find(".container").kendoGrid({
                dataSource: e.data.CustomFormRecord,
                columns: [
                    {
                        field: "form_name",
                        title: "Form"
                    },
                    {
                        field: "completed_date",
                        title: "Date"
                    },
                    {
                        field: "patrol_user",
                        title: "Patrolled By",
                        template: kendo.template($("#patrolUserTemplate").html()),
                        filterable: { cell: { operator: "contains" } }
                    },
                    {
                        title: "",
                        template: kendo.template($("#viewFormLinkTemplate").html()),
                        filterable: false,
                        width: 90
                    },
                    {
                        title: "",
                        template: kendo.template($("#viewPatrolLinkTemplate").html()),
                        filterable: false,
                        width: 90
                    }
                ]
            });
        }
    
    </script>

Hi,

I am binding Kendo Grid with SharePoint Rest Api. The SharePoint List contains a Column that facilitates rich textbox features(formatting features). While displaying content on Kendo Grid i have set "encoded : false" property, this makes it perfect in grid. But when i try to export content to excel it exports html tags into excel. Can any one help me with this?

thanks in advance.

 

With the new Q3 2014 update, I see that we can now export charts to PDF. In our case, we have a collection of charts that all need to go in one PDF document. Is that possible?

Hi All,

I have a bar chart which has month's in the category axis and 2 metrics in the other axis. The problem which I am facing is that  the month data are not aggregating.

Here is the code which have.From this,it is clear that am getting extra "Jan" at the category axis which don't want.I want that value to be aggregated in the same "Jan" which is present first. How can achieve this?

Kindly help me fix this.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/bar-charts/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.moonlight.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1028/styles/kendo.moonlight.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.3.1028/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>

  <div id="example">
    <div class="demo-section0 k-content wide">
       <div>
          <button id="show_col1" class="k-button" clicked="true" > Total Visits</button>
          <button id="hide_col1" class="k-button">Unique Visitors</button>
      </div>
      <div id="tabstrip">
        <ul>
          <li class="k-state-active">Quarterly</li>
          <li>Monthly</li>
          <li>Weekly</li>
        </ul>
        
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>            
        <div class="demo-section2 k-content wide">
        <div id="chart2"></div>
    </div> 
        <div> Weekly Content</div>
      </div>
    </div>
            

    <script>
  
 function createChart() {
           $("#chart").kendoChart({
                title: {
                    text: "Site Visitors Stats \n /thousands/"
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar"
                },
                series: [{
                    name: "Total Visits",
                    data: [250000, 324000],
                  
                }, {
                    name: "Unique visitors",
                    data: [235000, 298000]
                }],
                valueAxis: {
                    max: 350000,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                categoryAxis: {
                    categories: ["Q1", "Q2", "Q3", "Q4"],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });
          
          $("#show_col1").on("click", function() {
            var chart = $("#chart").data("kendoChart");
    chart.options.series[1].visible = false;
            chart.options.series[0].visible = true;
            chart.refresh();
   
    
});

$("#hide_col1").on("click", function() {
  var chart = $("#chart").data("kendoChart");
     chart.options.series[0].visible = false
     chart.options.series[1].visible = true;
            chart.refresh();
    
});
        }

           function createChart2() {
           $("#chart2").kendoChart({
                title: {
                    text: "Site Visitors Stats \n /thousands/"
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar"
                },
                series: [{
                    name: "Total Visits",
                    data: [56000, 63000, 74000, 91000, 117000, 138000,10000],
                  
                }, {
                    name: "Unique visitors",
                    data: [52000, 34000, 23000, 48000, 67000, 83000,10000]
                }],
                valueAxis: {
                    max: 140000,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                categoryAxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jan"],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });
          
          $("#show_col1").on("click", function() {
            var chart = $("#chart2").data("kendoChart");
    chart.options.series[1].visible = false;
            chart.options.series[0].visible = true;
            chart.refresh();
   
    
});

$("#hide_col1").on("click", function() {
  var chart = $("#chart2").data("kendoChart");
     chart.options.series[0].visible = false
     chart.options.series[1].visible = true;
            chart.refresh();
    
});
        }
      
       
      
    $(document).ready(function() {
                    $("#tabstrip").kendoTabStrip({
                        animation:  {
                            open: {
                                effects: "fadeIn"
                            }
                        }
                    });
                });
      
       $(document).ready(createChart2);
        $(document).bind("kendo:skinChange", createChart2);
       $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
           
  </div>



</body>
</html>

 

Thanks,

Lakshman