Telerik Forums
Kendo UI for jQuery Forum
2 answers
582 views

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.

Ashleigh L
Top achievements
Rank 1
 answered on 16 Nov 2015
2 answers
709 views

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>

Ashleigh L
Top achievements
Rank 1
 answered on 16 Nov 2015
2 answers
206 views

 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

Sean
Top achievements
Rank 1
 answered on 16 Nov 2015
1 answer
220 views

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.

 

Vladimir Iliev
Telerik team
 answered on 16 Nov 2015
4 answers
943 views
I have developed during the current kendo ui
This content was a problem loading the url is large y-axis scrolling occurs while using the tooltip function
I am currently using IE
In Chrome, this problem does not occur
Have you ever wondered if such an option scrollable
Magdalena
Telerik team
 answered on 16 Nov 2015
10 answers
482 views
Hi,

I try to convert http://demos.kendoui.com/web/mvvm/source.html into typescript.
I see the items but don't know what to do with deleteProduct.
I get always cannot find "apply" exception from JQuery.

Can you provide a typescript version? Html version works out of the box.

Regards,
Ladislav
Ruud
Top achievements
Rank 1
 answered on 16 Nov 2015
1 answer
226 views

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

Dimiter Madjarov
Telerik team
 answered on 16 Nov 2015
2 answers
310 views

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: ...
                    }
                }
            }
        }
    })
});

T. Tsonev
Telerik team
 answered on 16 Nov 2015
6 answers
1.0K+ views
Hi,

I have a treeview widget with a single root node which is disabled at page load and is set to on demand loading. Problem is that the treeview node itself is properly disabled but the expand button is not. When I click on the expand button the sub-items are loaded and displayed. When I then try to collapse the node again I can't. When I enable and disable the treeview again _after_ sub items were loaded under the root node the behavior is correct again. I.E. I can no longer expand the root node.

I disable the treeview using $("#treeview").data("kendoTreeView").enable('.k-item', false);
I can see the same behavior on IE 10, Firefox 20.0.1 and Chrome 28.0.1500.72.
I am using the MVC wrappers version 2013.1.514.

I apologize if this has been reported before. I did search the forums but could not find this issue anywhere.
Dimiter Madjarov
Telerik team
 answered on 16 Nov 2015
3 answers
1.3K+ views
Hi,

I'm having an issue when formatting a date in my locale it-IT. I've set up angular-locale_it-it.js and kendo.culture.it-IT.min.js and my date picker looks like this:

    <input kendo-date-picker
                k-format="'dd/MM/yyyy'"
                ng-model="model.Date"
                name="Date" required />

where model.Date is coming from the server in this format: "2014-10-08T00:00:00+02:00" and is displayed as it is. I'm expecting it to be: "08/10/2014" instead.

I'm using: AngularJS v1.2.21 and Kendo UI v2014.2.1008

Do you have any suggestion?

Thanks,
Enrico
Helen
Telerik team
 answered on 16 Nov 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?