Telerik Forums
Kendo UI for jQuery Forum
1 answer
282 views
What I want is to list all books in a ListView. Then, clicking a button related with a category, I want to filter them. All books are loaded in the client side (there are not many). Server is not called for filtering.  

When I press a button, the following function is called:

function filterByCategory() {
 var list = $("#reportlistview").data("kendoListView");
  list.dataSource.filter({
field: "Category",
operator: "contains",
value: "xx"
});
}

I expected that the ListView only shows items with Category=xx, but the listview does not change. It continuous showing all books.

The ListView is created with:

@(Html.Kendo().ListView<Books>(Model)
.Name("reportlistview")
.TagName("div")
.ClientTemplateId("template")
.Selectable()



What am I doing wrong?

Thank you

Dimiter Madjarov
Telerik team
 answered on 24 Jul 2013
2 answers
228 views
Is it possible to post data back to a controller using a FormCollection object? I would like a user to be able to open a kendo window and select, by way of a checkbox, multiple entries. Then close the window, change data on the parent page and then submit the form (note: the kendo window div exists inside the form). I can get the kendo window to open and display all the data via a listview but I'm not sure how to get the checkbox values (the only piece of the kendo window the user can edit) back to my controller. I suspect kendo might be destroying all the data selected when the window is closed (note: I do not call the destroy command on the window) so I figured I could always create a bunch of hidden fields on the parent page and update them as the user checks off the check boxes but I was trying to avoid that.

I can always change my controller to a DataSource Object but I'd like to avoid rewriting code. The controller called is 
[HttpPost]
ActionResult BrowseTeeTimes(string club FormCollection formData)
Kelly
Top achievements
Rank 1
 answered on 24 Jul 2013
4 answers
186 views
Kendo Devs,

I am looking to display one line and one bar series upon the same set of axes, however each will pull from a different API URL, therefore does anyone know how to combine two DataSources into one chart?

Below is my code so far; the bar series (dataseries1) successfully pulls data from the API  and plots it as a bar chart on the axes; I have manually extracted Y values for the line series and passed them in as a .data array as you will see in the code; in an ideal world, i would like to be able to add 'dataSource: dataseries1,'  into the  line series. The commented out data is what the API returns.

// var dataseries1 = {"Id":4,"Legend":"Label","Description":"Description","DataSeries":{"Data":[{"X":"22","Y":[26000.0]},{"X":"79","Y":[24000.0]},{"X":"70","Y":[23400.0]},{"X":"34","Y":[22500.0]},{"X":"29","Y":[22050.0]},{"X":"10","Y":[21666.666666666668]},{"X":"42","Y":[20200.0]},{"X":"32","Y":[19500.0]},{"X":"59","Y":[19000.0]},{"X":"23","Y":[19000.0]},{"X":"80","Y":[18888.888888888891]},{"X":"19","Y":[18750.0]},{"X":"21","Y":[17399.909677419353]},{"X":"40","Y":[16227.272727272728]},{"X":"99","Y":[16028.571428571429]},{"X":"50","Y":[15000.0]},{"X":"11","Y":[14833.333333333334]},{"X":"60","Y":[14272.727272727272]},{"X":"61","Y":[13000.0]},{"X":"89","Y":[13000.0]},{"X":"82","Y":[12611.952380952382]},{"X":"33","Y":[12000.0]}]}};
            var dataseries1 = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "APIURL",
                        dataType: "json",
                    }
                },
                schema: { data: function(response) { return response.DataSeries.Data; } }
            });
            // var dataseries2 = {"Id":5,"Legend":"Label","Description":"Description","DataSeries":{"Data":[{"X":"22","Y":[2]},{"X":"79","Y":[3]},{"X":"70","Y":[5]},{"X":"34","Y":[2]},{"X":"29","Y":[20]},{"X":"10","Y":[3]},{"X":"42","Y":[5]},{"X":"32","Y":[2]},{"X":"59","Y":[3]},{"X":"23","Y":[1]},{"X":"80","Y":[9]},{"X":"19","Y":[4]},{"X":"21","Y":[155]},{"X":"40","Y":[22]},{"X":"99","Y":[420]},{"X":"50","Y":[10]},{"X":"11","Y":[6]},{"X":"60","Y":[11]},{"X":"61","Y":[1]},{"X":"89","Y":[1]},{"X":"82","Y":[21]},{"X":"33","Y":[1]}]}};
            var dataseries2 = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "APIURL",
                        dataType: "json",
                    }
                },
                schema: { data: function(response) { return response.DataSeries.Data; } }
            });
            $("#chart").kendoChart({
                title: { text: "TITLE" },
                dataSource: dataseries1,
                series: [
                    { type: "column", field: "Y[0]", name: "NAME", axis: "LABEL", visibleInLegend: false },
                    { type: "line", name: "NAME", visibleInLegend: false, axis: "LABEL", data: [ 2, 3, 5, 2, 20, 3, 5, 2, 3, 1, 9, 4, 155, 22, 420, 10, 6, 11, 1, 1, 21, 1 ]  }
                ],
                categoryAxis: { field: "X", title: { text: "LABEL" }, axisCrossingValue: [0, 99999999] },
                valueAxis: [
                    { name: "LABEL", title: { text: "UNITS" } },
                    { name: "LABEL", title: { text: "UNITS" } }
 
                ],
                tooltip: { visible: true }
            });


