Telerik Forums
Kendo UI for jQuery Forum
1 answer
100 views
hi guys
i built an app using icenium and kendo mobile. 
one of the views is responsible to upload selected files and upload them to my server.
to do that i use kendo web upload element. in icenium simulator every thing work fine but on my phone, after i select the file, the app behave like it restarting it self and it goes back to square one..
any ideas why?
regards maor
Petyo
Telerik team
 answered on 14 Jun 2013
6 answers
596 views
Hi all

I was looking for a best practice to handle Load/Unload Content and removing widgets.

For example.

1. User clicks a button, an existing tabStrip is Extended by a new tab
2. In the new tab Content gets loaded via an Ajax request
3. The new Content contains an html form with autocomplete, datepicker, Editor elements.
4. The user fills out the form, clicks a button to send serialized form to remote Server via Ajax
5. On success, remove the tab from tabstrip and all widgets that have been initialized on the fly bevor

So until Point 4 its clear to me how to make it. But what is the best way, to remove the new Content and all the widgets, so nothing is left in the Memory?

Thanks for advice.

Duke
Daniel
Telerik team
 answered on 13 Jun 2013
1 answer
91 views
I'm trying to display an image on the page, I'm using javascript to write out the image tag with the source pulled from the data source. When debugging, the value that is being passed is:

<img align='Left' style='width:100px;' alt='sample alt text.' src='http://www.website.com/IMAGE-05185619.jpg>.

But what is in the page is:

&lt;img align='Left' style='width:100px;' alt='sample alt text.' src='http://www.website.com/IMAGE-05185619.jpg&gt;

So when viewing the page, I see the img tag instead of the image.

My code:

<span data-bind="text: myImgFunc"></span>

