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?

Hi,

im using kendo Jquery spreadsheet in angular application.we have a requirement to fill 4 values in one cell similar to the mockup attached. do we have any such customization available in kendo spreadsheet for the same? 

work around:

as cells in the mockup is read only, so for now im replacing the template created by kendo with some JavaScript code. how bad can this affect  the life cycle of plugin or framework ?

updateTemplate(){
    var d1 = document.getElementsByClassName('k-vertical-align-bottom');
    var template=this.htmlTemplate();
   for (var i=0 ;i<d1.length;i++){
    var element=d1[i];
    if(element.innerHTML=="p-40")
    {
      element.parentElement.style.padding="0";
      element.innerHTML=template;
    }
   }
  }