Questions on Kendo UI for jQuery Forum

3 answers

355 views

Editor content does not update from Angular %scope change

I have the following code.
html
<textarea ng-bind-html="html" style="height:440px" kendo-editor k-options="editorOptions"></textarea>

JS
angular.module('SplashApp', ['ngRoute', 'kendo.directives', 'ngSanitize'])
.controller("MainController", function ($scope, $location, $route, $http, $sce) {
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>";
});

When the page renders it is fine. If the user updates the page it also makes the changes to $scope.html. BUT if I change the $scope.html from javascript the contents of the editor do not change. How do I get this to occur?

Editor

answered on 16 Apr 2015

1 answer

75 views

Keep selection on "virtual" grid

Hi Telerik team.

I've got a grid bound on a server datasource with virtual scrolling and I would like to keep the selected row when the user scrolls.

I've already found a solution on the forum but unfortunately, it doesn't seems to work... Here is my code (with Kendo UI 2014.3.1411):

$("#grdResults").kendoGrid({
dataBound: onDataBound,
change: onSelectedItemChange,
dataSource: {

........
scrollable: {
            virtual: true
        },
        selectable: true,
........

Could you tell me what I've done wrong ?

Thanks for your answer.

Regards,

Cédric

Grid

answered on 16 Apr 2015

3 answers

5.6K+ views

[Solved] Grid Filters with Date and Time

Have a grid with remote json kendo datasource, and in the schema/data/model I specifiy my column type: "date" and in the grid/columns i specify the format: "{0:MM/dd/yyyy hh:mm:ss}".

If I pull down the column filter and pick equal to 5/29/2012 nothing shows up but if I say is after 5/28/2012 then rows with "5/29/2012 3:15:00" show up... how can I get column filtering to work with time ignored if they only specify date (which is the only option out of box date filtering)?

Grid

answered on 16 Apr 2015

5 answers

471 views

Unable to clear text with backspace

http://demos.telerik.com/kendo-ui/autocomplete/mvvm

In this demo (same as my code) Once you select an item from the list it is impossible to clear it or backspace the text.

AutoComplete

answered on 16 Apr 2015

3 answers

1.2K+ views

Remove items based on selected value

Hi everyone

I have a multiselect, its preloaded with "All", when I select a new option, it removes the all item from the select. What I want to do is add a section so that when the user selects "All" again, it clears all the other options except for all.

I have the following code, my dataItem.Value keeps giving me "undefined" I have changed to .value as well, no luck.

@(Html.Kendo().MultiSelectFor(m => m.ReportCriteria.ProductClassList)

.Name("ReportCriteria.ProductClassList")

.DataTextField("ProductClassDescription")

.DataValueField("ProductClassCode")

.Events(e => e.Select("onSelect"))

.AutoBind(true)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("ProductClassList", "Dashboard")

.Data("sendProductClassText");

});

source.ServerFiltering(true);

})

)

Here is the JS