Thanks in advance,
Jamie
Jamie
Top achievements
Rank 1
 answered on 24 Jul 2013
2 answers
148 views
Hi, I am having a problem with the groupping of the telerik grid, in firefox is working, in IE8 is infinity loading, and it trows the error:

Line: 8
Error: 'aggregates' is null or not an object
 'length' is null or not an object


  @( Html.Kendo().Grid(Model)

                   .Name("Grid")
                   .ClientDetailTemplateId("inventoryTemplate")

                   .DataSource(ds => ds.Ajax()
                                   //TODO: Problem in here
                                   .Group(g => g.Add(c => c.GradeCode))
                                   .PageSize(50)
                                   
                                   .Sort(sort => {
                                       sort.Add(p => p.SizeThick).Ascending();
                                       sort.Add(p => p.SizeLength).Ascending();
                                       sort.Add(p => p.SizeWidth).Ascending();
                                       })
                                             //.Aggregates(aggregates =>
                                             //{
                                             //    aggregates.Add(x => x.GradeID);
                                             //})
                                    
                                   .Model(m =>
                                   {
                                       m.Id(p => p.StockID);
                                       m.Field(p => p.QuantityToEnquiry).DefaultValue(1);
                                   })
                           .Read(r => r.Action("Read", "Home"))
                   )

                        .ToolBar(toolBar =>
                                   toolBar.Custom()
                                       .HtmlAttributes(new { id = "sendEnquiry" })
                                       .Text("Send Enquiry")

                               )
                           .ToolBar(toolBar =>
                                       toolBar.Custom()
                                           .HtmlAttributes(new { id = "clearFilter" })
                                           .Text("Reset Filters")

                                   )
                       .ToolBar(toolBar =>
                           toolBar.Custom()

                               .Text("Export To Excel")
                               .HtmlAttributes(new { id = "export" })

                               .Url(Url.Action("Export", "Home", new { page = 1, pageSize = "~", filter = "~", sort = "~" }))


                       )

                   .Columns(columns =>
                   {
                       columns.Bound("Selected")//p => p.Selected)
                           .Sortable(false)
                           .Filterable(false)


                           .ClientTemplate(


                          "<input type='hidden' name='list.Index' value='#=StockID#'/>" +
                          "<input type='checkbox' id='list_#=StockID#__Selected' name='list[#=StockID#].Selected' value='false'/>"


                       ).Width(5);

                       columns.Bound(p => p.GradeCode).Width(10)
                           .Filterable(false).Sortable(false).HeaderTemplate(@<text>
                              @(Html.Kendo().ComboBox()

                            .DataValueField("GradeCode")
                            .Placeholder("Grade Code")


                                      .DataTextField("GradeCode")
                                      .Name("GradeCode")
                                                  .DataSource(ds => ds.Read(rea => rea.Action("GetGradeCodeList", "Home")))
                                          .Events(ev => ev.Change("onComboGradeCodeChange"))
                              )
                                </text>)

                           .ClientGroupHeaderTemplate("<b class='header-title'>Grade Code</b>: <label class='header-value'>" + "#=value# </label>");

                       columns.Bound(p => p.SizeLength).HeaderHtmlAttributes(
                             new { @class = "filter-class" }
                           ).Width(10).Filterable(true);
                       columns.Bound(p => p.SizeWidth).Width(10);
                       columns.Bound(p => p.SizeThick).Width(10);
                       columns.Bound(p => p.Qty).Width(10);
                       columns.Bound(p => p.WeightKG).Width(15);

                       columns.Bound(p => p.LocationDescriptionShort)
                           .ClientTemplate("#=LocationDescriptionShort# ")
                           .Width(20).Filterable(false).Sortable(false).HeaderTemplate(@<text>

                      @(Html.Kendo().ComboBox()
                      .DataValueField("LocationDescriptionShort")
                      .Placeholder("Location")


                              .DataTextField("LocationDescriptionShort")
                              .Name("LocationDescriptionShort")
                              .DataSource(ds => ds.Read(rea => rea.Action("GetLocationList", "Home")))

                          .Events(ev => ev.Change("onComboLocationChange"))
                      )
                        </text>);


                       columns.Bound(p => p.Opco).Filterable(false).Sortable(false).HeaderTemplate(@<text>
                      @(Html.Kendo().ComboBox()

                      .DataValueField("Opco")
                      .Placeholder("Company")


                      .DataTextField("Opco")
                      .Name("Opco")
                          .DataSource(ds => ds.Read(rea => rea.Action("GetCompanyList", "Home")))

                          .Events(ev => ev.Change("onComboCompanyChange"))
                      )
                        </text>);
                       columns.Bound("QuantityToEnquiry").Filterable(false).Sortable(false)
                           .ClientTemplate("<input class='qtyToEnquiry' type='text' value='1' />");
                        
                      
                   })  
                                                                                                 .Events(ev => { ev.DataBound("onDataBound"); })
                                                                       .Pageable()
                                                                       .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
                                                                       
                )



