Related to my other thread (http://www.telerik.com/forums/restrict-allowed-file-types), we're going to be restricting the allowable file types, but we also allow some semi-odd ones, such as .ai, .psd, .indd, .idml. We've already got icons of our own to represent these file types, so I'm hoping we can customize the uploader to display them.

I have this code snippet from one of the upload examples:

 Two things: where do these icons come from, and how can I check which ones are available? Secondly, can I replace these with my own icons (we use FontAwesome), which are set up like this:

 Hello,

 I have run into a problem with calling setOptions on the grid if I am using a custom angular column editor.

 Before calling setOptions the editor works correctly, once setOptions is called it stops displaying the custom editor.

 I have verified that the function that sets the custom editor is called and executes the same way as it did before running setOptions.

 I created the following Dojo that reproduces the problem I am having: http://dojo.telerik.com/IDOCu/2

 Steps to reproduce:

1. Click in one of the category fields to ensure that the angular control is created and working properly.
2. Click the "Set Options" button above the grid.
3. Click in one of the category fields again, and notice that the angular control is not created this time and is only showing input control.

Thanks in advance for any help you can provide,

Sean

Hello,

I wan to ask, if there is some way to style .k-event div according to a variable in event template. 

What I need to do for example is to make red border on events, that have attribude "conflict = true" like that:

 <script id="event-template" type="text/x-kendo-template">
    <div data-conflict="#:hasConflict#">
    </div>
</script>​

 Or get value of "hasConflict" as a class of event or something like this.

I made some workaround with JQuery, going trough each event, search for attribute and toggle class.

$(".k-event").each(function () {

        var conflict = true;
        var conflictDiv = $(this).find("div[data-conflict]");
        if ($conflictDiv.length >= 1) {
            conflict = $conglictDiv.first().attr("data-conflict");
        }

        if (conflict) {
            this.addClass("conflict");
        }
        else {
            this.removeClass("conflict");
        }
    });​

But it seems to much complicated and I'm afraid, that it can take lots of time, i we have lots of events on the sheduler, I'm looking for more system-like way, like setting event color as is described here: http://dojo.telerik.com/@D_Learning/iQuta/4.

Thanks fo any answer.

I'm color coding some cells in a grid with code similar to the snippet below.

1. Is this the most efficient way to perform cell level conditional formatting? I have some pretty large datasets, and it doesn't seem like a great solution.

2. Locking columns breaks this logic by changing the cell's array position. Is there a way around this without parsing through the entire grid when a column is locked?

Hello,

My problem is that the documentation is not clear on if/how it is possible to data-bind a TreeView on a multilevel data which is loaded with one call.

Let's say my data is the following:
public class TreeLevel1ViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public IList<TreeLevel2ViewModel> TreeLevel2 { get; set; }
}
public class TreeLevel2ViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public IList<TreeLevel3ViewModel>  TreeLevel3 { get; set; }
    }
public class TreeLevel3ViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

And I want to call the TreeLevel1ViewModel once already built with the children:

[HttpGet]
        public HttpResponseMessage Get()
        {
            return Request.CreateResponse(HttpStatusCode.OK,
                new
                {
                    data = RetrieveTreeList()
                });
        }

        private static IEnumerable<TreeLevel1ViewModel> RetrieveTreeList()
        {
            IList<TreeLevel1ViewModel> list = new List<TreeLevel1ViewModel>();
            for (int i = 0; i < 3; i++)
            {
                TreeLevel1ViewModel level1 = new TreeLevel1ViewModel
                {
                    Id = i,
                    Name = $"Level1 {i}",
                    TreeLevel2 = new List<TreeLevel2ViewModel>()
                };

                for (int j = 0; j < 4; j++)
                {
                    var level2 = new TreeLevel2ViewModel
                    {
                        Id = j,
                        Name = $"Level2 {i}{j}",
                        TreeLevel3 = new List<TreeLevel3ViewModel>()
                    };

                    for (int k = 0; k < 2; k++)
                    {
                        level2.TreeLevel3.Add(new TreeLevel3ViewModel
                        {
                            Id = k,
                            Name = $"Level2 {i}{j}{k}"
                        });
                    }

                    level1.TreeLevel2.Add(level2);
                }

                list.Add(level1);
            }
            return list;
        }

