In my Autocomplete I need to show grouped items, but groups have to be sorted non-alphabetically.
As the Autocomplete doesn't have such option, I tried using the serverGrouping option, but I guess I'm doing something wrong.
In fact the list of groups and items is correctly displayed (see attached picture #1), but typing any character in the input shows the NO DATA FOUND message (see attached picture #2 - typing "c" should show "Coffee" and "Cake"). Additionally items sorting doesn't seem to work.
This is the Autocomplete and its DataSource initialization code:
var
dataSource =
new
kendo.data.DataSource({
transport: {
read: {
url:
"xxxxxxxxxxxxxxxxxxxxxx"
,
dataType:
"json"
}
},
schema: {
groups:
'groups'
,
},
serverGrouping:
true
,
group: {
field:
"category"
,
},
sort: { field:
"name"
, dir:
"asc"
}
});
$(
"#destinationIn"
).kendoAutoComplete({
dataTextField:
"name"
,
height: 400,
placeholder:
"Ovunque"
,
dataSource: dataSource,
});
This is the json data returned by the server call:
{
"groups"
:[
{
"field"
:
"category"
,
"value"
:
"Beverages"
,
"items"
:[
{
"name"
:
"Lemonade"
},
{
"name"
:
"Tea"
},
{
"name"
:
"Coffee"
}
]
},
{
"field"
:
"category"
,
"value"
:
"Seafood"
,
"items"
:[
{
"name"
:
"Salmon"
},
{
"name"
:
"Mackerel"
}
]
},
{
"field"
:
"category"
,
"value"
:
"Desserts"
,
"items"
:[
{
"name"
:
"Ice cream"
},
{
"name"
:
"Cake"
}
]
}
]
}
Why the Autocomplete doesn't seem to work? Am I missing something in the Autocomplete settings, or DataSource settings, or JSON being sent by the server?
And why the sorting of items doesn't work?
Hello,
I'm trying to change the time dynamically for each day and each employee individual.
I've achieved that for all Views except the timlineMonth!
So every time I change the business hours dynamically, then the timelineMonth View does not work and one of these errors appear in the chrome devtools
kendo.all.js:113735 Uncaught TypeError: Cannot read property 'children' of undefined
OR
Uncaught TypeError: Cannot read property 'end' of undefined
I took the first Dojo example from you :
https://www.telerik.com/forums/how-to-set-business-hours-day-wise#6omvyHlQFkWOQVe1OTWdnw
and edited it to reproduce the issue:
https://dojo.telerik.com/aqekoJAG
steps to reproduce the issue:
1- change the time from the droplist (select) above the scheduler
2- change the view to timelineMonth
3- open debugger (e.g. devtools console) to see one of the error that I mentioned above
Thanks in advance
K.Ramadan
Hey,
I have a problem displaying texts that have multiple lines in my columns (text bound to a database and linebreaks are cr lf).
In the grid the texts are displayed in a single line.
My intuition would be to use a column template as I haven't found a way to configure columns to show multiple lines. But I don't know how this template would have to look like.
Could you help me with this?
Hello me and my team are trying to achieve a horizontal scroll within the expanded details view of a grid. Once the user clicks on a carrot and expands to see additional details within a grid there are input boxes and dropdowns formatted in columns. The width of these columns that hold the input boxes/dropdowns stretch beyond the page view and in order to see the right side of the screen the user must scroll all the way to the bottom of the grid and use the horizontal scroll. What we want to achieve is placing a horizontal scroll inside of the expanded view so the user can scroll without having to go all the way to the bottom and then scroll to the right.
Please note I'm talking about the content inside the expanded view and not the grid.extendReadOnly feature which already comes with the horizontal scroll out of the box. Some of the things I already tried are putting overflow-x: scroll scss within the class and apply it to the form that is essentially the content in the expanded view. I also wrapped the form into another container div which didn't work either. Any ideas on how my team and I can accomplish this? Thank you.
Hi All,
I need a feature to implement to transpose a grid (i.e. displaying tabular data in the flip axis so rows becomes columns and vice versa).
Can I know whether KendoUI provides such functionality to show the grid vertically as the example?
Name Age City
Marius 35 Kristiansand
Brian 37 Grimstad
Tom 38 Arendal
And show it as:
Name Marius Brian Tom
Age 35 37 38
City Kristiansand Grimstad Arendal
Hi team !
I'm trying to work with the inline edit mode, but I can't manage to call my controller's method when a value is changed.
My grid is diplayed correctly, and I can click on the edit button, that makes the update and cancel button appear. Cancel works fine, but Update doesn't. In fact, both buttons are doing the exact same thing : making me leave edit mode.
.Update(update => update.Action("EditingInline_Update", "PeriodesRecueil"))
I hoped this line to call my "EditingInline_Update" method in my "PeriodesRecueil" controller, but it doesn't.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, PeriodeRecueilViewModel prVm)
{
return Json(new { });
}
Here is my html
@model List<
PeriodeRecueilViewModel
>
@(Html.Kendo().Grid(Model)
.Name("gridHistoPeriodesRecueil")
.NoRecords("Aucune période de récueil n'a été trouvée.")
.Columns(columns =>
{
columns.Bound(l => l.dateDebut)
.Title("Date de début")
.Width(300)
.ClientTemplate("<
div
class=#:hasErrorDateDebut?'orangeBack':''#>" +
"<
div
class=#:isActive?'greenBack':''#>" +
" #=kendo.toString(dateDebut,'dd / MM / yyyy')# " +
"</
div
>" +
"</
div
>")
.HeaderHtmlAttributes(new { style = "text-align:center;" })
.Filterable(filterable => filterable
.Extra(false)
.Messages(m => m.Info("Afficher les lignes dont la date..."))
.Operators(operators => operators
.ForDate(dt => dt.Clear()
.IsEqualTo("est...")
.IsGreaterThanOrEqualTo("est ultérieure à ...")
.IsLessThanOrEqualTo("est antérieure à ...")))
)
.EditorTemplateName("Date");
columns.Bound(l => l.dateFin)
.Title("Date de fin")
.Width(300)
.ClientTemplate("<
div
class=#:hasErrorDateFin?'orangeBack':''#> " +
"#=kendo.toString(dateFin,'dd / MM / yyyy')# " +
"</
div
>")
.HeaderHtmlAttributes(new { style = "text-align:center;" })
.Filterable(filterable => filterable
.Extra(false)
.Messages(m => m.Info("Afficher les lignes dont la date..."))
.Operators(operators => operators
.ForDate(dt => dt.Clear()
.IsEqualTo("est...")
.IsGreaterThanOrEqualTo("est ultérieure à ...")
.IsLessThanOrEqualTo("est antérieure à ...")))
)
.EditorTemplateName("Date");
columns.Template(@<
text
></
text
>)
.Title("États")
.Width(125)
.ClientTemplate("# if(hasErrorDateDebut || hasErrorDateFin) {# <
div
class
=
'k-icon k-i-warning'
></
div
> #} # " +
"# if(isActive) {# <
div
class
=
'k-icon k-i-doughnut'
></
div
> #} # " +
"# if(hasHappened) {# <
div
class
=
'k-icon k-i-clock'
></
div
> #} #")
.HeaderHtmlAttributes(new { style = "text-align:center;" });
columns.Command(command =>
{
command.Edit().Text(" ").IconClass("k-icon k-i-edit").Visible("hasNotHappened").UpdateText(" ").CancelText(" ");
command.Custom("cmdAnnuler").Text(" ").Click("cmdAnnuler").IconClass("k-icon k-i-close").Visible("hasNotHappenedAndNotToday");
})
.Title("Actions")
.Width(125)
.HeaderHtmlAttributes(new { style = "text-align:center" })
.HtmlAttributes(new { @class = "actions" });
})
.Events(events => events
.DataBound("onDataBound"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.HtmlAttributes(new { style = "text-align:center" })
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(l => l.idPeriodePaie))
.Update(update => update.Action("EditingInline_Update", "PeriodesRecueil"))
.ServerOperation(false)
.PageSize(10))
.Pageable()
.Filterable()
)
No error in the console. Any idea of what I'm doing wrong ?
Thank you,
Valentin