<script id="inventoryTemplate" type="text/kendo-tmpl">

   @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=StockID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add()
                .Text("Details")
                .Content(
                
                    "<div class='inventory-details'>" +
                        "<ul>" +
                            "<li><label>Full Grade: </label>#= GradeDescription #</li>" +
                            "<li><label>Stock Reference: </label>#= StockRef #</li>" +
                            "<li><label>Cut/Mill Edge: </label>#= MillEdges #</li>" +
                        "</ul>" +
                        "<ul>" +
                            "<li><label>Memo: </label>#= OtherDetails  #</li>" +
                            "<li><label>Vessel: </label>#= Vessel #</li>" +
                            "<li><label>Producer: </label>#= Producer #</li>" +
                            "<li><label>Detailed Location: </label>#= LocationDescription #</li>" +
                        "</ul>" +
                    "</div>"
                );
            })
            .ToClientTemplate())
        

</script>
Petur Subev
Telerik team
 answered on 24 Jul 2013
5 answers
255 views
Can we have a simple example with zoom capabilities of the new 2012.3 features in the chart.
Thanks.
T. Tsonev
Telerik team
 answered on 24 Jul 2013
1 answer
80 views
When a post has a ( or ) in the title, the page errors out when you try to click "mark as answered" As well, that post if in your Account view can't be licked as it's "not found"

http://www.kendoui.com/error-pages/error-500.aspx?aspxerrorpath=/forums/kendo-ui-dataviz/chart/moving-the-category-axis-to-bottom-when-negative-values-are-present-(mvc).aspx

Ralitsa Peneva
Telerik team
 answered on 24 Jul 2013
1 answer
75 views
In many of my posts I can't mark the post as answered. I get a 500 server error:

Here's an example, clicking the Mark as ANswered here throws the error

http://www.kendoui.com/forums/kendo-ui-dataviz/chart/make-columns-fat-when-few-used-in-mvc.aspx

Ralitsa Peneva
Telerik team
 answered on 24 Jul 2013
1 answer
600 views
Hi

I currently have the following but I would like to be able to specify the ranges dynamically using sliders. Can anyone tell me how to implement this?

Note - there will always be four ranges, its just where these start and stop is where I want to regulate.

@(Html.Kendo().RadialGauge()
.Name("testRadialGauge")
.Pointer(pointer => pointer
.Value(0)
.Color("Blue")
)
.Scale(scale => scale
.MinorUnit(200)
.StartAngle(-30)
.EndAngle(210)
.Max(5000)
.Labels(GaugeRadialScaleLabels => GaugeRadialScaleLabels
.Visible(true)
                         )
.Ranges(ranges =>
{
ranges.Add().From(0).To(800).Color("#c20000");
ranges.Add().From(800).To(1600).Color("#ff7a00");
ranges.Add().From(1600).To(2000).Color("#ffc700");
ranges.Add().From(2000).To(5000).Color("green");
})
)
)
            
      
Iliana Dyankova
Telerik team
 answered on 24 Jul 2013
4 answers
55 views
I have a simple set of charts that are in Windows working great under 2013.2. I upgraded to 2013.3 and now the Windows appears and the chart's X and Y axis, legend and labels on the axis appear, but the data is not rendered, the charts are empty. See attached image. It was working fine in 2013.2 but after I ran the 2013.3 update it stopped working. In the html output, the data is there serialized in json, it's just the lines and bars of the chart no longer appear.

