Telerik Forums
Kendo UI for jQuery Forum
3 answers
116 views
Hi!

In my application, I have a ListView that uses a DataSource with grouping.

After I updated to version 2013.2.716, the links are only created correctly if I put the class and the role on the a tag. Without them, the link just breaks the navigation.
However, if I remove the grouping from the DataSource, the item becomes clickable and works as expected, even without specifying class and role.

Here is my template:
<script id="list-indicator-template" type="text/x-kendo-template">
    <a href="views/valuesChart.html?IndicatorId=#: IndicatorId #&Attribute=#: Attribute #" class="km-listview-link" data-role="listview-link">
        #: Attribute #
        <span class="attribute-value">#: kendo.toString(Value, "n2") #</span>
    </a>
</script>
Am I missing something here? I don't think so.

Thanks!
Kiril Nikolov
Telerik team
 answered on 23 Jul 2013
2 answers
157 views

Hello,

 

We are looking for an expert who can help us customize Kendo UI framework to fit our custom build charts images. If you have experience working with Kendo UI then please email us back admin at FirePips .com

 

We will provide more details via email.

 

Regards

Victor

Sydney, Australia 

Dimo
Telerik team
 answered on 23 Jul 2013
3 answers
409 views
My chart looks fairly good. 2 questions though. (See attached screen shot)

1) How can I make the Series labels only appear when the mouse hovers?
2) How do I format the Category Axis (Date) to "MMM d". My attempt below doesn't do anything to the date displayed.

Html.Kendo().Chart<AccountPerformance>(Model.Results)
    .Name("chart")
    .Title("Market Value")
    .Legend(legend => legend.Visible(false))
    .Series(series =>
            series.Line(model => model.Metrics.MarketValue)
                    .Name(Model.ColumnTitle)
                    .Labels(false)
    )
    .ValueAxis(axis => axis.Numeric()
        .Labels(labels => labels.Format("{0:C0}")))
    .CategoryAxis(axis => axis
        .Categories(model => model.ObservationDate)
        .Labels(labels =>
            {
                labels.Format("MMM d");
                labels.Rotation(45);
            } ))
    .Render();


Ian
Top achievements
Rank 2
 answered on 22 Jul 2013
3 answers
966 views
I am trying to put two charts, 320px width each, inside a Window and have them beside each other like in the screen shot.

Putting the charts into <div>s set at that width with a float doesn't work, the charts end up still stacked on top of each other:

