Questions on Kendo UI for jQuery Forum

1 answer

138 views

My Exemple: http://jsfiddle.net/rhvieira/FkP8z/

To show the error you need follow steps.
1- Click in Edit button
2 - click in the pencil in the first column
3 - type a value into html control and close the window.
4 - click in update button

Now occurs the error, in this step I try update the model, but when i did it the visual has been changed but the internal data is not marked as changed, then when
I send all informations to the server the record is not updated.

When I do the same steps in new record all works are done or when change the first and other column and save this work too.

Best Regards,
Vieira

Grid

answered on 27 Sep 2013

3 answers

93 views

Issue in display a date from JSON data, need to format inside kendo template with dynamic values

I am using dataSource and kendo template to populate a list of details from a api. Below code explain the view and viewmodel to display the data.
View:

<div data-role="view" id="myProjectView" data-title="Products List" data-init="myProjectListViewTemplatesInit">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>

</div>

</header>

<ul id="myProjectCustomListView"></ul>

</div>

<script id="myProjectCustomListViewTemplate" type="text/x-kendo-template">

<h3 class="item-title">Project Name: ${ProjectName}</h3>

<p class="item-info">Created Date: ${CreateDate}</p>

</script>

<script src="scripts/jquery.min.js"></script>

<script src="scripts/kendo.mobile.min.js"></script>

<script src="scripts/viewModel/myProjectsViewModel.js"></script>

<script>var app = new kendo.mobile.Application(document.body);</script>

viewModel - myProjectsViewModel.js

function myProjectListViewTemplatesInit(){

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://127.0.0.1/api/getProjectList",

dataType: "json",

}

},

});

$("#myProjectCustomListView").kendoMobileListView({

dataSource: dataSource,

template: $("#myProjectCustomListViewTemplate").html(),

});

};

The above api will return JSON data like below

[{"ProjectId":2,"ProjectCode":"TestProject","ProjectName":"TestProject","Description":"","CreateDate":"2013-09-13T00:00:00","Owner":"TestProject","StartDate":"2013-09-13T00:00:00","EndDate":"2013-09-13T00:00:00","StatusId":4,"IsActive":true,"ERPCompany":"","TemplateId":0,"DocumentTemplateID":0,"DocMetadataID":null,"IsDeleted":"","ERPCurrency":"$","ProjectMode":"L","DocumentListID":"","RowNum":3,"pagecount-1":null},{"ProjectId":1,"ProjectCode":"TemplateProject","ProjectName":"TemplateProject","Description":"","CreateDate":"2013-09-13T00:00:00","Owner":"Aurigo","StartDate":"2013-09-13T00:00:00","EndDate":"2013-09-13T00:00:00","StatusId":4,"IsActive":true,"ERPCompany":"","TemplateId":0,"DocumentTemplateID":0,"DocMetadataID":null,"IsDeleted":"","ERPCurrency":"$","ProjectMode":"L","DocumentListID":"","RowNum":4,"pagecount-1":null}]

I want to format the date column(CreateDate: 2013-09-13T00:00:00) like 13/09/2013. Help me in this.

General Discussions

answered on 27 Sep 2013

1 answer

162 views

Changing Tab's Content

Hello,
i'm using a TabStrip in which every Tab contains an iframe with a web page with JSON data loaded via AJAX. Inside of the frame i do include plenty of JS and CSS files.

I would like to dinamically change the content of the tab, but i would like to know if it's safe to simply use the remove() call on the Tab or if i need some special actions to make sure to clean everything?

Thanks in advantage.

TabStrip

answered on 27 Sep 2013

2 answers

86 views

Server Error when displaying charts

Hello,

Have done an install of the kendoui.aspnetmvc.2013.2.918.trial.msi package.

Getting a YSOD on any chart with a MajorGridLines(lines => lines.Visible(false)) in it, running the supplied demo app causes issue also, all other dataviz control work fine.

Have reinstalled and also restarted machine, no luck.

Running Windows 8.0, VS 2012.

Is this an issue with the trial distribution?

Many Thanks

Charts

answered on 27 Sep 2013

7 answers

907 views

Show loading image on chart before load

I'm trying to show the "kendo.ui.progress" or just an image over the div before the chart loads the data. I have up too 10 charts on my dashboard at one time so there is a lag between each of them loading and it looks werid with just a blank graph. I'm getting the data from a webservice and I've tried adding an loading-image class to the charts div but nothing I have tried has worked. Can anyone help me out.

this is an example of one of my charts:

var dsOrderHis = null;

