Forgive me if this is a newbie question, but I just started working with Visual Studio Code and NPM.

I am using Visual Studio Code to build a Kendo UI jQuery-based application (including the use of typescript)

I am following the instructions here: https://docs.telerik.com/kendo-ui/intro/installation/npm. I also install typescript support, using the instructions here: https://docs.telerik.com/kendo-ui/third-party/typescript. I am not following the instructions completely, I use

This works fine, in a way, but during the NPM-installation, the .js and .css files are located deep down in /node_modules/...

So, in my HTML-file, instead of using something like this:

    <link href="styles/kendo.common.min.css" rel="stylesheet" />

I have to use:

    <link href="node_modules\@progress\kendo-ui\css\web\kendo.common.min.css" rel="stylesheet" />

That doesn't feel right. Of course, I could manually copy the css, js, etc files from the node_modules structure to folders "styles", "js", etc but that would make the use of NPM rather useless (I could just as well manually download the.zip-file from Telerik and copy the files). Also, if I would run NPM -install again, I could potentially bring down new versions of the css/js-files, and would have to remember to manually copy the files to "styles", "js"-folders again.

I have a feeling I am using the wrong technique here, any ideas?

/Fredrik

Okay first thing, I'm trying to get this functionality working in our implementation;

https://docs.telerik.com/kendo-ui/knowledge-base/grid-prevent-popup-close-on-edit
https://dojo.telerik.com/UKobIzuN

Using the dojo example linked above, there is a line that does not work in our version.

When I try that in ours, it just crashes.  For reference, our version looks like this;

What am I doing wrong?

Thanks.

I need to change command template based on data value. My part of code as follows,

But problem is I can't access grid data inside command actions. Have any possible way to do it?

Hello,

I am trying to to use Timeline to build a conditional survey, where the questions are not known in advance. Expectation is each answer will be added to the Timeline and will be visible to the user.

I am not able to understand how to use Timeline to add the Events as the question is answered. I am using Jquery with .net Core.

Best Regards

Basically i'm trying to hide non-business hours on the click of "Show Business Hours" button in Scheduler. This is needed on demand.

Non-Business work hours - Saturday , Sunday (weekend) and 8 PM to 7 AM (Weekdays)

I need to set the flag $scope.isBusinessHour to either true or false based on whether user clicked on "Show Business hour" or "Show full day" button

If $scope.isBusinessHour set to true, then CustomView would be used which will in turn show Monday to Friday days in the week view (7AM to 8PM)

else default week view would be used. 

But the problem is that i'm not able to find the "Show Business Hours" or "Show full day" button click event or function wherein i can set that flag to achieve this functionality.

Also if there is any better approach to achieve the same (To hide Non-Business work hours - Saturday , Sunday and 8 PM to 7 AM (Weekdays) on demand like on the click of "Show Business Hours" button in scheduler ) , could you suggest?

Week view is as below:

views: [
                    {
                        type: "day"
                    }, {
                        type: !$scope.isBusinessHour? "week" : CustomView, title: "Week",
                        selected: true,
                        workDayStart: new Date("2016/1/1 07:00 AM"),
                        workDayEnd: new Date("2016/1/1 08:00 PM")
                    }

           ]

var CustomView = kendo.ui.MultiDayView.extend({
                options: {
                    selectedDateFormat: "{0:D} - {1:D}"
                },
                name: "customView",
                calculateDateRange: function () {
                    //create a range of dates to be shown within the view

                    var selectedDate = this.options.date,
                        start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                        idx, length,
                        dates = [];

                    for (idx = 0, length = 7; idx < length; idx++) {
                        if (start.getDay() != 0 && start.getDay() != 6) {
                            dates.push(start);
                        }
                        start = kendo.date.nextDay(start);
                    }

                    this._render(dates);
                }

            });

Is there any way to add a class to an image other than obviously editing it directly in html?  I hoped it was as easy as adding an entry into formatting options, but that doesn't work...

No other way?

Hi,

I managed to create a hierarchy grid like the demo https://demos.telerik.com/kendo-ui/grid/hierarchy with two remote json data sources.  I am wondering if there is a way to achieve the same (see attached screen shot) with a single remote json datasource as follows.  Thank you!

