Telerik Forums
Kendo UI for jQuery Forum
1 answer
117 views
I have the upload widget setup in async mode and have specified a Select event function for validation of the selected file type.
Everything works in FF and IE, but in chrome v15.0.874.121 the event data object passed into the select event method is different from the documentation when a file is dragged and dropped.

Here is the object that is passes when the Select button is clicked and a file is selected in chrome, FF, and IE or drag and dropped in FF.
e.files
[
Object
extension: ".gif"
name: "DiscMen.gif"
rawFile: File
size: 18578
__proto__: Object

Here  is the object that is passed when a file is dragged and dropped on the drop zone in Chrome.
e.files
FileList
0: File
fileName: "DiscMen.gif"
fileSize: 18578
lastModifiedDate: Date
name: "DiscMen.gif"
size: 18578
type: "image/gif"
webkitRelativePath: ""
__proto__: File
length: 1
__proto__: FileList   

my html:
<input name="files" id="files" type="file" />
my Script:
$("#files").kendoUpload({
                        showFileList: false,
                        multiple: false,
                        select: onFileSelected,
                        async: {
                            saveUrl: Site.RootUrl + "Account/UploadAvatar",
                            saveField: "avatarFile",
                            autoUpload: true
                        },
                        localization: {
                            "select": Site.GlobalResources.Account_Settings_Upload_Avatar_Select_Button,
                            "dropFilesHere": Site.GlobalResources.Account_Settings_Upload_Avatar_Drop_Zone_Message
                        }
                    });
function onFileSelected(e) {
    if (e.files[0].extension  != '.jpg') {
        e.preventDefault();
    }
}
T. Tsonev
Telerik team
 answered on 12 Dec 2011
1 answer
138 views
How do I target two different templates on a page?

In the following code, you will see I have one datasource that has the main data set.   I then filter that data differently, to display some parts in the site's header menu and other parts in the footer menu.

However, the content for the footer menu is being loaded into both templates?

<
ul id="navigation_menu" class="navigation_menu"></ul>
<ul id="footer_menu" class="footer_menu"></ul>
 
<!-- TEMPLATES -->
    <script id="navigation_menu_template" type="text/x-kendo-template">
        <li><a href="#=url#" target="#=target#" title="#=title#">#=text#</a></li>
    </script>
 
    <script id="footer_menu_template" type="text/x-kendo-template">
        <li><a href="#=url#" target="#=target#" title="#=title#">#=text#</a></li>
    </script>
     
    <!-- INITIALIZE -->
    <script type="text/javascript">
        var navigation_menu = $("#navigation_menu").kendoMenu();
        var footer_menu = $("#footer_menu").kendoMenu();
 
        $(document).ready(function () {
            function menu_initialize() {
                $("#navigation_menu").html(kendo.render(navigation_menu_template, this.view()));
                $("#footer_menu").html(kendo.render(footer_menu_template, this.view()));
            }
            var navigation_menu_template = kendo.template($("#navigation_menu_template").html());
            var footer_menu_template = kendo.template($("#footer_menu_template").html());
            var menu_datasource = new kendo.data.DataSource(
            {
                transport:
                {
                    read: "xml/navigation.xml"
                },
                schema:
                {
                    type: "xml",
                    data: "/navigation/menu/item",
                    model:
                    {
                        fields:
                        {
                            item_id: "item_id/text()",
                            parent_id: "parent_id/text()",
                            text: "text/text()",
                            url: "url/text()",
                            target: "target/text()",
                            title: "title/text()",
                            google_sitemap_priority: "google_sitemap_priority/text()",
                            google_sitemap_frequency: "google_sitemap_frequency/text()",
                            main_inclusion: "main_inclusion/text()",
                            footer_inclusion: "footer_inclusion/text()"
                        }
                    }
                },
                change: menu_initialize
            });
 
            var navigation_menu_datasource = menu_datasource;
            var footer_menu_datasource = menu_datasource;
 
            navigation_menu_datasource.filter({ field: "main_inclusion", operator: "eq", value: "true" });
            footer_menu_datasource.filter({ field: "footer_inclusion", operator: "eq", value: "true" });
 
            navigation_menu_datasource.read();
            footer_menu_datasource.read();
        });           
    </script>
Petyo
Telerik team
 answered on 12 Dec 2011
4 answers
334 views

I am just getting started with Kendo and am very intrigued by what has been put together thus far.  

At the moment, I am trying to better understand the use of the Grid widget and binding to an external source, but I keep running into conflicting answers in this forum.

What I want to do is to bind to a standard web service (not JSON).   

Perhaps I am not understanding this completely, but it seems that in some discussions, people say this is not possible (http://www.kendoui.com/forums/framework/data-source/bind-to-remote-xml.aspx), but then I see other postings saying that it is (http://www.kendoui.com/forums/ui/grid/grid-data-binding-to-xml.aspx).

Either way, I cannot seem to get it to work, in fact, it doesn't even seem to hit my web service at all.   Can someone shed some light on this?

Here is my code:

<script>
    var dateRegExp = /^\/Date\((.*?)\)\/$/;
 
    function toDate(value) {
        var date = dateRegExp.exec(value);
        return new Date(parseInt(date[1]));
    }
 
    var esData = new kendo.data.DataSource({
        transport: {
            read: { url: "http://localhost/esplanning/esweb.asmx/EmployeeList", type: "xml" }
        }
    });
     
    $(document).ready(function() {
        $("#grid").kendoGrid({
            dataSource: esData,
            schema: {
                type: "xml",
                data: "/EmployeeListResponse/Results/RowSet/Rows"
            },
            height: 250,
            filterable: true,
            sortable: true,
            pageable: true });
    });
</script>


And my corresponding XML data:

<?xml version="1.0" encoding="utf-8"?>
    <soap:Body>
        <EmployeeListResponse xmlns="http://tempuri.org/">
            <Results xmlns="" CubeName="Employee" ViewName="EmployeeList">
                <Scenario DimName="Scenario" ID="Working Budget" Name="Working Budget" />
                <EntityDept DimName="Entity-Dept" ID="1110-3030" Name="1110-3030" />
                <ProductLine_s DimName="Product Line_s" ID="1020" Name="Aviation Electronic Solutions" />
 
                <RowSet ColDims="Employee_m">
                    <Rows IsUpdated="false">
                        <Employee Name="All Employees - All Employees" DimName="Employee" ID="All Employees" IsUpdated="false" EmployeeName="All Employees">All Employees - All Employees</Employee>
                        <Position Name="Current" DimName="Position" ID="1" IsUpdated="false">Current</Position>
                    </Rows>
                    <Rows IsUpdated="false">
                        <Employee Name="Rai, Colleen - 0000000702" DimName="Employee" ID="0000000702" IsUpdated="false" EmployeeName="Rai, Colleen">Rai, Colleen - 0000000702</Employee>
                        <Position Name="Current" DimName="Position" ID="1" IsUpdated="false">Current</Position>
                    </Rows>
                    <Rows IsUpdated="false">
                        <Employee Name="Romero, Walter - 0000000806" DimName="Employee" ID="0000000806" IsUpdated="false" EmployeeName="Romero, Walter">Romero, Walter - 0000000806</Employee>
                        <Position Name="Current" DimName="Position" ID="1" IsUpdated="false">Current</Position>
                    </Rows>
                </RowSet>
            </Results>
        </EmployeeListResponse>
    </soap:Body>
</soap:Envelope>

Rosen
Telerik team
 answered on 12 Dec 2011
3 answers
144 views
Hi,

I'm not sure if this is possible, but, Can I add the KendoUI ComboBox widget to an ASP.NET DropDowList?

According to the KendoUI Documentation is possible to create a combobox from existing select HTML element:

<!-- HTML -->
<select id="combobox">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>

So, if I have a ASP.NET DropDowList:

<asp:DropDownList ID="DropDownList2" class="combobox-kendo" runat="server">
    <asp:ListItem>A</asp:ListItem>
    <asp:ListItem>B</asp:ListItem>
    <asp:ListItem>C</asp:ListItem>
</asp:DropDownList>

and if in a browser is converted to:

<select name="DropDownList2" id="DropDownList2" class="combobox-kendo">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
and, according to the KendoUI documentation, I should add:
$(document).ready(function(){
     $("#combobox").kendoComboBox();
 });
Then..
<script type="text/javascript">
        $(document).ready(function () {
            $(".combobox-kendo").kendoComboBox();
        });
</script>
it should work, right?

In VST2010 when I debug the ASP.NET page, IE9 show me the next error:
Error: 'jQuery' is undefined in the kendo.all.min.js file...

Any idea what could be the problem?
John
Top achievements
Rank 1
 answered on 12 Dec 2011
0 answers
127 views
Hi,

My x values are msec since epoch and I wish display it on x-axis and tooltip like hh:mm for instance with a function like this:
function parseDateTime(epoch){
    var date = new Date(epoch);
    return date.getHours() + ':' + date.getMinutes();
}

And with a chart configuration like this:
//...
tooltip: {
    visible: true,
    format: "{1:N2} m3 @ " + parseDateTime(xValue),
}
//...

Unfortunately I'm not able to retrieve the x value. The '{0}' joker may not be useful in such case. Has someone any idea how perform this task and even is it possible?

Thanks
Yvan
Yvan
Top achievements
Rank 1
 asked on 12 Dec 2011
0 answers
84 views
Just wondering... :)
sitefinitysteve
Top achievements
Rank 2
Iron
Iron
Veteran
 asked on 11 Dec 2011
0 answers
162 views

This has been solved.
I have made the following changes and it now works.  here are the changes:
// change from:
    mainTabs.select('#' + mainTabActive);
    themeTabs.select('#' + themeTabActive );
    mainTabs.reload('#' + mainTabActive );
 
// to this:
 
        mainTabs.select(mainTabs.tabGroup.children('#' + mainTabActive));
    themeTabs.select(themeTabs.tabGroup.children('#' + themeTabActive ));


Below is my code.
I have a tab within a tab.
When I click on a tab I save the index to the local storage (thanks HTML5).  Then when I reload I want to set the tabs back to what they were.  I can set either tab OK, but if I try to set both I get redraw issues.

Here is the code.
$jQ = jQuery.noConflict();
 
$jQ(document).ready(function($) {
 
    /*    TABS SECTION  */
    var mainTabs =$('#tabs').kendoTabStrip().data("kendoTabStrip");
    var themeTabs = $('#theme-tabs').kendoTabStrip().data("kendoTabStrip");
     
    var mainTabActive = $.jStorage.get("mainTab");
    var themeTabActive = $.jStorage.get("themeTab");
 
    mainTabs.select('#' + mainTabActive);
    themeTabs.select('#' + themeTabActive );
    mainTabs.reload('#' + mainTabActive );
     
        //MainTab
        $( '#tabs' ).click(function(e) {
            var selectedTab = e.currentTarget.id;
            $.jStorage.set("mainTab", selectedTab);
        });
         
        //theme tabs
        $( '#theme-tabs' ).click(function(e) {
            var selectedTab = e.currentTarget.id;
            $.jStorage.set("themeTab", selectedTab);
        });
});
Damon
Top achievements
Rank 1
 asked on 11 Dec 2011
11 answers
171 views
I suggested to a client that they look at Kendo UI for development. They have a major LOB app on Windows (WPF/Silverlight/WinForms) and are looking to jump to a similarly rich UI platform. I suggested looking at Kendo UI and here is their response:

"I looked at their site and widgets. Very primitive. For example, I don't see any events triggered on a cell in the grid widget. I also don't see any provision for different cell types in the grid. Combo, button, masked edit, etc."

Any advice for developers coming from rich UI environments and looking to replace UI with similar richness?
Alec
Top achievements
Rank 1
 answered on 10 Dec 2011
0 answers
78 views
Hello hello ...

I just got a look-see at Kendo UI, looks nice and I was impressed enough to take it to the first step -- Put a few localhost pages together and see how I like it and if it is enough of a step-forward from jQuery or Dojo to put real-time into this thing-o.

I reckon that is going to be a common theme, and imhx [in my humble eXperience] ... most of us go through this when we see a new framework or tool with some potential.  So I started this thread for YOU to add your "next step forward" to the forum thread.  Hopefully people like me (but sometimes with more time, than I had this weekend) can answer your query and we will all do better-er. .... Why no yes?  Here's my 'thing' ...

  • Assemble different widgets on a splitter page.

So I made a page from the Splitter demo -- With the intention to put a Menu or Treeview in the left-hand panel.  I was looking to assemble a page from different panels with a different widget in each.  When I load that simple idea as page the menu or treeview (doesn't matter) only shows as a HTML mark-up and not showing as a Kendo widget.

I'd like it if someone or me finds out how to to something simple like that -- Combining Kendo widgets?  My second curiosity, is to figure out how to load that left-hand splitter with a menu or treeview thing via ajax.

Really; I wanted to put three or four of these coool loooooking wiiiiidegets on-screen ensemble.  It doesn't seem to be so sweet to effect that.  I worked that I need to get an element loaded before asking a jQuery or Kendo element to work with it.

I'm interested as a beginner -- What are the effective and simple ways to assemble a page-layout using widgets, static content, and/or ajax loads?

That's my beginner question ...

ADD your question ... !

Many thanks ... Will

Will
Top achievements
Rank 1
 asked on 10 Dec 2011
1 answer
387 views
Hi - Kendo UI looks great.

Is there an overall CSS/HTML framework that can work with it, like 960, Blueprint, YUI or Zurb's Foundation??  I don't want my template grids and CSS to fight with Kendo UI.

thx
Arik
Top achievements
Rank 1
 answered on 10 Dec 2011
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?