I have experimented by removing as much of the settings for a chart and window as I can, but still, no data appears.

    Html.Kendo().Window()
        .Name(windowId)
        .Width(680)
        .Height(430)
        .Title(Model.ChartTitle)
        .Visible(false)
        .Modal(true)
        .Draggable(true)
        .Content(@<text>
                       
@{
    Html.Kendo().Chart<AccountPerformance>(Model.Results)
        .Name("chartPCT")
        .Title("% Return")
        .Series(series =>
                series.Column(model => model.Metrics.Return)
                      .Name(Model.ColumnTitle))
        .ValueAxis(axis => axis.Numeric())
        .CategoryAxis(axis => axis.Date().Categories(model => model.Observation))
        .Render();
 
}

Here's the data Kendo's MVC wrapper writes to HTML:

<div class="k-chart" id="chartPCT"></div><script>
    jQuery(function(){jQuery("#chartPCT").kendoChart({"title":{"text":"% Return"},"series":[{"name":"Month","type":"column","field":"Metrics.Return"}],"categoryAxis":[{"type":"Date","categories":["2013/01/31 00:00:00","2013/02/28 00:00:00","2013/03/31 00:00:00","2013/04/30 00:00:00","2013/05/31 00:00:00"]}],"dataSource":{"schema":{"model":{"fields":{"Granularity":{"type":"number"},"GranularityName":{"editable":false,"type":"string"},"Observation":{"type":"date"},"ObservationDescription":{"type":"string"},"IsTimeSeries":{"type":"boolean"},"Metrics":{"type":"object"},"ObservationDisplay":{"editable":false,"type":"string"}}}},"data":[{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1359619200000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":370505.870000,"NetInvested":494.280000,"Return":2.740981,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"January"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1362038400000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":373901.670000,"NetInvested":284.740000,"Return":0.839149,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"February"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1364713200000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":370930.070000,"NetInvested":0.000000,"Return":-0.794754,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"March"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1367305200000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":361961.050000,"NetInvested":0.000000,"Return":-2.417981,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"April"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1369983600000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":368352.560000,"NetInvested":0.000000,"Return":1.765800,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"May"}]}});});
</script>
 </div><script>
    jQuery(function(){jQuery("#window_Monthly").kendoWindow({"modal":true,"iframe":false,"draggable":true,"pinned":false,"title":"Monthly Performance - Account ","resizable":false,"content":null,"width":680,"height":430,"actions":["Close"]});});
</script>


T. Tsonev
Telerik team
 answered on 24 Jul 2013
2 answers
289 views
Hello,

On a  form submission I am dynamically creating a chart in javascript, using remote datasource (json/GET). When user clicks a "Close" button, I  destroy the chart, and empty the DOM element. When a user submits the form again with different data, I  create the chart again and load it with the new data.

The problem is this: after I  destroyed the chart, when  the form is submitted and I create a chart again - it instantly animates with the previous search data, as if the series have been cached! (Datasource ajax request is shown as Pending at this time on the Network tab in Chrome) Two seconds later, when the ajax request is complete, the chart is refreshed with the new set of data.

Here is my code. Chart creation function:
function createChart(id, search_type, breakdown) {
 
               // Read data from the form
    var data = $('#form-search_analytics').serialize();
 
    $("#loading"+id).show();

    $('#'+id).kendoChart({
        dataSource: {
            transport: {
                read: {
                    url: '<?php echo $this->url('analytics/default', array('controller'=>'index', 'action'=>'ajax-get-chart-data')) ?>?type='+search_type+'&'+data,
                    dataType: "json",
                    type: "GET",
                    cache: false
                }
            }
        },
        dataBound: function(){
            console.log('#loading-'+id);
            $('#loading-'+id).hide();
        },
        seriesClick: function(e) {
            console.log(e.series.name);
            loadSeriesBreakdownPanel(e.series.name, search_type, data);
        },
        title: {
            text: search_type
        },
        legend: {
            position: "right"
        },
        seriesDefaults: {
            type: "area",
            //type: "line"
            stack:true
        },
        series: series[search_type],
        categoryAxis: {
            field: "Date",
            labels: {
                rotation: -30
            }
        },
        valueAxis: {
            labels: {
                format: "N0"
            }
        },
        tooltip: {
            visible: true,
            format: "N0",
            template: "#: series.name #: #: value #"
        }
    });
}
Chart destroy function:
function handleCloseClick() {
 
    $('.analytics-chart.k-chart').each(function(){
        var id = $(this).attr('id');
        var chart = $('#'+id).data("kendoChart");
        chart.destroy();
        $('#'+id).empty();
    });
}
HTML:
<div id="results">
    <div class="chart-panel">
        <h3>Breakdown by Document</h3>
        <div class="analytics-chart" id="chart-Document" data-type="Document"></div>
        <div id="loading-chart-Document"></div>
    </div>
</div>
I am using JQuery 1.9.1 and KendoUI v2013.1.514, in Chrome.

Could you please advise? Thankyou, Kate.
Hristo Germanov
Telerik team
 answered on 24 Jul 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
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
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
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
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?