Html.Kendo().Window()
    .Name(windowId)
    .Width(650)
    .Title(Model.ChartTitle)
    .Content(@<text>
 
                  <div style="width: 320px;">
                              CHART
                 </div>
 
                  <div style="width: 320px; float:right">
                              CHART
                 </div>
Ian
Top achievements
Rank 2
 answered on 22 Jul 2013
4 answers
107 views
Hi,

I run into a problem with the sample code below and I am not sure what causes it.  The problem is that the "temperatureLabel" gets display only once inside the for loop in the "myTemplate" template. 


var viewModel = kendo.observable({temperatureLabel: "Temperature", mydata:[]});
$.ajax({
                    url: url,
                    context: this,
                    type: "GET",
                    success: function(data) {
                        this.viewModel.set("mydata", data);
                        kendo.bind($("#view"), viewModel, kendo.mobile.ui); 
                    },
                    error: function(xhr, statusText, errorThrown) {
                       console.log(errorThrown);
                    },
                    timeout: 10000
 });

<div id="view">
<ul id="taf-panelbar" data-bind="source: mydata" data-template="myTemplate"></ul>
</div>

<script id="myTemplate" type="text/x-kendo-template">
          # for (var i = 0; i < forecast.length; i++) { #
                <li>
               <div>
               <table style="border: 1px solid lightGray; border-radius:6px;">
                    <tr>
                        <td class="label"><span data-bind="text:temperatureLabel></span></td>
                        <td>:</td>
                        <td style="text-align:left;"><span>#=forecast[i].temperature#</span></td>
                    </tr> 
               </table>
               </div>
               </li>
          # }#
</script>

Can someone shed some lights on this?

Thanks,
Kee
Kee
Top achievements
Rank 1
 answered on 22 Jul 2013
1 answer
310 views
Hi - I have a page with 4 charts and 3 splitters.  One splitter is vertical between the 2 charts on the top and the 2 charts on the bottom.  There are also 2 horizontal splitters - 1 between the charts on the top and 1 between the charts on the bottom.

My problem is that when the page loads, I only see the top 2 charts and 2 of the splitters correctly.  It looks like the third splitter is partially there.

I've attached a document with two screen shots.  The top screen shot has a red box around the bit of the splitter I can see.  When I move it, the other two charts render as shown in the bottom screen shot

What do I have to do to get all 4 charts to render when the page loads?

Here is the code creating the splitters:
ksAllCharts = $("#AllCharts").kendoSplitter({
          orientation: "vertical",
          panes: [
              { size: "40px", scrollable: false, resizable: false },
              { size: "300px", scrollable: false },
              { size: "100%", scrollable: true }
          ],
          layoutChange: onAllChartsLayoutChange
      }).data("kendoSplitter");
 
      ksCharts1 = $("#charts1").css("height", "100%").kendoSplitter({
          orientation: "horizontal",
          panes: [
              { size: "50%", scrollable: false },
              { size: "50%", scrollable: false }
          ],
          layoutChange: onChartsLayoutChange
      }).data("kendoSplitter");
 
      ksCharts2 = $("#charts2").css("height", "100%").kendoSplitter({
          orientation: "horizontal",
          panes: [
 
              {size: "50%", scrollable: false },
              { size: "50%", scrollable: false }
          ],
          layoutChange: onChartsLayoutChange
      }).data("kendoSplitter");


And the code for the page layout:
<ul id="panelBar">
    <li>Testing a new page
        <div id="comparativeDashboardPanelContents">
            <div id="AllCharts">
                <div>
                    <h1 class="top-header">testing a new page</h1>
                </div>
                <div id="chartsPane1">
                <h2 class="top-header">chart area 1</h2>
                    <div id="charts1">
                        <div id="OFPBySchool"></div>
                        <div id="OFStuPBySchool"></div>
                    </div>
                </div>
                <div id="chartsPane2">
                <h2 class="top-header">chart area 2</h2>
                    <div id="charts2">
                        <div id="StuCountsRiskBuckets"></div>
                        <div id="SchoolCrosstab"></div>                  
                    </div>
                </div>
                 
            </div>
        </div>
    </li>
</ul>

Thanks for any help, I'm really new to this.

Lisa
Dimo
Telerik team
 answered on 22 Jul 2013
1 answer
210 views
Hello,

It seems like in one of the recent releases the RequestStart event changed so that it now fires for the Insert and Update events as well as the read event.  We have logic in our application that it supposed to run against a read event to warn the user if they have unsaved changes, but this change has made this warning fire even when the user is saving their changes.  Is it possible to find out the request type in RequestStart?  I know this is available in the RequestEnd method, but at that point, it's too late for our logic to run.  Or is there another way to handle this?

Thanks for the help!

Regards,
Brian
Dimiter Madjarov
Telerik team
 answered on 22 Jul 2013
1 answer
84 views
Your example of pie chart remote data binding works great when the web service is hosted in the same place as the HTML, but it seems to be erratic if the web service is hosted somewhere else.

What I did was create a WCF service that returns a JSON object exactly like your example web service, and then call it with your exact HTML.

Reproducing the error is simple:  take  the pie chart remote data binding example and change the web service address so it's hosted in a domain different to the HTML. Obviously, you need to change to JSONP and add the callback function.

Thanks.
Vaughn Myers
Top achievements
Rank 1
 answered on 22 Jul 2013
3 answers
244 views
I wasn't able to find a chart title option for a gauge as with the other charts. If this isn't an option are there any recommendations on how to match and overlay the existing style of a chart title onto a gauge?
Iliana Dyankova
Telerik team
 answered on 22 Jul 2013
4 answers
108 views
I have several sparklines in my HTML and they're being populated by a web service. It seems that they don't always fill out; I refresh and a few fill out, I refresh again and others fill out. The only way I've been able to fill them all out is by displaying an 'ALERT' for every function called. It seems it's a problem with a refresh.

Is it possible that I'm calling the web service too many times and it has become erratic?
Here's the code:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.rtl.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    </head>
<body>
    <div>
            <table class="history" >
                <tr>
                    <td class="style7">Department C 1</td>
                    <td class="spark" style="width: 210px;"><span id="hum-log"></span></td>
                    <td class="style6">Department  C 1</td>
                    <td class="spark" style="width: 210px;"><span id="press-log" style="line-height: 60px"></span></td>
                </tr>
                <tr>
                    <td class="style7">Department C 2</td>
                    <td class="spark" style="width: 210px;"><span id="2c-log" style="line-height: 60px"></span></td>
                    <td class="style6">Department C 2</td>
                    <td class="spark" style="width: 210px;"><span id="temp-log" style="line-height: 60px"></span></td>
                </tr>
                <tr>
                    <td class="style7">Department C 3</td>
                    <td class="spark" style="width: 210px;"><span id="3c-log" style="line-height: 60px"></span></td>
                </tr>
                <tr>
                    <td class="style7">Department C 4</td>
                    <td class="spark" style="width: 210px;"><span id="4c-log" style="line-height: 60px"></span></td>
                </tr>
                <tr>
                    <td class="style7">Department C 5</td>
                    <td class="spark" style="width: 210px;"><span id="5c-log" style="line-height: 60px"></span></td>
                </tr>
            </table>
    </div>
    <script>
        function createSparklinesDepartment1C() {
            // Binding directly to an array
            alert('Entered');
            var rowDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=1",
                        type: 'GET',
                        jsonpCallback: 'callback',
                        dataType: "jsonp"
                    }
                }
            });
            $("#press-log").kendoSparkline({
                    dataSource: rowDataSource,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Green"
                    }]
                });
                //second one
                // Third one
            // Binding directly to an array
        }          
        $(document).ready(createSparklinesDepartment1C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment1C);
    </script>
  
 <script>
        function createSparklinesDepartment2C() {
            alert('Entered 2c');
            var rowDataSource2 = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=2",
                        type: 'GET',
                        jsonpCallback: 'callback',
                        dataType: "jsonp"
                    }
                }
            });
            $("#temp-log").kendoSparkline({
                    dataSource: rowDataSource2,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Red"
                    }]
                });
        }
        $(document).ready(createSparklinesDepartment2C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment2C);      
 
    </script>
 
 <script>
        function createSparklinesDepartment1C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=1",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#hum-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Black"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment1C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment1C);      
 
    </script>