var model = JSON.parse($('#cg-jsonall').text());
 var viewModel = kendo.observable({
    model: model,
     myImgFunc: function() {
        if (this.get('model.org.org_logo'))
  {
    var img = "<img align='Left' style='width:100px;' alt='" + this.get('model.org.name') + ".' src='http://reach.hillel.org/cache/upload/" + this.get('model.university.univ_picture') + ">";
   
    return img;
  }};
kendo.bind($("span"), viewModel);

Any suggestions?

Thanks.
Elizabeth
Top achievements
Rank 1
 answered on 13 Jun 2013
3 answers
1.2K+ views
Hi Kendo  team,

Scenario:
Let's say I am building a chart (bar, column etc.). The data comes from a datasource and the datasource has grouping applied to it. How can I map series color to a group value. For example, datasource can be something like:
year: 2000, agegroup: group_a, pop: 1000
year: 2000, agegroup: group_b, pop: 1200
year: 2001, agegroup: group_a, pop: 1001
year: 2001, agegroup: group_b, pop: 1201
year: 2002, agegroup: group_a, pop: 1002
year: 2002, agegroup: group_b, pop: 1202

Say I group by 'year' and 'agegroup'. I want to apply series colors mapped to the groups. Also, the groups can be dynamic meaning, I can have group_c, group_d and so on in there returned by the server-side. I also have colors corresponding to a group value already there in the database, meaning group_a - red, group_b - green etc.

Hope I was able to provide sufficient details above.

Thanks,
Amrinder

Iliana Dyankova
Telerik team
 answered on 13 Jun 2013
0 answers
107 views
Hello,

I'm unsure why but the side Pane within a SplitView, containing a view, is only calling it's data-show function once. It is not being called upon navigation to the view a second time. I've stripped the following code down to keep it simple.
<div data-role="splitview" id="events-split-view">
  <div data-role="pane">
    <div data-role="view" data-show="testDataShow">
      Side Pane
    </div>
  </div>
 
  <div data-role="pane" data-layout="main-default">
    <div data-role="view">
      Main Pane
    </div>
        
    <div data-role="layout" data-id="main-default">
      <div data-role="header">
        <div data-role="navbar">
          <a data-role="button" href="#contact-details-view" data-align="right" data-target="_top">Go back</a>
        </div>
      </div>
    </div>
  </div>
</div>
 
<script>                      
    function testDataShow() {
        alert("View's data-show called");
    }
</script>
Solution
The data-show needs to reside on the data-role="splitview" element rather than the view itself.


David
Top achievements
Rank 1
 asked on 13 Jun 2013
7 answers
247 views
I have created an online CodePen Demo: http://codepen.io/DrYSG/pen/wnDxL where I have a Grid bound to a KendoObservable 1-D array. The Array is meant to be (Item, Value) pairs. There are a number of clumsy things here that I would like to clean up.

1. I would love it if you supported Grid's that had Vertical Orientation, so that I could just have display 1-D array, and use the Column Headings for each item: see: http://www.kendoui.com/forums/ui/general-discussions/vertical-grid-property-grid.aspx
2. Doing the lookup for the value and changing it involves hard constants (stateTable[1].Value = foo. Do I have to have a use an index table that translates integers to keys. I.e. var StatusKey = 0, TileCountKey = 1, etc.  (then it would be stateTable[TileCountKey] = 2) Still seems clumsy.
3. This would be especially fragile, if the user could add and delete rows. (batch editing).
4. The KendoObservable.set() is not working for this example. So I am doing a manual trigger, which I saw in a post by Alexander Valchev, but I don't see documentation for trigger() anywhere., is this a hidden (unsupported feature?) This also feels a bit clumsy.
Why is there a scroll bar on my Grid?

Bottom line. It works now, but I want to know if there is something in KendoUI today, that would make this cleaner, and if not, do you have anything in UserVoice planned to fix this up?

Dr.YSG
Top achievements
Rank 2
 answered on 13 Jun 2013
2 answers
219 views
I'm using an EditorTemplate to render the DateTimePicker of kendo. Everything is working fine on Internet Explorer and Firefox, but when testing the site in Chrome, I always receive a validation error on a valid date. (see attachment)

This is my editor template
@model DateTime?
 
@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy").ParseFormats(new List<string> { "dd/MM/yyyy", "MM/dd/yyyy"}))
Inside the _Layout page we register kendo and set the specific culture.

<script src="/Virteo.Fidiem.Presentation.Mvc/Scripts/kendo/2013.1.514/cultures/kendo.culture.nl.min.js"></script>
<script type="text/javascript">
    kendo.culture("nl");
</script>
Any idea why I still get the validation error ?
Kendo version 2013.1.514.340
Jonathan
Top achievements
Rank 1
 answered on 13 Jun 2013
3 answers
632 views
Hi,

This issue has been raised many times but no answer or support is provided till now.

I have Kendo UI Grid Ajax binding with Checkbox column in Client template. I have implemented select all but there is no feature to support checkbox checked when changing paging or sorting. I have downloaded one of solution given by kendo team but that also has same issue. Again attaching that solution with more data and paging. Please provide some solution or let me know if cannot be achieved in Kendo grid?
Dimiter Madjarov
Telerik team
 answered on 13 Jun 2013
3 answers
198 views
I have a line chart that shows datetime-based values in a series. The Json data come gets loaded with an Ajax call. Now I want to show a second series (as a second line) in the same chart. As far as I can see from the examples, in order to get it up and working, the data needs to be present in this way:

- Date (Datetime)
- ValueA (Double)
- ValueB (Double)

The problem is: the data that I need to show is not synchronized, or, in other words, it is recorded independently at unregular intervals, so I don't have the required neat [Date,ValueA,ValueB] packets.
As a workaround I tried the following: in my controller, I fetch the data independently for each series into an object (DateTime Date,Double? ValueA, Double? ValueB). When fetching data for series A, I fill Date and ValueA, whereas ValueB is set to null (not 0). I do the same for series B (and set ValueA as null there). After that, I do a linq union on both collections and order them by date. Now I have both series in a (Date, ValueA, ValueB) model with a common DateTime-basis, where missing values in ValueA or ValueB are set to null, which can be interpolated in the chart. The problem is: the values do not get interpolated but are set to zero, which gives an awful lot of spikes, as there's almost no (Date, ValueA, ValueB) tripel where both values are set. Please see the attached images for clarification.

How can I manage to get this done? Is there a better way to do it?

Below is my JavaScript:

<script>

    function onSelectEnd(e) {
        var stockchart = $("#chart").data("kendoStockChart");
        var navigatorFrom = stockchart._navigator.options.select.from;
        var navigatorTo = stockchart._navigator.options.select.to;
        $("#txtFrom").text(navigatorFrom);
        $("#txtTo").text(navigatorTo);
    }

    function createChart() {
        $('#chart').kendoStockChart({
            dataSource: {
                transport: {
                    read: {
                        url: '/Archive/GetChartData?StationId=@ViewBag.StationId&DataPointId=@ViewBag.DataPointId',
                        dataType: 'json'
                    }
                }
            },
            selectEnd: onSelectEnd,
            title: {
                text: '@ViewBag.ChartTitle'
            },
            dateField: 'date',
            panes: [{
                title: 'Werte'
            }
            ],
            chartArea: {
                background: 'transparent'
            },
            valueAxes: [{
                name: 'T',
                visible: true,
                line: {
                    visible: true
                },
                labels: {
                    format: '{0} @ViewBag.Unit'
                }
                //,plotBands:
                //    [
                //         { from: -100, to: 0, color: "#C9D8FF" },
                //         //{ from: 0, to: 100, color: "#FFB8B8" }
                //    ]
            }],
            categoryAxis: {
                labels:
                    {
                        format: "HH:mm",
                        step: 2,
                        rotation: -90
                    },
                baseUnit: "fit",
                maxDateGroups: $("#chart").width() / 10,
                type: "date"
            },
            series: [
                {
                    axis: 'T',
                    type: 'line',
                    field: 'value',
                    missingValues: 'interpolate'
                },
                {
                    axis: 'T',
                    type: 'line',
                    field: 'value2',
                    missingValues: 'interpolate'
                }
            ],
            navigator: {
                series: {
                    type: 'area',
                    field: 'value',
                    missingValues: 'interpolate'
                },
                select: {
                    to: '@DateTime.Now.ToString("yyyy")/@DateTime.Now.ToString("MM")/@DateTime.Now.ToString("dd") @DateTime.Now.ToString("HH:mm")',
                    from: '@DateTime.Now.AddDays(-1).ToString("yyyy")/@DateTime.Now.AddDays(-1).ToString("MM")/@DateTime.Now.AddDays(-1).ToString("dd") @DateTime.Now.AddDays(-1).ToString("HH:mm")'
                },
                categoryAxis: {
                    labels: {
                        format: 'd. MMMM yyyy',
                        padding: { top: 10 }
                    }
                }

            }
        });
    }

    $(document).ready(function () {
        kendo.culture('@culture');
        setTimeout(function () {
            createChart();
            $('#chart').bind('kendo:skinChange', function (e) {
                createChart();
            });
        }, 1);
    });
</script>

T. Tsonev
Telerik team
 answered on 13 Jun 2013
3 answers
266 views
I am trying to create a grid declaratively with a detail tempate.
I have called the kendo.ns method to change my namespace (kendo-) as to not clash with ko.
Here is the source for the grid:
<div>
     data-kendo-role="grid"
     data-kendo-sortable="false"
     data-kendo-pageable="false"
     data-kendo-scrollable="true"
     data-kendo-detail-template="detailTemplate"
     data-kendo-bind="source: items">
     
</div>
I have a simple template for detailTemplate
<script id="detailTemplate" type="text/kendo-template">
    <h1>Hello</h1>
</script
If I remove the line with the data-kendo-detail-template, the grid displays fine.  However with it in, the grid does not display at all.

Any ideas what might be causing this?

Also, assuming I do get this working, will it be possible to have the template also be defined as a declarative grid using a property of the main grid's data item for its data? Or am I better off doing this in javascript?

thanks,
eric
Alexander Valchev
Telerik team
 answered on 13 Jun 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?