Is there any way to programmatically check if an upload widget has been initialized?
I've got a bit of an odd situation, where the same child upload can be associated with multiple parents on the page and I'm trying to set the file list on page load. Since the child exists twice, the (single) file is being displayed twice on each of the two widgets.
I'm using a class to target the children items to add an upload, since they have the same ID:
<input class="upload-#= data.Items[i].ID #" type="file" />Then when I init the upload, I'm creating a files array:
for (var i = 0; i < data.Items.length; i++) { var files = []; for (var a = 0; a < data.Items[i].Attachments.length; a++) { files.push({ name: data.Items[i].Attachments[a].Name, size: data.Items[i].Attachments[a].Size, extension: data.Items[i].Attachments[a].Extension }); } $('.rcr-upload-' + data.Items[i].ID).kendoUpload({ multiple: true, async: { saveUrl: "/controllers/UploadController.cfc?method=upload", autoUpload: true }, files: files });}When I console.log the files array, it only has the one item in it, so it looks like the duplication is happening because the inputs have the same class (which again, is because the ID is the same). There's no unique ID I can provide for these items, so I'm hoping to check if the widget has been init'd instead.
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:
function addExtensionClass(extension) { switch (extension) { case '.jpg': case '.img': case '.png': case '.gif': return "img-file"; case '.doc': case '.docx': return "doc-file"; case '.xls': case '.xlsx': return "xls-file"; case '.pdf': return "pdf-file"; case '.zip': case '.rar': return "zip-file"; default: return "default-file"; }}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:
<i class="fa-icon-check"></i>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:
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?
var grid = $('#myGrid').data('kendoGrid'); var rows = grid.tbody.find(" > tr"); var rowCount = grid.tbody.find(" > tr").length; if (rowCount > 0) { for (var x = 0; x < rowCount; x++) { var dataItem = grid.dataItem(rows[x]); var row = rows[x]; if (dataItem.foo === 'bar') { row.cells[0].style.backgroundColor = "#e0e0eb"; }}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: ...
}
}
}
}
})
});