Telerik Forums
Kendo UI for jQuery Forum
1 answer
116 views
I have created a simple test from your examples

<!DOCTYPE html>
<head>
    <title></title>
 
    <link href="../Styles/kendo.common.css" rel="Stylesheet" />
    <link href="../Styles/kendo.default.css" rel="Stylesheet" />
    <script src="../Scripts/kendo/jquery.min.js"></script>
    <script src="../Scripts/kendo/kendo.core.js"></script>
    <script src="../Scripts/kendo/kendo.data.js"></script>
    <script src="../Scripts/kendo/kendo.chart.js"></script>
</head>
<body>
           <div id="example" class="k-content">
 
           <div>
                <div id="chart"></div>
            </div>
            <script type="text/javascript">
                function createChart() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        dataSource: {
                            transport: {
                                read: {
                                    url: "test.json",
                                    dataType: "json"
                                }
                            },
                            sort: {
                                field: "Program",
                                dir: "asc"
                            }
                        },
                        title: {
                            text: "Signup Count"
                        },
                        legend: {
                            position: "bottom"
                        },
                        seriesDefaults: {
                            type: "pie",
                            labels: {
                                template: "${ value } - ${ category }",
                                visible: true
                            }
                        },
                        series: [{
                            field: "SignupCount",
                            categoryField: "Program"
                        }],
                        tooltip: {
                            visible: false
                        }
                    });
                }
 
                $(document).ready(function () {
                    setTimeout(function () {
                        createChart();
 
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                    }, 400);
 
                    $(document).bind("kendo:skinChange", function (e) {
                        createChart();
                    });
                });
            </script>
        </div>
 
</body>
</html>

test.json is a file that contains

[{"AgentsNames":["person 1"],"Program":"GOLD","SignupCount":1},{"AgentsNames":["person 2","person 3"],"Program":"No Program","SignupCount":2}]

that works perfectly

but when I change the url to "datastream.aspx?r=SIGNUPCOUNT" it doesnt work. This page responds with that JSON string

MemoryStream stream = GPCO.JSON.Serialize(stats.Programs);
string response = GPCO.Convert.BytesToUTF8(stream.GetBuffer());
Response.Clear();
Response.ContentType = "application/json";
Response.Write(response);

I've confirmed that it writes 

[{"AgentsNames":["person 1"],"Program":"GOLD","SignupCount":1},{"AgentsNames":["person 2","person 3"],"Program":"No Program","SignupCount":2}]

that is also the source in the browser when I call the page directly. I've tried various parameters in the transport type: "GET" but nothing seems to work. 



David
Top achievements
Rank 1
 answered on 12 Dec 2011
0 answers
121 views
I would like to know is it possible to override methods on a class.

I'm thinking of creating a form container class (eg MyForm.js) with some helper methods.

Then I want to create another container (eg MyBigForm.js) which inherits MyForm and override the helper methods. Is that possible?
Kashim
Top achievements
Rank 1
 asked on 12 Dec 2011
1 answer
544 views
Hi,

how can I change CSS of inactive tabs? I would like to set different background color for inactive tabs and leave white background only for currently acitve tab. I can't figure out how to do that.

I would appreciate if someone could help me. Thanks,

Igor
Dimo
Telerik team
 answered on 12 Dec 2011
1 answer
204 views
Does the KendoUI Grid support complex column headers, ie. multiple rows in the column header so I can group columns together? We're currently using datatables which offers this functionality, but we'd like to switch to the KendoUI grid (plus, datatables doesn't let us build the columns dynamically, which we need to do). We will be creating the grid from a div, not from an existing html table.
See also: http://datatables.net/release-datatables/examples/basic_init/complex_header.html
Thanks.
Rosen
Telerik team
 answered on 12 Dec 2011
0 answers
118 views
I need an example grid using crud kendo.
How do I send the instance of the object to the controller using json?
Wandelson
Top achievements
Rank 1
 asked on 12 Dec 2011
1 answer
136 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
161 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
371 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
166 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
160 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
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
Drag and Drop
Application
Map
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
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?