Questions on Kendo UI for jQuery Forum

0 answers

109 views

how can i raise my event in my directive's kendogrid toolbar template?

I am using angularJS and kendoUI and create my own directive using by kendo. in grid directive I use kendogrid that it have a toolbar. i fill toolbar with html template but it cant trigger my function with ng-click.
here my sample code

directive.js
app.directive('fonixGrid', [function () {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: {
gridtoolbar :"="
},
template: '<div id="kendogrid" ></div>',
link: function (scope, element, attrs) {
element.kendoGrid({
toolbar: '<a ng-click=gridtoolbar.click()></a>',
editable: attrs.editable ? attrs.editable : true,
scrollable: attrs.scrollable ? attrs.scrollable : true,
sortable: attrs.sortable ? attrs.sortable : true,
};
}]);

Contoller.js
app.register.controller('userViewModelController', ["$scope",
, function ($scope) {
var onclick = function () {
console.log('clicked');
};
$scope.mytoolbar = { click: onclick };
}]);

index.html
<html>
<div>
<div>
<fonix:grid gridtoolbar ="mytoolbar " />
</div>
</div>
</html>

Templates

asked on 16 Feb 2014

8 answers

306 views

Problem with Endless scrooling on listview

Hello, I'm having some trouble at setting up endless scrolling in a listview fed by a local Datasource. Here is the code that I'm using for that purpose:

// The model of the Datasource schema
var SiteModel = kendo.data.Model.define({
id: "SiteUId",
fields: {
"SiteName": {
type: "string"
},
"isDefault": {
type: "number"
}
}
});

// The Datasource
var dataSites = new kendo.data.DataSource({
batch: true,
data: userSession.sites,
schema: {
model: SiteModel
},
sort: [
{ field: "isDefault", dir: "desc" },
{ field: "SiteName", dir: "asc" }
],
pageSize: 20
});

// The ListView
var sitesList = $("#sites-picker").kendoMobileListView({
dataSource: dataSites,
template: kendo.template($("#myListTemplate").html()),
selectable: true,
loadMore: true,
click: function (e) ...
}).data("kendoMobileListView");

// The html code
<ul id="sites-picker"></ul>

I'm attaching the screenshot of the rendered view, which is not correctly showed. Thanks.

General Discussions

answered on 16 Feb 2014

7 answers

370 views

Remote Views + querystrings: odd behaviour

Hi!

Relatively new to KendoUI, we're currently evaluating this along with a few other frameworks for html5-mobile-development.
So far, I really like the KendoUI approach, with templating and datasourcing etc. But, one thing sticks out as a little odd.

When using Remote Views with querystrings, I'm experiencing odd behaviour. First I thought it was down to caching, so I started adding a random querystring to each remote view link, but that only furthered the problem.

Inspecting the Html DOM with firefox DOM Inspector or firebug lead me to the right track however:

A remote view is normally just added once, and re-used. I see the point of that. Until it has querystrings - then each unique permutation is added as a DOM element (due to mismatching data-url?) , leading to massive problems. Not only in things not properly working ( i.e. trying to $("#elem").kendoMobileListView( ) will / may fail, or populate a listview in a completely different, hidden, view) but it also leads to unnecessary memory usage, and general browser slowness. Depending on the complexity of the views, naturally.

However, it was relatively easy to fix. I just had to make sure I killed off any divs, script templates or other unique stuff in the event handler run on the views data-hide event. ( $(elm).destroy(); $(scriptelm).destroy(); )

I've attached an illustration. Green = behaving normally. Red boxes - not behaving as I would have presumed. All views except the 'root' view are remote.

But, my question: Is this behaviour by design or is it a bug? I had figured that once a view had been loaded, it would be re-used, data-init would be used to clean/scrub and fetch new query string parameters and then data-show would take care of data-binding etc.

General Discussions

answered on 16 Feb 2014

2 answers

610 views

timezone always utc

I am using the scheduler with ASP.NET MVC. I set the timezone value to "Est/UTC" yet the start and end DateTime values are always using "Utc" as the "Kind". I have also tried by NOT setting the timezone value. I have been looking through these posts for the past couple of hours and found nothing that works. I want the DateTime values that get passed back through the controller to tell me the correct local time for that user or the correct "adjusted" value in UTC. To repeat, I am getting the correct local time but reported as UTC. That means a 5pm event gets saved as a noon event for someone in EST.

Is there some setting I am missing? This seems like it should be obvious but I am stuck.

in controller.cs

public ActionResult Schedule()

{

var now = DateTime.Now;

ViewBag.StartTime = new DateTime(now.Year, now.Month, now.Day, 7, 0, 0, DateTimeKind.Local);

ViewBag.TimeZone = "Etc/UTC";

return View();

}

in view.cshtml

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()

.Name("scheduler")

.Date(DateTime.Now)

.StartTime((DateTime)ViewBag.StartTime)

.Timezone((string)ViewBag.TimeZone)

.AllDaySlot(false)

.Editable(e =>

{

e.Create(true);

e.Destroy(true);

e.Update(true);

})

.Height(590)

.Views(views =>

{

views.DayView();

views.WeekView(v => v.Selected(true));

views.MonthView();

views.AgendaView();

})

.DataSource(d => d

.Model(m =>

{

m.Id(f => f.TaskID);

m.Field(f => f.TaskID);

m.Field(f => f.Title);

m.Field(f => f.ProviderId);

m.Field(f => f.Start);

m.Field(f => f.StartTimezone);

m.Field(f => f.EndTimezone);

m.Field(f => f.Description);

m.Field(f => f.RecurrenceID);

m.Field(f => f.RecurrenceRule);

m.Field(f => f.RecurrenceException);

m.Field(f => f.OwnerID);

m.Field(f => f.IsAllDay);

})

.Read(read => read.Action("Read", "Scheduler").Data("additionalData"))

.Create(create => create.Action("Create", "Scheduler").Data("additionalData"))

.Update(update => update.Action("Update", "Scheduler"))

.Destroy(destroy => destroy.Action("Destroy", "Scheduler"))

.ServerOperation(true)

)

Scheduler

answered on 15 Feb 2014

3 answers

185 views

why is create called for existing events again

Here is a weird one that I can't seem to figure out. I have a scheduler that already shows other events. My problem is that whenever I create a new event or delete an existing event the "create" method gets called for the existing events again. So every time I do a single "create" all my existing events get duplicated. The closest thing I could find in this forum is to make sure I have the "batch" turned off but that doesn't make any difference. Is there some setting I am missing? My code is below...

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()

.Name("scheduler")

.Date(DateTime.Now)

.StartTime((DateTime)ViewBag.StartTime)

.Timezone((string)ViewBag.TimeZone)

.AllDaySlot(false)

.Editable(e =>

{

e.Create(true);

e.Destroy(true);

e.Update(true);

})

.Height(590)

.Views(views =>

{

views.DayView();

views.WeekView(v => v.Selected(true));

views.MonthView();

views.AgendaView();

})

.DataSource(d => d

.Model(m =>

{

m.Id(f => f.TaskID);

m.Field(f => f.TaskID);

m.Field(f => f.Title);

m.Field(f => f.ProviderId);

m.Field(f => f.Start);

m.Field(f => f.StartTimezone);

m.Field(f => f.EndTimezone);

m.Field(f => f.Description);

m.Field(f => f.RecurrenceID);

m.Field(f => f.RecurrenceRule);

m.Field(f => f.RecurrenceException);

m.Field(f => f.OwnerID);

m.Field(f => f.IsAllDay);

})

.Read(read => read.Action("Read", "Scheduler").Data("additionalData"))

.Create(create => create.Action("Create", "Scheduler").Data("additionalData"))

.Update(update => update.Action("Update", "Scheduler"))

.Destroy(destroy => destroy.Action("Destroy", "Scheduler"))

.ServerOperation(true)

)

public virtual JsonResult Create([DataSourceRequest] DataSourceRequest request, TaskViewModel task, int? providerId)

{

...

return Json(new[] { task }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

}

Scheduler

answered on 15 Feb 2014

4 answers

318 views

Declaratively initialize datetimepicker with data-role="datetimepicker"

I want to declaratively add a datetimepicker.

This is how I add one now:

<!DOCTYPE html>

<html>

<head>

<title>datetimepicker test</title>

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

<script src="js/kendo.web.js"></script>

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

<script src="js/cultures/kendo.culture.sv-SE.js"></script>

<link href="css/kendo.mobile.flat.css" rel="stylesheet" />

<link href="css/kendo.common.css" rel="stylesheet" />

<link href="css/kendo.default.css" rel="stylesheet" />

<script>

var app = new kendo.mobile.Application(document.body,

{

skin: 'flat',

initial: '#test'

});

window.kendoMobileApplication = app;

$(function()

{

$("#datetimepicker").kendoDateTimePicker({ value: new Date() });

});

</script>

</head>

<body>

<div id="test" data-role="view">

<input id="datetimepicker">

</div>

</body>

</html>

This is how I want to add one:

<!DOCTYPE html>

<html>

<head>

<title>datetimepicker test 2</title>

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

<script src="js/kendo.web.js"></script>

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

<script src="js/cultures/kendo.culture.sv-SE.js"></script>

<link href="css/kendo.mobile.flat.css" rel="stylesheet" />

<link href="css/kendo.common.css" rel="stylesheet" />

<link href="css/kendo.default.css" rel="stylesheet" />

<script>

var app = new kendo.mobile.Application(document.body,

{

skin: 'flat',

initial: '#test'

});

window.kendoMobileApplication = app;

</script>

</head>

<body>

<div id="test" data-role="view">

<input id="datetimepicker" data-role="datetimepicker">

</div>

</body>

</html>

However, no picker is initialized.

Shouldn't there be at least one example on how to do this on api reference pages?

DatePicker

answered on 15 Feb 2014

5 answers

326 views

Menu not rendering properly in IE

I am having issues with the kendo menu not rendering properly in IE. When the menu opens, I can see the border of the menu, and transparent contents. If I hover over the transparent area, then the items in that container render.

Also - using a kendo menu within a kendo window in IE - the menu border again renders with transparent content. However, when moving the mouse cursor over the content area, the items DO NOT render properly.

In both of these cases, the menu renders correctly in Chrome.

Any ideas or known workarounds?

Menu

answered on 15 Feb 2014

6 answers

101 views

Tabstrip window.innerHeight and km-active-state problem

My first problem is:
Sometime the window.innerHeight is just 548px and not 568px (iPhone 5 with statusbar plugin)
this leads to a padding/margin on the bottom of 20px.

my app start code looks this:

var options = {

initial: 'Start-view',

skin: 'ios7',

statusBarStyle: 'black-translucent',

init: function() {

console.log(window.innerHeight);

$(document.body).height(window.innerHeight);

}

};

window.App.mobile = new kendo.mobile.Application(document.body, options);

StatusBar.overlaysWebView(true);

navigator.splashscreen.hide();

normally on device it work but out of 10, 2,5 times it doesn't work.

my Second problem is:
I have a tabstrip with 3 buttons, all works except the last one.
When I click it, it does not get the km-active-state class. instead the view before got the km-active-state class.
when i click the 2nd time on the last view it will select(activate) it.

i thought i found the bug/problem, i did a rollback till it worked. and then i change bit for bit till it did not work.
The culprit was Datasource I used one datasource a 2nd time in my app. (on view init i did var ds = new kendo.ui.DataSourceGift;)

So i change everything too init all Datasource at app start.

but now its starts again when i reload the app (location.reload();) [is for multilingual purpose]
its 50% that it works/not working.

Do you guys have an idea what the problem is?

its hard to post code because im using requirejs

General Discussions

answered on 15 Feb 2014

2 answers

483 views

French Translation

I share it, it might be helpful for some

$.extend(kendo.ui.Pager.fn.options.messages, {

display: "{0} - {1} de {2} éléments",

empty: "Aucun élément à afficher",

page: "Page",

of: "de {0}",

itemsPerPage: "éléments par page",

first: "Aller à la première page",

previous: "Aller à la page précédente",

next: "Aller à la page suivante",

last: "Aller à la denière page",

refresh: "Rafraîchir"

});

$.extend(kendo.ui.FilterMenu.fn.options.messages, {

info: "Voir les éléments correspondant aux critères suivants:", // sets the text on top of the filter menu

filter: "Filtrer", // sets the text for the "Filter" button

clear: "Enlever les filtres", // sets the text for the "Clear" button

// when filtering boolean numbers

isTrue: "est vrai", // sets the text for "isTrue" radio button

isFalse: "est faux", // sets the text for "isFalse" radio button

//changes the text of the "And" and "Or" of the filter menu

and: "et",

or: "ou bien",

selectValue: "- Choisir -"

});

$.extend(kendo.ui.FilterMenu.fn.options.operators, {

string: {

contains: "contient",

eq: "est",

doesnotcontain: "ne contient pas",

neq: "n'est pas",

startswith: "commence par",

endswith: "se termine par"

},

number: {

eq: "est égal à",

neq: "est différent de",

gte: "est supérieur ou égal",

gt: "est supérieur",

lte: "est inférieur ou égal",

lt: "est inférieur"

},

date: {

eq: "est",

neq: "n'est pas",

gte: "est après ou est",

gt: "est après",

lte: "est avant ou est",

lt: "est avant"

},

enums: {

eq: "est",

neq: "n'est pas"

},

});

$.extend(kendo.ui.ColumnMenu.fn.options.messages, {

sortAscending: "Trier par ordre croissant",

sortDescending: "Trier par ordre décroissant",

filter: "Filtre",

columns: "Colonnes"

});

$.extend(kendo.ui.Groupable.fn.options.messages, {

empty: "Faites glisser l'entête d'une colonne ici pour grouper les résultats sur cette colonne"

});

$.extend(kendo.ui.Editor.fn.options.messages, {

bold: "Gras",

italic: "Italique",

underline: "Souligné",

strikethrough: "Barré",

superscript: "Exposant",

subscript: "Indice",

justifyCenter: "Centrer le texte",

justifyLeft: "Aligner le texte à gauche",

justifyRight: "Aligner le texte à droite",

justifyFull: "Justifier",

insertUnorderedList: "Insérer une liste",

insertOrderedList: "Insérer une liste ordonnée",

indent: "Vers l'intérieur",

outdent: "Vers l'extérieur",

createLink: "Insérer un lien hypertexte",

unlink: "Supprimer le lien",

insertImage: "Insérer une image",

insertHtml: "Insérer du HTML",

fontName: "Famille de police",

fontNameInherit: "Police par défaut",

fontSize: "Taille de police",

fontSizeInherit: "Taille par défaut",

formatBlock: "Format",

style: "Styles",

emptyFolder: "Dossier vide",

uploadFile: "Envoyer",

orderBy: "Trier par: ",

orderBySize: "Taille",

orderByName: "Nom",

invalidFileType: "Le fichier sélectionné \"{0}\" est invalide. Les formats supportés sont {1}.",

deleteFile: "\u00cates-vous s\u00fbr \"{0}\"?",

overwriteFile: "Un fichier avec le nom \"{0}\" existe déjà dans ce dossier. Voulez-vous le remplacer?",

directoryNotFound: "Dossier introuvable.",

imageWebAddress: "Adresse Web",

imageAltText: "Texte alternatif",

linkWebAddress: "Adresse Web",

linkText: "Texte",

linkToolTip: "Aide",

linkOpenInNewWindow: "Ouvrir le lien dans une nouvelle fen\u00eatre",

dialogInsert: "Insérer",

dialogButtonSeparator: "ou",

dialogCancel: "Annuler"

});

$.extend(kendo.ui.Validator.fn.options.messages, {

required: "{0} est obligatoire",

pattern: "{0} n'est pas valide",

min: "{0} doit être supérieur ou égal à {1}",

max: "{0} doit être inférieur ou égal à {1}",

step: "{0} n'est pas valide",

email: "{0} n'est pas une adresse email valide",

url: "{0} n'est pas une URL valide",

date: "{0} n'est pas une date valide"

});

$.extend(kendo.ui.ImageBrowser.fn.options.messages, {

uploadFile: "Envoyer",

orderBy: "Ordonner par",

orderByName: "Nom",

orderBySize: "Taille",

directoryNotFound: "Aucun dossier de ce nom n'a été trouvé",

emptyFolder: "Dossier vide",

deleteFile: 'Êtes-vous sûr de vouloir supprimer "{0}"?',

invalidFileType: 'Le fichier sélectionné "{0}" n\'est pas valide. Les types de fichier supprotés sont {1}.',

overwriteFile: 'Un fichier portant ce nom "{0}" existe déjà dans le dossier courant. Voulez-vous le remplacer?',

dropFilesHere: "déposer les fichiers ici pour les envoyer",

search: "Rechercher"

});

General Discussions

answered on 15 Feb 2014

7 answers

1.5K+ views

New version: Hidden Guid Id defaults to empty string instead of Guid.Empty

After updating to 2012.2.913, our updatable grids stopped being able to save records to the data source. ModelState.IsValid was returning false for "Id", saying "The Id field is required". The Id field is a Guid which is auto-populated by our NHibernate data model after a record is added, so we found this puzzling.

Our simplest grids were like this:

@(Html.Kendo().Grid<VMMudType>()
      .Name("vMudTypeGrid")
      .DataSource(datasource => datasource
                                    .Ajax()
                                    .Model(model => model.Id(m => m.Id))
                                    .Create(r => r.Action("Insert", "MudTypeGrid"))
                                    .Read(r => r.Action("Select", "MudTypeGrid"))
                                    .Update(r => r.Action("Update", "MudTypeGrid"))
                                    .Destroy(r => r.Action("Delete", "MudTypeGrid"))
      )
      .Columns(columns =>
      {
          columns.Bound(a => a.Name);
          columns.Command(command =>
          {
              command.Edit();
              command.Destroy();
          });
      })
      .Editable(ed => ed.Mode(GridEditMode.InLine))
      .Sortable()
      .Filterable()
      .ToolBar(commands => commands.Create())
      )

Data model had only the two fields, "Id", which was a Guid, and "Name", which was a string.

Looking at the actual save requests for the pre-upgrade grid versus the upgraded version in Fiddler, I saw the following difference in the POST results: The old version sent "sort=&group=&filter=&Id=00000000-0000-0000-0000-000000000000&Name=Water-Based", while the new version sent "sort=&group=&filter=&Id=&Name=Water-Based". The generated Javascript for the grid also showed this difference: model:{id:"Id",fields:{Name:{type:"string"},Id:{type:"object",defaultValue:"00000000-0000-0000-0000-000000000000"}}} for the older version, vs. "model":{"id":"Id","fields":{"Name":{"type":"string"},"Id":{"type":"string"}}} for the new version.

The change that broke things seems to have been in TypeExtensions.cs, where ToJavaScriptType(this type) had a new clause for Guids:

if (type.GetNonNullableType() == typeof(Guid))
{
    return "String";
}

There are workarounds for this. I changed our Insert grid controller to specifically not bind on Id:

public virtual ActionResult Insert([DataSourceRequest] DataSourceRequest request, [Bind(Exclude = "Id")] TViewModel vm)

It was also possible to work around this by changing ".Model(model => model.Id(m => m.Id))" to
                                    .Model(model =>
                                    {
                                        model.Id(m => m.Id);
                                        model.Field(m => m.Id).DefaultValue(Guid.Empty);
                                    })

But the former will work better with our framework, because we can put it into our grid controller parent class.

I could also have made the change to TypeExtensions to take out the Guid clause, but without knowing more about the rationale for the change, I didn't think I should. What was the reason for having Javascript treat Guids like strings, and would there be a way to do this which didn't break things when adding new records with Guids that are auto-populated by the data model?

Aaron Humphrey
Pleasant Solutions

Grid

answered on 15 Feb 2014