Hello,

I'm trying to do following thing: when user leaves the page with grid his current filters ang sortings are saved and applied the next time he visits the page (not the whole persisted state).

So I'm doing it like this:

    var savedFilters = localStorage["kendo-grid-filters"];
    if (savedFilters) {
      $("#grid").data("kendoGrid").dataSource.filter(JSON.parse(savedFilters));
    }
    var savedSort = localStorage["kendo-grid-sort"];
    if (savedSort) {
      $("#grid").data("kendoGrid").dataSource.sort(JSON.parse(savedSort));
    }
    window.onbeforeunload = function () {
      localStorage["kendo-grid-filters"] = kendo.stringify($("#grid").data("kendoGrid").dataSource.filter());
      localStorage["kendo-grid-sort"] = kendo.stringify($("#grid").data("kendoGrid").dataSource.sort());
      return;
    }

Everything is working fine except filter for Date columns. For example, i set filter "equal to 08.08.2018", it filters the column. Then I leave the page and filter stored in local cache is "{field: "BPStartDate", operator: "eq", value: "2018-08-07T21:00:00.000Z"}". Then I visit the page again and I see that filter is kinda applied (filter icon is highlighted and has correct value) but I can't see filtered data.

What is the problem?

I attached two screenshots to illustrate what I'm talking about.

Thanks.

How to add onclick to inside visual HTML content? https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/html-in-axes-labels

Hello, 
I have to substitute the AjaxControlToolkit.HTMLEditor with a Kendo Editor, maintaining more or less the same functionalities.I have problems to reproduce the functionalities provided by the buttons "Cut/Copy/Paste".
THINGS WORK OKAY if what I copy/paste is pure text. How can I maintain the formatting tags as color, numbered list, etc ?
Since the keys Ctrl-C and Ctrl-V work I thought it would be easier to reproduce the same behavior but I'm not able to.  In Kendo_web.js somehow this is achieved though.
A kendo forum "Copy text from Office to Editor"suggested to disable the pasting handler as
function onPaste(e) {
var editor = $("[data-role=editor]").data("kendoEditor");
$(editor.body).off("paste");
}
but it didn't work for me.
Basically this is the code I use in a .js file
I call my editor "myeditor" declared as a text area, I added three custom buttons as cut, copy, paste
$("#myeditor").kendoEditor({
            tools: [
                {
                    name: "customcut",
                    tooltip: "Cut the selection",
                    exec: function (e) {
                        var editor = $(this).data("kendoEditor");
                        range = editor.getRange();
                        seltext = editor.selectedHtml();
                        window.clipboardData.setData("Text", seltext);
                        range.deleteContents();
                    }
                },
                {
                    name: "customcopy",
                    tooltip: "Copy to clipboard",
                    exec: function (e) {
                        myeditor.encodedValue();
                        seltext = myeditor.selectedHtml();
                        window.clipboardData.setData("Text", seltext);
                    }
                },
                {
                    name: "custompaste",
                    tooltip: "Paste from clipboard",
                    exec: function (e) {
                        var wclip = window.clipboardData.getData("Text");
                        if (wclip.length > 0) {
                            myeditor.paste(wclip);
                        }
                    }
                }
            ],  //end tools[]
            change: onChange,
            select: onSelect,
            execute: onExecute,
            paste: onPaste
        });

I believe I don't know how to access the clipboard properly.
Sorry for the long text, I will be very grateful for any help

MarcoF

I have two datasource, how to achieve overlay one datasource to another datasource bar like in this example https://docs.telerik.com/kendo-ui/knowledge-base/chart-overlay-bar-series

 

I have a grid defined like this...

and a view model defined so...

 

When I try and render the page, the controls show, but there is no data, instead I get a 400 error. More reading tells me about anti-forgery tokens and how to set the header on my post request, so I add this to the top of my page....

And, I set the header for the call with the anti forgery token, with this in my client side code...

Now when I call my page, I get "Cannot read property 'read' of undefined."

Everything I've read suggests that I'm doing it right!

What am I not doing?

How to show  two months in kendo datepicker? 

Hi,

 I want to add a global error handler that gets called when any AJAX call made by a Kendo control fails. So I have a kendo window opening as a popup that has a grid that has regular methods like read, update. It has url's pointing to WCF services. Now I want to catch errors in my global handler that may come from my WCF calls. I tried using $.ajaxerror but its not getting called for kendo calls, for others its working. I also tried the following code but it didnt work:
kendo.data.DataSource.prototype.options.error = function (e) {
            //your logic
            alert('kendo error');
        };

So can you please point to me how to add global error handler for my ajax calls from kendo controls.
Thanks in advance.

Are there any updates on this topic ? Since I am using Kendo UI slider with razor view having version 2017.2.621.545 and I am not able to get it works in mobile devices specially on iPhone.
The code is as follows - 
 @(Html.Kendo().SliderFor(m => m.PercentChanceClose)
                        .Name("PercentChanceClose")
                        .ShowButtons(true)
                        .Tooltip(true)
                        .Max(100)
                        .Min(0)
                        .SmallStep(5)
                        .LargeStep(10)
                        .Events( e => e.Change("SliderChange"))
                        .IncreaseButtonTitle("Perecent(%) Chance Close")
                        .HtmlAttributes(new { @class = "form-control"})
                        )

JavaScript function - 

 function SliderChange(e) {

        if (e== null) {
            SliderValue(50);
        }
        else {
            SliderValue(e.value);
        }

    }


    function SliderValue(x) {
        var top = $("#PercentChanceClose").closest(".k-slider-wrap");

        if (x >= 0 && x <= 24) {
            $(".k-slider-track", top).css("background-color", "#00ff00");
            $(".k-slider-selection", top).css("background-color", "#00ff00");
          }
        else if (x >= 25 && x <= 74) {
            $(".k-slider-track", top).css("background-color", "#ffa500");
            $(".k-slider-selection", top).css("background-color", "#ffa500");
        }
        else {
            $(".k-slider-track", top).css("background-color", "#ff0000");
            $(".k-slider-selection", top).css("background-color", "#ff0000");
        }
    }

 

Is it possible to override the confirmation on Kendo Grid : editable ?

In generally I'd always avoid javascript alert/confirm. It's just a noisy and terrible default behaviour :)

I've created a simple Odata service that reads the contents of a single local SQL table. My service works correctly, I've checked in Postman, but the Kendo UI grid throws the following error:

Uncaught TypeError: Cannot read property '__count' of undefined

 

I checked entries on the board, and I've seen several that refer to the version of Odata. They imply that you need to use an older version of OData to work with the grid.  The version I'm using is v4.0.30319. Will this version work with Kendo UI grid? Or does the error point to something else?

 here's my html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//localhost:49666/CustomerComplaintDataService.svc/Complaints"
},
schema: {
model: {
fields: {
RecordNumber: { type: "number" },
Date: { type: "date" },
Brand: { type: "string" },
Filter_part_number: { type: "string" },
PlantMfrgLoc: { type: "string" },
Date_code: { type: "string" },
Person_talked_to: { type: "string" },
Phone_number: { type: "string" },
Company_Name: { type: "string" },
Product_Complaint: { type: "string" },
Action_taken: { type: "string" },
Results: { type: "string" },
Call_taken_by: { type: "string" },
Customer_Required_Response: { type: "string" },
Risk_Level: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "RecordNumber",
filterable: false
},
"Brand",
{
field: "Date",
title: "Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "Product_Complaint",
title: "Product Complaint"
}, {
field: "Action_taken",
title: "Action Taken"
}
]
});
});
</script>
</div>
</body>
</html>

 

Thanks in advance,

 

Mark