or
1 answer
233 views
How I can use it correctly. All accent are broken when I use this culture with calendar. A got wierd caracter instead. I try to open the file directly from the browser, same thing. But file open with "normal" text editor are OK. Do I need to set the charset in the js file? I try to set it to UTF8 in the <script> definition without success.
Thanks
Thanks
Atanas Korchev
Telerik team
answered
on
14 Aug 2013
10 answers
390 views
Hi,
I am evaluating Kendo UI framework to build cross device app!
I've put together a few Views and it looks good so far.
As I am trying it out on iPad, I noticed that the elastic scrolling behavior gives the app non-native like behavior!
If the web app is flicked past the bottom or top of the page, the page would elastically get tugged away from
the header or footer bar (essentially bottom/top of the screen).
How do I prevent the elastic scrolling in views so that the app behaves like native app (without elastic scrolling)?
I've tried setting the view scroller elatic property false on the view's data-init function and that didn't help.
Here is the two lines I've put in data-init function:
var scroller = e.view.scroller;
scroller.setOptions({ elastic: false });
(Found a few suggestions on the internet like blocking touch move on body, setting overflow to hidden on body
and none of them helped!).
Please let me know how to prevent elastic scrolling.
Thanks.
B.Manohar
I am evaluating Kendo UI framework to build cross device app!
I've put together a few Views and it looks good so far.
As I am trying it out on iPad, I noticed that the elastic scrolling behavior gives the app non-native like behavior!
If the web app is flicked past the bottom or top of the page, the page would elastically get tugged away from
the header or footer bar (essentially bottom/top of the screen).
How do I prevent the elastic scrolling in views so that the app behaves like native app (without elastic scrolling)?
I've tried setting the view scroller elatic property false on the view's data-init function and that didn't help.
Here is the two lines I've put in data-init function:
var scroller = e.view.scroller;
scroller.setOptions({ elastic: false });
(Found a few suggestions on the internet like blocking touch move on body, setting overflow to hidden on body
and none of them helped!).
Please let me know how to prevent elastic scrolling.
Thanks.
B.Manohar
Petyo
Telerik team
answered
on
14 Aug 2013
1 answer
53 views
I have just had to upgrade to kendoui.aspnetmvc.hotfix.2013.2.813.commercial to fix some other issues with this control. However it now appears that the CustomTemplate is not displaying in the toolbar. I did note that in this package the dll is still version 2013.2.729.340, however it did fix my bug from the original 2013.2.729 major build.
Are you able to have a look at this and tell me if there is a quick fix
That didnt work although it should.
Are you able to have a look at this and tell me if there is a quick fix
@(Html.Kendo().Editor() .Name("sectionBlockEditor") .HtmlAttributes(new { style = "width: 900px;height:530px" }) .Tools(tools => tools .Clear() .Formatting() .CustomTemplate(ct => ct.Template("<label for='templateTool' style='vertical-align:middle;'>Background:</label> <select id='templateTool'><option value=''>none</option><option value='\\#ff9'>yellow</option><option value='\\#dfd'>green</option></select>")) ) )
Alex Gyoshev
Telerik team
answered
on
14 Aug 2013
1 answer
58 views
Hey guys. I'm new to Kendo UI and basically to MVC framework but that is the tool I have to use so... :)
In the example below IEnumerable is used to simply enumerate over entire data stored in Close.
But if I send data as a List
and later would like to access specific data(not all data like here
http://demos.kendoui.com/dataviz/bar-charts/grouped-data.html
In the example below IEnumerable is used to simply enumerate over entire data stored in Close.
But if I send data as a List
@model List<Kendo.Mvc.Examples.Models.StockDataPoint>
and later would like to access specific data(not all data like here
series.Column(model => model.Close)
) how could I do that exactly ?
http://demos.kendoui.com/dataviz/bar-charts/grouped-data.html
@model IEnumerable<Kendo.Mvc.Examples.Models.StockDataPoint><div class="chart-wrapper"> @(Html.Kendo().Chart(Model) .Name("chart") .Title("Stock Prices") .DataSource(dataSource => dataSource .Read(read => read.Action("_StockData", "Scatter_Charts")) .Group(group => group.Add(model => model.Symbol)) .Sort(sort => sort.Add(model => model.Date).Ascending()) ) .Series(series => { series.Column(model => model.Close) .Name("#= group.value # (close)"); }) .Legend(legend => legend .Position(ChartLegendPosition.Bottom) ) .ValueAxis(axis => axis.Numeric() .Labels(labels => labels .Format("${0}") .Skip(2) .Step(2) ) ) .CategoryAxis(axis => axis .Categories(model => model.Date) .Labels(labels => labels.Format("MMM")) ) ) </div>3 answers
218 views
Here is my page with the code and the script, basically the validator does not validate the date. I don't know how to make the control get validated by the custom rule. You can do control F $("#service").kendoValidator to see the where the validation is called and configured.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Edit Service - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/KendoUI/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/KendoUI/styles/kendo.metro.min.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<input type="hidden" id="RootUrl" value="http://localhost:64728/"/>
<div class="page">
<div class="header">
<div class="title">
<h1>
Provider Site Maintenance
</h1>
</div>
</div>
<div style="clear: both;">
</div>
<div id="mainMenu">
</div>
<div class="main">
<h2>Edit Service</h2>
<input type="hidden" id="serviceId" value="12" />
<input type="hidden" id="getServiceUrl" value="/Services/GetService"/>
<input type="hidden" id="saveServiceUrl" value="/Services/SaveService"/>
<form id="service" name="service" action="">
<fieldset>
<legend>Service</legend>
<input type="hidden" name="serviceId" id="serviceId" data-bind="value: serviceId"
class="k-textbox" />
<label for="serivceName">
Service Name :
</label>
<input type="text" id="serivceName" name="serviceName" data-bind="value: serviceName"
class="k-textbox" required="true" maxlength="255" validationmessage="Service Name is required" />
<span class="k-invalid-msg" data-for="serivceName"></span>
<br />
<label for="serviceDescription">
Service Description :
</label>
<input type="text" id="serviceDescription" name="serviceDescription" data-bind="value: serviceDescription"
class="k-textbox" required="true" maxlength="1000" validationmessage="Service Description is required" />
<span class="k-invalid-msg" data-for="serviceDescription"></span>
<br />
<label for="serviceCode">
Service Code :
</label>
<input type="text" id="serviceCode" name="serviceCode" data-bind="value: serviceCode" maxlength="20"
class="k-textbox" validationmessage="Service Code is required" required="true" />
<span class="k-invalid-msg" data-for="serviceCode"></span>
<br />
<label for="baseCostAmount">
Cost :
</label>
<input type="text" id="baseCostAmount" name="baseCostAmount" required="true" min="1"
data-bind="value: baseCostAmount" validationmessage="Cost Must be greater than 0" />
<br/>
<label for="newEffectiveDate">
Effective Date :
</label>
<input id="newEffectiveDate" name="newEffectiveDate" required="true" type="date" data-bind="value: newEffectiveDate"
/>
<span data-bind="text: newEffectiveDateMessage" class="warning"> </span>
</fieldset>
<br/>
<button class="k-button" id="editServiceSaveButton" data-bind="click : validateAndSave">Save</button>
<span style="margin-left:5px; color:green" id="saveComplete" name="saveComplete" data-bind="text : SaveComplete, visible : ShowSaveComplete" ></span>
<span style="margin-left:5px; color:red" id="saveError" name="saveError" data-bind="text : SaveError, visible : ShowSaveError" ></span>
</form>
</div>
</div>
<script src="/Content/KendoUI/JS/jquery.min.js"></script>
<script src="/Content/KendoUI/JS/kendo.web.min.js"></script>
<script src="/Scripts/Views/Common.js"></script>
<script src="/Scripts/Views/Shared/_Layout.js"></script>
<script>
$(document).ready(function () {
//local variables
var getServiceUrl = $("#getServiceUrl").val();
var saveServiceUrl = $("#saveServiceUrl").val();
var serviceId = $('#serviceId').val();
var viewModel = kendo.observable({
toJSON: function () {
// This hack is because .net controllers don't like dates.
// call the original toJSON method from the observable prototype
var result = kendo.data.ObservableObject.prototype.toJSON.call(this);
result.currentEffectiveDate = common.dateFormat(this.get("currentEffectiveDate"), "mm/dd/yyyy HH:MM:ss");
result.newEffectiveDate = common.dateFormat(this.get("newEffectiveDate"), "mm/dd/yyyy HH:MM:ss");
return result;
},
saveComplete: '',
showSaveComplete: function () {
return this.get("saveComplete") != '';
},
saveError: '',
showSaveError: function () {
return this.get("saveError") != '';
},
isNew: null,
serviceId: null,
serviceName: "",
serviceDescription: "",
baseCostAmount: null,
currentEffectiveDate: null,
newEffectiveDate: null,
newEffectiveDateMessage: function () {
return "Effective date must be greater than or equal to " + common.getDateString(this.get("currentEffectiveDate"));
},
validateAndSave: function (e) {
e.preventDefault();
var validator = $("#service").kendoValidator().data("kendoValidator");
if (!validator.validate())
return false;
$.ajax({
type: "POST",
url: saveServiceUrl,
data: viewModel.toJSON(),
cach: false
}).done(function (result) {
if (!result.Success) {
viewModel.set("saveComplete", '');
viewModel.set("saveError", "Update Failed " + result.Message);
} else {
viewModel.set("SaveError", '');
viewModel.set("currentEffectiveDate", viewModel.get("newEffectiveDate"));
viewModel.set("caveComplete", 'Save Successful');
}
});
return false;
}
});
//local functions
function initControls() {
$("#baseCostAmount").kendoNumericTextBox({
format: "c",
decimals: 2
});
$('#newEffectiveDate').kendoDatePicker({ format: "MM/dd/yyyy" });
$("#service").kendoValidator({
rules: {
//implement your custom date validation
dateValidation: function (e) {
var currentDate = Date.parse($(e).val());
//Check if Date parse is successful
if (!currentDate) {
return false;
}
return true;
}
},
messages: {
//Define your custom validation massages
required: "Date is required message",
dateValidation: "Invalid date message"
}
});
}
function loadViewModelFromController() {
$.ajax({
type: "GET",
contentType: 'application/json',
url: getServiceUrl,
data: { id: serviceId },
cach: false
}).done(function (o) {
viewModel.set("isNew", o.IsNew);
viewModel.set("serviceId", o.ServiceId);
viewModel.set("serviceName", o.ServiceName);
viewModel.set("serviceDescription", o.ServiceDescription);
viewModel.set("serviceCode", o.ServiceCode);
viewModel.set("baseCostAmount", o.BaseCostAmount);
viewModel.set("newEffectiveDate", new Date(common.getDateString(o.NewEffectiveDate)));
viewModel.set("currentEffectiveDate", new Date(common.getDateString(o.CurrentEffectiveDate)));
kendo.bind($("#service"), viewModel);
});
}
function addNew() {
viewModel.set("isNew", true);
kendo.bind($("#service"), viewModel);
}
//Init the form
initControls();
if (serviceId > 0) {
loadViewModelFromController();
} else {
addNew();
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Edit Service - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/KendoUI/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/KendoUI/styles/kendo.metro.min.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<input type="hidden" id="RootUrl" value="http://localhost:64728/"/>
<div class="page">
<div class="header">
<div class="title">
<h1>
Provider Site Maintenance
</h1>
</div>
</div>
<div style="clear: both;">
</div>
<div id="mainMenu">
</div>
<div class="main">
<h2>Edit Service</h2>
<input type="hidden" id="serviceId" value="12" />
<input type="hidden" id="getServiceUrl" value="/Services/GetService"/>
<input type="hidden" id="saveServiceUrl" value="/Services/SaveService"/>
<form id="service" name="service" action="">
<fieldset>
<legend>Service</legend>
<input type="hidden" name="serviceId" id="serviceId" data-bind="value: serviceId"
class="k-textbox" />
<label for="serivceName">
Service Name :
</label>
<input type="text" id="serivceName" name="serviceName" data-bind="value: serviceName"
class="k-textbox" required="true" maxlength="255" validationmessage="Service Name is required" />
<span class="k-invalid-msg" data-for="serivceName"></span>
<br />
<label for="serviceDescription">
Service Description :
</label>
<input type="text" id="serviceDescription" name="serviceDescription" data-bind="value: serviceDescription"
class="k-textbox" required="true" maxlength="1000" validationmessage="Service Description is required" />
<span class="k-invalid-msg" data-for="serviceDescription"></span>
<br />
<label for="serviceCode">
Service Code :
</label>
<input type="text" id="serviceCode" name="serviceCode" data-bind="value: serviceCode" maxlength="20"
class="k-textbox" validationmessage="Service Code is required" required="true" />
<span class="k-invalid-msg" data-for="serviceCode"></span>
<br />
<label for="baseCostAmount">
Cost :
</label>
<input type="text" id="baseCostAmount" name="baseCostAmount" required="true" min="1"
data-bind="value: baseCostAmount" validationmessage="Cost Must be greater than 0" />
<br/>
<label for="newEffectiveDate">
Effective Date :
</label>
<input id="newEffectiveDate" name="newEffectiveDate" required="true" type="date" data-bind="value: newEffectiveDate"
/>
<span data-bind="text: newEffectiveDateMessage" class="warning"> </span>
</fieldset>
<br/>
<button class="k-button" id="editServiceSaveButton" data-bind="click : validateAndSave">Save</button>
<span style="margin-left:5px; color:green" id="saveComplete" name="saveComplete" data-bind="text : SaveComplete, visible : ShowSaveComplete" ></span>
<span style="margin-left:5px; color:red" id="saveError" name="saveError" data-bind="text : SaveError, visible : ShowSaveError" ></span>
</form>
</div>
</div>
<script src="/Content/KendoUI/JS/jquery.min.js"></script>
<script src="/Content/KendoUI/JS/kendo.web.min.js"></script>
<script src="/Scripts/Views/Common.js"></script>
<script src="/Scripts/Views/Shared/_Layout.js"></script>
<script>
$(document).ready(function () {
//local variables
var getServiceUrl = $("#getServiceUrl").val();
var saveServiceUrl = $("#saveServiceUrl").val();
var serviceId = $('#serviceId').val();
var viewModel = kendo.observable({
toJSON: function () {
// This hack is because .net controllers don't like dates.
// call the original toJSON method from the observable prototype
var result = kendo.data.ObservableObject.prototype.toJSON.call(this);
result.currentEffectiveDate = common.dateFormat(this.get("currentEffectiveDate"), "mm/dd/yyyy HH:MM:ss");
result.newEffectiveDate = common.dateFormat(this.get("newEffectiveDate"), "mm/dd/yyyy HH:MM:ss");
return result;
},
saveComplete: '',
showSaveComplete: function () {
return this.get("saveComplete") != '';
},
saveError: '',
showSaveError: function () {
return this.get("saveError") != '';
},
isNew: null,
serviceId: null,
serviceName: "",
serviceDescription: "",
baseCostAmount: null,
currentEffectiveDate: null,
newEffectiveDate: null,
newEffectiveDateMessage: function () {
return "Effective date must be greater than or equal to " + common.getDateString(this.get("currentEffectiveDate"));
},
validateAndSave: function (e) {
e.preventDefault();
var validator = $("#service").kendoValidator().data("kendoValidator");
if (!validator.validate())
return false;
$.ajax({
type: "POST",
url: saveServiceUrl,
data: viewModel.toJSON(),
cach: false
}).done(function (result) {
if (!result.Success) {
viewModel.set("saveComplete", '');
viewModel.set("saveError", "Update Failed " + result.Message);
} else {
viewModel.set("SaveError", '');
viewModel.set("currentEffectiveDate", viewModel.get("newEffectiveDate"));
viewModel.set("caveComplete", 'Save Successful');
}
});
return false;
}
});
//local functions
function initControls() {
$("#baseCostAmount").kendoNumericTextBox({
format: "c",
decimals: 2
});
$('#newEffectiveDate').kendoDatePicker({ format: "MM/dd/yyyy" });
$("#service").kendoValidator({
rules: {
//implement your custom date validation
dateValidation: function (e) {
var currentDate = Date.parse($(e).val());
//Check if Date parse is successful
if (!currentDate) {
return false;
}
return true;
}
},
messages: {
//Define your custom validation massages
required: "Date is required message",
dateValidation: "Invalid date message"
}
});
}
function loadViewModelFromController() {
$.ajax({
type: "GET",
contentType: 'application/json',
url: getServiceUrl,
data: { id: serviceId },
cach: false
}).done(function (o) {
viewModel.set("isNew", o.IsNew);
viewModel.set("serviceId", o.ServiceId);
viewModel.set("serviceName", o.ServiceName);
viewModel.set("serviceDescription", o.ServiceDescription);
viewModel.set("serviceCode", o.ServiceCode);
viewModel.set("baseCostAmount", o.BaseCostAmount);
viewModel.set("newEffectiveDate", new Date(common.getDateString(o.NewEffectiveDate)));
viewModel.set("currentEffectiveDate", new Date(common.getDateString(o.CurrentEffectiveDate)));
kendo.bind($("#service"), viewModel);
});
}
function addNew() {
viewModel.set("isNew", true);
kendo.bind($("#service"), viewModel);
}
//Init the form
initControls();
if (serviceId > 0) {
loadViewModelFromController();
} else {
addNew();
}
});
</script>
</body>
</html>
Petyo
Telerik team
answered
on
14 Aug 2013
1 answer
142 views
Hi, is it possible to change the autoSync value after initialization?
Something like:
Thanks in advance
Something like:
_dataSource.autoSync = true;Thanks in advance
Kiril Nikolov
Telerik team
answered
on
14 Aug 2013
3 answers
318 views
Hello,
In my SPA (not mobile) application i'm using the Kendo Router for navigation within the application.
The Router works perfect except for 1 problem i'm running into.
When someone navigates to an invalid route it's caught through the routeMissing method to prevent navigating to invalid routes.
So navigating from http://mysite/#/myView to http://mysite/#/myViewtest results in the routeMissing being called and the navigation is prevented.
However, the browsers address bar shows the address which was navigated to (http://mysite/#/myViewtest).
If the user hits the browsers refresh button after that the application starts again and tries to navigate to the wrong address, which now results in a blank page.
Trying to navigate back to the old route in the routeMissing method doesn't work, since it didn't acually change for the router (defaultPrevented).
Is there any way to navigate to the old route or update the address bar with the old route ?
Thanks in advance.
In my SPA (not mobile) application i'm using the Kendo Router for navigation within the application.
The Router works perfect except for 1 problem i'm running into.
When someone navigates to an invalid route it's caught through the routeMissing method to prevent navigating to invalid routes.
So navigating from http://mysite/#/myView to http://mysite/#/myViewtest results in the routeMissing being called and the navigation is prevented.
However, the browsers address bar shows the address which was navigated to (http://mysite/#/myViewtest).
If the user hits the browsers refresh button after that the application starts again and tries to navigate to the wrong address, which now results in a blank page.
Trying to navigate back to the old route in the routeMissing method doesn't work, since it didn't acually change for the router (defaultPrevented).
Is there any way to navigate to the old route or update the address bar with the old route ?
Thanks in advance.
Petyo
Telerik team
answered
on
14 Aug 2013
1 answer
165 views
I include globalize.js and globalize.culture.xx-XX.js befor Kendo UI scripts. Then I try execute "Globalize.culture("xx-XX")" and "kendo.culture("xx-XX")" in all possible combinations. From http://docs.kendoui.com/getting-started/framework/globalization/overview: "When globalize.js is registered before Kendo scripts, then Kendo will use globalize.js features instead of Kendo Globalization."
What does it mean? Does it mean for example that I can miss kendo.culture.xx-XX.js and DatePicker will still show localized months and week days? I try - it does not. So when, where and how Kendo UI uses globalize.js?
What does it mean? Does it mean for example that I can miss kendo.culture.xx-XX.js and DatePicker will still show localized months and week days? I try - it does not. So when, where and how Kendo UI uses globalize.js?
Petyo
Telerik team
answered
on
14 Aug 2013
1 answer
105 views
Hi,
I created an Icenium mobile app that utilizes Kendo UI and Parse.com. I have already developed a Facebook Login function for the app. Now i Need the following additional functions:
- post a message ("Event") with some additional fields and select a Location via Google Maps
- search for events at a specific Location or at the current Location, result should be Shown either as a list or in map
- when launching the app, it Show automatically all Events near the current Position in a map
- when selecting an Event, it should Show up in a Detail view
Is there anybody out there who could accomplish this? (paid of course)
Best Regards
Jörg
I created an Icenium mobile app that utilizes Kendo UI and Parse.com. I have already developed a Facebook Login function for the app. Now i Need the following additional functions:
- post a message ("Event") with some additional fields and select a Location via Google Maps
- search for events at a specific Location or at the current Location, result should be Shown either as a list or in map
- when launching the app, it Show automatically all Events near the current Position in a map
- when selecting an Event, it should Show up in a Detail view
Is there anybody out there who could accomplish this? (paid of course)
Best Regards
Jörg
David Silveria
Top achievements
Rank 1
Rank 1
answered
on
13 Aug 2013
4 answers
368 views
I've extended a suggestion to my purposes from this post:
http://www.kendoui.com/forums/kendo-ui-web/grid/grid-header-filtering-row-that-contains-1-element-for-each-column-in-grid-with-the-same-width.aspx
I've gotten it to work very well with my grid implementation. The only problem I've run into that I'm not sure how to solve so far is that when a column is dragged to the group header it aligns the headers with my filter row just fine, but if you then go to page 2, the headers are suddenly misaligned though the filter row stays in place.
You can see what I mean in this jsfiddle. It seems the <th> element that's added to the header row to indent the rows and align the grid is being removed somehow
Any suggestions about how to correct this behavior would be greatly helpful.
Edit: Actually, paging doesn't seem to matter. Just whenever the grid repaints as it also happens when filtering after grouping or grouping a second column.
http://www.kendoui.com/forums/kendo-ui-web/grid/grid-header-filtering-row-that-contains-1-element-for-each-column-in-grid-with-the-same-width.aspx
I've gotten it to work very well with my grid implementation. The only problem I've run into that I'm not sure how to solve so far is that when a column is dragged to the group header it aligns the headers with my filter row just fine, but if you then go to page 2, the headers are suddenly misaligned though the filter row stays in place.
You can see what I mean in this jsfiddle. It seems the <th> element that's added to the header row to indent the rows and align the grid is being removed somehow
Any suggestions about how to correct this behavior would be greatly helpful.
Edit: Actually, paging doesn't seem to matter. Just whenever the grid repaints as it also happens when filtering after grouping or grouping a second column.
