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;
    }
   }
  }

the below code is use to generate kendoGrid. i want to create child row (no header) with value of "Comments" field, when "Comments" not empty. How can i achieve this. expecting your help.

<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "productName" }, { field: "category" }, { field: "status" }, { field: "Comments"} ], dataSource: { data: [ { productName: "Tea", category: "Beverages", status: "Open", "Comments": "" }, { productName: "Coffee", category: "Beverages", status: "Open", "Comments": "comment1" }, { productName: "Ham", category: "Food", status: "Open", "Comments": "" }, { productName: "Bread", category: "Food", status: "Open", "Comments": "" }, { productName: "Hammer", category: "Hardware", status: "Closed", "Comments": "Comment test" }, { productName: "Screw", category: "Hardware", status: "Open", "Comments": "commenting testing" } ], group: { field: "category" } }, }); var grid = $("#grid").data("kendoGrid"); var dataView = grid.dataSource.view(); </script>

I would like to change the format of the date in the "Day" view so that it shows the Day of week (ie. Mon, Tue, Wed, and so on).

I have tried setting the dateHeaderTemplate but it only changed the format in the week view.

I have also tried changing views.selectedDateFormat and views.selectedShortDateFormat none of which had any impact.

Any guidance?

Hi there,

I found this post "Is a selected cell merged?" from the spreadsheet forums which is quite similar to what I want.

I have a kendo.ui.spreadsheet which the user selects a range of cell (including a merged cells).  From the post, it mentioned about "For a merged Cell the Property IsSingleCell is false", but I don't see a property definition of "IsSingleCell" in the spreadsheet API documentation. 

Where can I find this "IsSingleCell" property?  If this property exists, any dojo example would be awesome.

If not, is there a way to determine if the selected range in a spreadsheet contains a merged cell? 

I'm hoping that there will be a cell property like "merged" that returns true or false.

Any inputs is greatly appreciated.

Junius