$(document).ready(function()

{

args.startDate = startDate;

args.endDate = endDate;

args.filterBy = filterBy;

args.userIds = userIds;

dsOrderHis = new kendo.data.DataSource(

{ transport: { read: { cache: false,

url: appUrl + "/Services/ArgosyDashBoardService.svc/orderHistory",

dataType: "json", contentType: "application/json; charset=utf-8", type: "POST" },

parameterMap: function(options, operation) { return JSON.stringify(args) } },

schema: { data: "OrderHistoryResult" },

change: function() {

var dataCount = $("#LoadOrderHistoryDiv").data("kendoChart").dataSource.view().length;

if (dataCount <= 0) { setTimeout("LoadOrderHistoryHideSvg();", 400) }

else

$("#LoadOrderHistoryDiv svg").each(function() { $(this).fadeIn() });

setTimeout("LoadOrderHistoryAddIcon();", 100) } }

});

$('#LoadOrderHistoryDiv').kendoChart({

theme: currentTheme,

title: { text: 'Order: History' },

dataSource: dsOrderHis, legend: { position: "bottom" },

series: [{ type: "line", field: "YAxis"}],

categoryAxis: { field: "XAxisLabel", labels: { rotation: 42} },

tooltip: { visible: true, template: " #= value # orders placed in #= category # .", padding: 9 },

legend: { visible: false} })

});

//used for data changes

function LoadOrderHistory()

{

var chart = $("#LoadOrderHistoryDiv").data("kendoChart");

args.startDate = startDate;

args.endDate = endDate;

args.filterBy = filterBy;

args.userIds = userIds;

kendo.ui.progress($("#LoadOrderHistoryDiv"), true);

chart.dataSource.read()

}

Charts

answered on 27 Sep 2013

3 answers

159 views

MVC DataSource

Having trouble getting the sytax right to call a controller and populate a dropdownlist usising a DataSource. getting error:0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'Read'
HTML:
<div id="divyear">
        <select id="cboYear">
        </select>

    </div>

  <script>
        $(document).ready(function () {
            var yearsSource = new kendo.data.DataSource()
            .Read()
            .Action("getYears", "Glass");

            $("#cboYear").kendoDropDownList({
                AutoBind: false,
                BindTo: Model.YearsList,
                DataValueField: "Value",
                DataTextField: "Text",
                Change: yearChange,
                DataSource: yearsSource,
                ServerFiltering: true
             })

         });
...
Controller:
      [HttpGet]
        public JsonResult getYears()
        {
            GlassModel gm = new GlassModel();
    //gm.YearsList is a SelectList
            return Json(gm.YearsList, JsonRequestBehavior.AllowGet);
        }
Thanks

Data Source

answered on 27 Sep 2013

1 answer

154 views

How to select time range in a line chart

Hi I am trying to understand how to allow user to select a range of dates for a time series based chart - similar to the navigator in the stock chart. I cannot make sense of the documentation and could find an example of this. Appreciate if some one can show me an example.

Thanks,

Jason

Charts

answered on 27 Sep 2013

2 answers

209 views

Issues using MVVM and calling setOptions...

I have a chart built using MVVM, and am trying to programmatically set the select to and from on the categoryAxis.

I can get this to work using a non-mvvm chart (http://jsbin.com/OXESAyi/2/edit),
but on an MVVM chart the chart just craps out with no console error (http://jsbin.com/ifeZAZU/3/edit).
Even following the sample from http://docs.kendoui.com/api/dataviz/chart#methods-setOptions and just trying to change the theme, does the same thing.

Is there some better way of programmatically setting the select than using the setOptions method ?

Thanks.

Robin

Charts

answered on 27 Sep 2013

3 answers

149 views

Activating a ModalView from Tabstrip

I've noticed that when I try to open a modalview from a tabstrip it appears and disappears right away. However if I create a button on a view and allow it to open the modalview it opens and stays open. Is this a known issue?

ModalView

answered on 27 Sep 2013

6 answers

471 views

How to overlay a vertical marker on a line chart?

Hi I am a newbie to Kendo Dataviz so apologize if this is something that has been answered before. Basically I am constructing a line chart using a time based series and the data is dynamically updated so the axis/values are been updated over time and the graph is refreshed every few seconds. I need to mark certain events at some point of time on the same graph so users can see how these events are correlated to the values been displayed. Ideally these events should be marked as a vertical line overlaid on the graph so the event time and its correlation to the chart data points can be clearly seen.

I have not been able to find a way to do this with Kendo Dataviz. Is there a feature that will allow me to do this or is there a way that I can use to directly access the graph canvas and do some direct drawing?

Thanks and appreciate your help,

Jason

Charts

answered on 27 Sep 2013