Hello kendo practitioners! Always a lot of help.
I am making a Kendo Grid in which only some columns can be edited.
It should work as shown in the picture below.

So I tried writing various editable methods like the code below, but it didn't work.

                columns: [
                        {
                            selectable: true,
                            width: "40px"
                        },{
                            field: "docno",
                            title: "Doc. No",
                        },{
                            field: "doctitle",
                            title: "Doc. Title",
                        },{
                            field: "rev",
                            title: "Rev",
                            editable: false
                        },{
                            field: "status",
                            title: "Status",
                            attributes: {editable: false}
                        },{
                            field: "genericDocIndex",
                            title: "Generic Doc Index",
                            attributes: {disabled: true}
                        }
                    ]

I have a long running grid altering script that is fired by a custom button placed on the grid tool bar as so:

            toolbar: ["save", "cancel", { name: 'STMS', text: "Save To STMS" }, { name: 'RAS', text: "Save To RA" }, { name: 'OOS', text: "Clear OOS" } ],

The button firing function follows:

        $(".k-grid-OOS").click(function (e) {
            zeroOOS(e);
        });

The function follows:

    function zeroOOS(e) {
        var grid = $('#grid').data("kendoGrid");

        var selectedRow = grid.select();
        var selectedRowIndex = selectedRow.index();
        console.log(selectedRowIndex);
        var gridRows = grid.dataSource.data();

        kendo.ui.progress($('#grid'), true);

        for (var i = 0; i < gridRows.length; i++) {

            var thisRow = grid.dataSource.data()[i];
            if (thisRow.Material_Name === "OOS") {

                thisRow.set("Temp", 0.0);
                thisRow.set("Gravity", 0.0);
                thisRow.set("Gross_Volume", 0.0);//
                thisRow.set("Tank_Level", 0.0);
                thisRow.set("Net_Volume", 0.0);
                thisRow.set("STMS_Observed_Volume", 0.0);
                thisRow.set("STMS_Water_Volume", 0.0);
                thisRow.set("Water_Level", 0.0);
            }
        };
    }

The "Waiting" cursor does not appear until AFTER the loop completes even though I requested it before.

I purposely left out turning it off just to see what was going on.  The result of the function changes records

in the grid and gives the user the opportunity to either save the changes or cancel and go back to original values.

I tried to "reload" the document just after calling for the cursor change but since the cursor changed after the loop

was completed the reload happened right after the cursor change and removed the changes made by the loop.

I figure this this a function of DOM but am not sure how to get around it.  Have seen and tried many javascript

recommendations but nothing so far seems to work.

There was a previous help doc from 2014 (http://dojo.telerik.com/@Kiril/ozuv) that works and does what I want so I tried

those commands in my function but do not get the same results.

Any clues would be much appreciated.

Thank you

Bill Lawler

I have a kendo grid in JSTL format where I'm trying to override a filter choice for date (making the filter look for the span of an entire day like in this example. But setting a simple hardcoded filtergives no results in the kendo grid, even when there are results matching the filter:

let startOfFilterDate = new Date(2000,1,1,0,0,0) 
let endOfFilterDate = new Date(2000,1,1,23,59,59) 
var filter = { 
  logic: "and", 
  filters: [ 
    { field: "date", operator: "gte", value: startOfFilterDate }, 
    { field: "date", operator: "lte", value: endOfFilterDate } 
  ] 
}; 
e.sender.dataSource.filter(filter);

I've tried putting in various places...

1) <kendo:dataSource-change></kendo:dataSource-change

2) <kendo:grid name="search-result-grid" ... filterable="true" columnMenu="true" columnMenuInit="doFilter">

And then my "doFilter" method is pretty much the same as the given example linked to above.

If I console.log the dataSource.filter, it shows that the filters are there. But the datasource is not being updated/refreshed with the filter for whatever reason.

Hi,

We're using a custom binding to set columns from the view model, but we're experiencing some trouble using nested columns and headerTemplate.

I set up a dojo example where you can see the problem. It will occur if you uncomment the headerAttributes that's commented out.

Anyone have any idea how to get this to work properly?

Dojo example: https://dojo.telerik.com/ApIGimiv/2

If so can you please provide some examples for 

Kendo Scheduler for Angular with custom dates range

multiple months examples 1,2,3 months view at same time.

(And does it support multiple months examples 1,2,3 months view at same time.)

Hi,

When using the detailInit event... I was wondering if it is possible to hide ONLY the child or details grid?

