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

I've created a dojo here to demonstrate my question.

http://dojo.telerik.com/ikArE

When creating a set of functions under schema, model for a datasource and then refereing to them like "field: 'Functionname()'" in the columns for the grid, it appears to load correctly, but attempting to sort on by clicking the column header results in "d.Functionname" is not a function error.

Is this not supported or is there something else wrong?

 

Hi,

Whenever I try to use custom task template, the drag-handle automatically disappears, please help

Hi All,

I am using kendo grid row template where i have to add dynamic div based on the text.

Below is my code:

<script id="altRowTemplate" type="text/x-kendo-tmpl">

    <tr class="k-alt" data-uid="#: uid #">

       <td style="width:100%">

                  <div class="col-sm-1">
                         <img src="@Url.Content("~/Content/Images/#: OwnerImage#")" class="img-responsive" style="width:80px; height:50px" alt="1" />
                    </div>

                   <div id="Category">

                          #:changeTemplate(Category)#

                  </div>

         </td>

   </tr>

</script>

for the category in first row value is c# and second row value is: c#, Asp.Net, AngularJs

for change template below is the script function used.

function changeTemplate(category) {var splitCategory = category;var setCategorySpan = '';if (splitCategory.indexOf(',') !== -1) { splitCategory = category.split(',');for (var i = 0; i < splitCategory.length; i++) {var setcolID = 2;// Trim the excess whitespace. splitCategory[i] = splitCategory[i].replace(/^\s*/, "").replace(/\s*$/, "");// Add additional code here, such as: setCategorySpan += "<div class='col-sm-" + setcolID + "'><span class='tags' style='font-family:arial; font-size:small'>" + splitCategory[i] + "</span></div>"; setcolID+=2;} $("#dvCategory").append(setCategorySpan);}else { setCategorySpan = "<div class='col-sm-12'><span class='tags' style='font-family:arial; font-size:small'>" + splitCategory + "</span></div>"; $("#dvCategory").append(setCategorySpan);}}

in this function i am checking if value is seprated by comma then split one by one value and add in span tag and that tag should append in div.

i have checked through debug if i am directly appending value to div so this div is no more there, for that purpose i am creating this div in document ready function only:

var container = document.createElement('div'); container.setAttribute('id', 'dvCategory'); container.setAttribute('class', 'row');

if i am using here $('body').append(container);

value is showing but out of grid.

can i get help to set div on the same position where category is there?

The export to excel feature in Kendo Grid does not include custom editor values similar to the category values in your example here.

http://demos.telerik.com/kendo-ui/grid/editing-custom

It only shows the header, not the values.

regards,
Olafur