<!-- The new ones -->
 <script>
        function createSparklinesDepartment2C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=2",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#2c-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Blue"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment2C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment2C);      
 
    </script>
 <script>
        function createSparklinesDepartment3C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=3",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#3c-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Purple"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment3C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment3C);      
 
    </script>
 <script>
        function createSparklinesDepartment4C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=4",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#4c-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Orange"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment4C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment4C);      
 
    </script>  
 <script>
        function createSparklinesDepartment5C() {
            alert('Entered 3c');
                var rowDataSource3 = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=5",
                            type: 'GET',
                            jsonpCallback: 'callback',
                            dataType: "jsonp"
                        }
                    }
                });
            $("#5c-log").kendoSparkline({
                    dataSource: rowDataSource3,
                    series: [{
                        type: "area",
                        field: "count",
                        color: "Magenta"
                    }]
                });                    
        }
        $(document).ready(createSparklinesDepartment5C);
        $("#example").bind("kendo:skinChange", createSparklinesDepartment5C);      
 
    </script>  
    <style scoped>
        .chart-wrapper {
            width: 200px;
            height: 100%;
            margin: 0 auto 30px auto;
            padding: 0 0 30px 0;
            font-weight: bold;
            text-transform: uppercase;
        }
        .climate, .temperature, .conditioner {
            margin: 0 30px;
            padding: 30px 0 0 0;
        }
        h1 {
            margin-bottom: 20px;
            font-size: 1.2em;
        }
        .history {
            border-collapse: collapse;
            width: 480px;
            height: 248px;
        }
        .history td {
            padding: 0;
        }
        .history td.item {
            text-align: right;
            line-height: normal;
            vertical-align: bottom;
        }
        .history td.spark {
            text-align: left;
            line-height: 50px;
            padding: 0 5px;
        }
        .history td.value {
            font-size: 2em;
            font-weight: normal;
            line-height: normal;
            vertical-align: bottom;
        }
        .history td.value span {
            font-size: .5em;
            vertical-align: top;
        }
        .stats {
            text-align: center;
        }
        #temp-range {
            width: 400px;
            line-height: 50px;
        }
        .style6
        {
            width: 59px;
            font-family: Calibri;
        }
        .style7
        {
            width: 100px;
            font-family: Calibri;
        }
    </style>
 
 
</body>
</html>
Vaughn Myers
Top achievements
Rank 1
 answered on 22 Jul 2013
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
Iron
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
Iron
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?