function onSelect(e) {

var allSelect = ["All"];

var multi = $("#ReportCriteria_ProductClassList").data("kendoMultiSelect");

var dataItem = this.dataSource.view()[e.item.index()];

alert(dataItem.Value);

if (dataItem.Value == "All")

{

multi.value(["All"]);

}

if (multi.value().indexOf("All") > -1)

{

var values = multi.value().slice();

values = $.grep(values, function (a) {

return $.inArray(a, allSelect) == -1;

});

multi.dataSource.filter({});

multi.value(values);

}

Any ideas what I am doing wrong?

Thank you

MultiSelect

answered on 16 Apr 2015

4 answers

1.6K+ views

Grid with Spaces in Column Name

Kendo Grid fails to display or export anything if there is a space in a JavaScript
Property. We are in need of such column names because we display tables of a
database with such column names (we do not have control over this).

Grid

answered on 16 Apr 2015

3 answers

122 views

Validating 3 fields

Hi,

I am trying to build a custom validator to validate 3 fields: Min < Most Likely < Max.

I've written this custom validator, but for some reason, most of the time, the value of "Max" is being read as null and no error messages are displayed. Is there something wrong with my code:

http://dojo.telerik.com/@bhaidar/uvOfA

Thanks,

Bilal

Validation

answered on 16 Apr 2015

4 answers

540 views

[Solved] Json TreeList

Hi, all

I have tried to display json data in kendo treelist..but my code displaying only parent class data like nodes class only not child class i want to display items class too please short out my problem.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
            <div id="treelist"></div>

            <script>
                $(document).ready(function () {
                    var dataSource = new kendo.data.TreeListDataSource({
                        data: [
                          {"node": {
    "lastModifiedBy": "admin",
    "name": "55254b6e1e000021005873a2",
    "lastModified": "2015-04-08T15:38:22.199Z",
    "items": [{
      "lastModifiedBy": "55254b931e00001e005873aa",
      "name": "Image_0174.jpg",
      "path": "/companies/55254b6e1e000021005873a2/Image_0174.jpg",
      "size": 627042,
      "lastModified": "2015-04-09T07:16:33.516Z",
      "description": null,
      "versions": [{
        "id": "bed1e4ba-1cbc-475b-8a41-1d944b412ffe",
        "timeStamp": "2015-04-09T07:16:33.517Z"
      }, {
        "id": "49570167-2d0e-4e19-9ff3-8be5a8aecb71",
        "timeStamp": "2015-04-09T07:16:33.542Z"
      }],
      "encoding": "",
      "mimeType": "image/jpeg",
      "lastVersion": {
        "id": "49570167-2d0e-4e19-9ff3-8be5a8aecb71",
        "timeStamp": "2015-04-09T07:16:33.542Z"
      },
      "type": "File"
    }, {
      "lastModifiedBy": "55254eab1e000021005873bc",
      "name": "testo2",
      "lastModified": "2015-04-08T15:58:46.252Z",
      "items": [{
        "lastModifiedBy": "55254b931e00001e005873aa",
        "name": "newfile",
        "path": "/companies/55254b6e1e000021005873a2/testo2/newfile",
        "size": 808076,
        "lastModified": "2015-04-08T16:37:04.117Z",
        "description": null,
        "versions": [{
          "id": "d267441d-cd9b-4271-a94d-71d789483c23",
          "timeStamp": "2015-04-08T16:37:04.119Z"
        }, {
          "id": "b7acfa4a-dcbc-46da-a15f-7bb3767b2faa",
          "timeStamp": "2015-04-08T16:37:04.156Z"
        }],
        "encoding": "",
        "mimeType": "image/jpeg",
        "lastVersion": {
          "id": "b7acfa4a-dcbc-46da-a15f-7bb3767b2faa",
          "timeStamp": "2015-04-08T16:37:04.156Z"
        },
        "type": "File"
      }],
      "hasItems": true,
      "type": "Folder"
    }],
    "hasItems": true,
    "type": "Folder"
},parentId: null}
                        ],

                        schema: {
                            model: {
                                id: "node.lastModifiedBy",
                                fields: {

                                    id: { field: "node.lastModifiedBy.items", type: "number" }
                                },
                                expanded: true
                            }
                        }
                    });

                    $("#treelist").kendoTreeList({
                        dataSource: dataSource,
                        height: 540,
                        columns: [
                            { field: "node.lastModifiedBy" },
                          { field: "node.name" },
                          { field: "node.lastModified" },
                          { field: "node.items.lastModifiedBy" }
                        ]
                    });
                });
            </script>
        </div>

</body>
</html>

I have attached my output..

TreeList

answered on 16 Apr 2015

2 answers

304 views

Prevent callback to data sourse on focus lost

HI Telerik team.

I'm using an autocomplete component for filtering rows in a grid (on server side).

I've noticed that the component calls the server to bind to the datasource when it lost the focus, that is to say that the grid is filtered twice with the same value( when you type the last char and when the autocomplete lost its focus).

Is there a way to prevent this ?

Thanks for your answer.

Regards,

Cédric

AutoComplete