I tried this:

$('.k-grid-header').hide();

...but it will hide alll the headers of every grid on the html page.

And this:

$('#hiarchGrid .k-grid-header').hide();

but it just removes all the headers for the grid with the given id; both parent and details.

I have attached my code in text format.

I have a kendo dropdownlist with virtualization and a local array of objects used as the data source. I need to replace the datasource based on selections the user makes elsewhere on the page. The problem I'm having is that since it uses virtualization, I don't know when the datasource has finished being updated with setDataSource(newDataSource) and as such, sometimes when I try to set the new value, the new value isn't there. I don't want to use setTimeout because that is bad practice as it assumes it will take a certain amount of time to complete. The cascade event seems to only work after changing the value, not the dataSource. Is there a way to do something like this reliably: 

var newDataSourcce = getDataSource();
myDropdownList.setDataSource(newDataSource);
myDropdownList.value(100);

After Implmenting the Content Security Policy (CSP) in our application, various Kendo controls have stopped working. The CSP, blocks execution of inline scripts and since the Kendo controls are creating scripts while they render, CSP finds it as a threat and hence blocks its execution.

Below is a snapshot of the browser console error. All of the 5 errors are being thrown by kendo Controls.

When the Kendo Control, such as a grid, is rendered, a script tag is generated. Please check the below screenshot for reference.

Here, we have a grid, divIFAResults, when it is rendered on the screen, a script tag with Kendo.syncReady() is generated. The Kendo Grid relies on this script for its smooth execution, but our CSP blocks this script, inturn making the control unusable.

We have added 'unsafe-eval' as per the telerik docs for CSP. We are using the Kendo files hosted in our own project, not from CDN.

http://dojo.telerik.com/aGisuSuR/2

I am trying to hide and show error bar on a Kendo line chart based on when the mouse is over the line point, is it possible to do this? I tried using highlight, I can probably create a visual, but I just wanted to hide all the error bars and show only when the point is highlighted. I tried to set erroBar visibility false and set it to true on Highlight, that doesn't seem to work. Even if this worked, this would set the visibility of all error bars?, I just want to set it for only one point at a time, as showing all at once is will overlap error bars.

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

    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
           var StrokeAnimation = kendo.drawing.Animation.extend({
             init: function(element) {
               kendo.drawing.Animation.fn.init.call(this);
               this.initialStroke = $.extend({}, element.options.stroke);
               this.color = element.options.fill.color;
               this.element = element;
              
             },
             step: function(pos) {
               this.element.stroke(this.color, this.initialStroke.width * pos * 5, 0.5);
             },
             
             reset: function() {
               this.element.options.set("stroke", this.initialStroke);
             }
           });
            $("#chart").kendoChart({
                dataSource: [
    {
        "country": "Spain",
        "year": "2008",
        "unit": "GWh",
        "solar": 2578,
        "hydro": 26112,
        "wind": 32203,
        "nuclear": 58973,
    "low":51000,
    "high":68000
    },
    {
        "country": "Spain",
        "year": "2007",
        "unit": "GWh",
        "solar": 508,
        "hydro": 30522,
        "wind": 27568,
        "nuclear": 55103,
     "low":52000,
    "high":60000
    },
    
],
                title: {
                    text: "Spain electricity production (GWh)"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "line",
                    errorLowField: "low",
                    errorHighField: "high",
                    errorBars: {
                      highlight:{
                      line: {
                        width: 1,
                        dashType: "solid"
                       }
                      },
                    
                    visible: true,
                    endCaps: true,
                    width: 10,
                    color: "darkblue",
                    line: {
                        width: 1,
                        dashType: "solid"
                       }
                   },
                    highlight: {
                      errorBars: {
                        line: {
                          width: 1,
                          dashType: "solid"
                         }
                      }
                    }
                },
                series: [{
                    field: "nuclear",
                    name: "Nuclear"
                }, {
                    field: "hydro",
                    name: "Hydro"
                }, {
                    field: "wind",
                    name: "Wind"
                }],
                categoryAxis: {
                    field: "year",
                    labels: {
                        rotation: -90
                    },
                    crosshair: {
                        visible: false
                    }
                },
                valueAxis: {
                    labels: {
                        format: "N0"
                    },
                    majorUnit: 10000
                },
                tooltip: {
                    visible: false,
                    shared: false,
                    format: "N0"
                },
               
               render: function(e) {
                
                }
              
            });
        }

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


</body>
</html>