{
    "categories": [
       {
           "categoryName": "SciFi",
           "description": "SciFi movies since 1970",
           "movies": [
               { "title": "Star Wars: A New Hope", "year": 1977},
               { "title": "Star Wars: The Empire Strikes Back", "year": 1980},
               { "title": "Star Wars: Return of the Jedi", "year": 1983}
            ]
       },
       {
           "categoryName": "Drama",
           "description": "Drama movies since 1990",
           "movies": [
              { "title": "The Shawshenk Redemption", "year": 1994},
              { "title": "Fight Club", "year": 1999},
              { "title": "The Usual Suspects", "year": 1995}
           ]
       }
    ]
}

Hello,
I am new to Kendo UI.  I am trying to create a hierarchy grid with two json data sources with the following code (two json files at the bottom of the post).  The filter doesn't seem to take any effect.  All movies are listed for both categories.  It is the same when I change the filter to 'filter: { "field": "category", "operator": "eq", "value": "Drama"}'.  What am I missing?  Thanks.

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "https://www.example.com/category.json"
                            },
                            schema: {
                               data: "categories"
                            },
                            pageSize: 6,
                            serverPaging: true,
                            serverSorting: true
                        },
                        height: 600,
                        sortable: true,
                        pageable: true,
                        detailInit: detailInit,
                        dataBound: function() {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [
                            {
                                field: "categoryName",
                                title: "Category",
                                width: "110px"
                            },
                            {
                                field: "description",
                                title: "Description",
                                width: "110px"
                            }
                        ]
                    });
                });

                function detailInit(e) {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "https://www.example.com/movie.json"
                            },
                            schema: {
                               data: "movies"
                            },
                            serverPaging: true,
                            serverSorting: true,
                            serverFiltering: true,
                            pageSize: 100,
                            filter: { field: "category", operator: "eq", value: e.data.categoryName }
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                            { field: "title", width: "110px" },
                            { field: "year", width: "110px" }
                        ]
                    });
                }
            </script>
        </div>

#############################################################

category.json:

{
    "categories": [
       {
           "categoryName": "SciFi",
           "description": "SciFi movies since 1970"
       },
       {
           "categoryName": "Drama",
           "description": "Drama movies since 1990"
       }
    ]
}

###############################################################

movie.json:

{
    "movies": [
        { "title": "Star Wars: A New Hope", "year": 1977, "category": "SciFi" },
        { "title": "Star Wars: The Empire Strikes Back", "year": 1980, "category": "SciFi" },
        { "title": "Star Wars: Return of the Jedi", "year": 1983, "category": "SciFi" },
        { "title": "The Shawshenk Redemption", "year": 1994, "category": "Drama" },
        { "title": "Fight Club", "year": 1999, "category": "Drama" },
        { "title": "The Usual Suspects", "year": 1995, "category": "Drama" }
    ]
}

Hi, Dev Team!

First of all thank you for awesome ScrillView control.

I did not catch how i can provide gallery for images with unknown height?

HTML:

<div id="scrollView" style="height: 600px; width: 100%;">   <--here i need dynamic height
</div>
<script id="scrollview-template" type="text/x-kendo-template">
    <div style="text-align: center;">
        <p>#=data.Name#</p><img src="#=setBackground(data.ServerRelativeUrl)#">
    </div>
</script>

SCRIPT:

        $("#scrollView").kendoScrollView({
            dataSource: AreaPhotoDS,
            template: $("#scrollview-template").html(),
            enablePager: true
        });

Trying to figure out how to stop a move of Outlook Email during drag and drop. I have tested in your sample code in the Dojo it is also happening there. 

So what is happening is you drag and drop a email, which does work, but instead of making a copy and uploading that it pulls the email out of outlook completely. At first I thought this was a bug in outlook but I tried using the drag and drops of other sites using different browsers and they would not pull the email out of outlook. So I think it is an issue with Kendo UI drag and drop upload. Is this a known bug? Is there a workaround to fix this issue?