From there I want to data-bind this data to the TreeView:

<div id="example">

    <div id="treeview"
         data-role="treeview"
         data-drag-and-drop="false"
         data-text-field="Name"
         data-load-on-demand="false"    
         data-bind="source: treeData">
</div>
</div>

    <script type="text/javascript">
        $(function () {
            kendo.bind($("#example"), treeViewModel);
        });
</script>

On:

var treeViewModel = kendo.observable({
    treeData: new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "/api/Tree",
                type: "get",
                dataType: "json"
            }
        },
        schema: {
            data: "data",
            model: {
                id: "Id",
                title: "Name",
                expanded: false,
                children: "TreeLevel2"
            }
        }
    })
});

This works to display the first and second level, but not the third... I am not surprised as I do not specify the schema further, but when I try something like the following it doesn't work:

var treeViewModel = kendo.observable({
    treeData: new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "/api/Tree",
                type: "get",
                dataType: "json"
            }
        },
        schema: {
            data: "data",
            model: {
                id: "Id",
                title: "Name",
                expanded: false,
                children: {
                    schema: {
                        data: "TreeLevel2",
                        model: {
                            id: "Id",
                            title: "Name",
children: ...
                    }
                }
            }
        }
    })
});

I have an Angular JS app.  When I browse to a new page and go back to the page with the grid, I receive the following error:

"Uncaught Error: Cannot call method 'value' of kendoDropDownList before it is initialized"

Datasource:
app.factory('giftService', ['coreSettings', function (coreSettings) { 
    var giftServiceFactory = {};
    var crudServiceBaseUrl = coreSettings.apiServiceBaseUri + "odata/Order";
    var ds = new kendo.data.DataSource({     
        type: "odata",
        transport: {
            read: {
                url: crudServiceBaseUrl,
                dataType: "json"
            }
        },
        batch: false,
        serverPaging: true,
        pageSize:10,
        serverSorting: true,
        serverFiltering: true,
        aggregate: [
               { field: "Amount", aggregate: "sum" }
        ],
        schema: {
            errors: function (response) {
                if (response.Errors) {
                    return (response.Errors);
                    this.cancelChanges();
                }
            },
            data: function (data) { return data.value; },
            total: function (data) { return data["odata.count"]; },
            model: {
                fields: {
               ​...
                }
            }
          
        },
        error: function (e) {
            return (e.xhr.responseText);
            this.cancelChanges();
        },
        success: function (e) {
            alert('Success!');
        }
    })

    giftServiceFactory.ds = ds;
    return giftServiceFactory;

}]);

Angular Controller:

 $scope.gifts = salesService.GetAllGifts();

    $scope.gridOptions = {
        toolbar:  ["excel"],
        excel: {
            fileName: "Exclusively Gifted Sales.xlsx",          
            filterable: true,
            allPages: true
        },
        sortable: true,
        selectable: true,
        reorderable: true,
        groupable: true,
        columnmenu: true,      
        pageable: {
            refresh: true,
            pageSizes: true,
            pageSize: 10,
            messages: {
                refresh: "Refresh the grid"
            }
        },
        filterable: true ,
        dataSource: $scope.gifts,
        columns: [
            { field: "PurchaserName", title: "Purchaser" },
            { field: "SendMethodPurchaser", title: "Purchaser Email" },
            { field: "RecipientName", title: "Recipient" },
            {
                field: "Amount", format: "{0:c}", aggregates: ["sum"],
                footerTemplate: "Total Amount: #= kendo.toString(sum, 'C') #",
                groupFooterTemplate: "Total : #= kendo.toString(sum, 'C') #"               
            },
            { field: "PurchaseDate", title: "Purchased", format: "{0:yyyy-MM-dd}" },
            { field: "SendDate", title: "Sent", format: "{0:yyyy-MM-dd}" },
            { field: "RedeemedDate", title: "Redeemed", format: "{0:yyyy-MM-dd}" }
        ]
    };


Do you have any suggestions as to what can be causing this behavior? When I remove the paging the issue does not occur.  Many thanks,

Jayme

​