Hey, I'm trying to sort the data in the MultiSelectFor, so it can be displayed in alphabetical order.
@(Html.Kendo().MultiSelectFor(model => model.UserIds)
.HtmlAttributes(new { @class = "large" })
.Placeholder("Select users ...")
.DataValueField("Value")
.DataTextField("Text")
.AutoClose(false)
.DataSource(.DataSource(ds => ds.Read("AvailableUsers", "UserApi"))
)
I've searched for this issue and tried some suggested things but with no success:
@(Html.Kendo().MultiSelectFor(model => model.UserIds)
.HtmlAttributes(new { @class = "large" })
.Placeholder("Select users ...")
.DataValueField("Value")
.DataTextField("Text")
.AutoClose(false)
.DataSource(ds => ds.Custom()
.Transport(t => t
.Read(r => r
.Action("AvailableUsers", "UserApi")
.Data("{ any: false }")
)
)
.Sort(s => s
.Add("Value")
.Descending()
))
)
public JsonResult AvailableUsers()
{
var userRepo = new UserRepository(ntfy);
var result = userRepo.GetAll().Select(_ => new SelectListItem
{
Text = string.Format("{0} ({1} {2})", _.Username, _.Firstname, _.Lastname),
Value = _.Id.ToString()
});
return this.Json(result, JsonRequestBehavior.AllowGet);
}
Hello,
I am grouping the data by field "AccountCategoryName". After that, groups are sorted alphabetically. I want to sort the groups by AccountCategoryName. Is that achievable? Here is the code snippet:
@(
Html.Kendo().Grid(Model.Data)
.Name("grid")
.Columns(columns =>
{
columns.Bound(r => r.BudgetDataID).Visible(false);
columns.Bound(r => r.AccountCategoryName).Title(BudgetDataRes.AccountCategory);
columns.Bound(r => r.AccountCategoryID).Visible(false);
columns.Bound(r => r.BudgetPositionName).Title(BudgetDataRes.BudgetPositionName);
columns.Bound(r => r.BudgetPositionID).Visible(false);
columns.Bound(r => r.Year).Title(BudgetDataRes.Year);
columns.Bound(r => r.PlannedValue).Title(BudgetDataRes.PlannedValueBAM).Format(Constants.KendoGridMoneyFormat);
columns.Bound(r => r.FinalValue).Title(BudgetDataRes.FinalValueBAM).Format(Constants.KendoGridMoneyFormat);
})
.ToolBar(toolBar =>
{
toolBar.Save().SaveText(BudgetDataRes.SaveChanges).CancelText(BudgetDataRes.CancelChanges);
toolBar.Excel().Text(BudgetDataRes.ExcelExport);
})
.Editable(r => r.Mode(GridEditMode.InCell))
.Excel(r => r.AllPages(true))
.DataSource(ds => ds
.Ajax()
.Batch(true)
.ServerOperation(true)
.Model(model =>
{
model.Id(r => r.BudgetDataID);
model.Field(r => r.AccountCategoryID).Editable(false);
model.Field(r => r.AccountCategoryName).Editable(false);
model.Field(r => r.AccountTypeID).Editable(false);
model.Field(r => r.BudgetPositionID).Editable(false);
model.Field(r => r.BudgetPositionName).Editable(false);
model.Field(r => r.BudgetDataID).Editable(false);
model.Field(r => r.Year).Editable(false);
model.Field(r => r.MunicipalityID).Editable(false);
model.Field(r => r.PlannedValue).Editable(true);
model.Field(r => r.FinalValue).Editable(false);
})
.Update(r => r.Action("SavePlannedValues", "BudgetData"))
.Sort(r =>
{
r.Add("AccountCategoryID").Ascending();
})
.Group(groups =>
{
groups.Add(r => r.AccountCategoryName);
})
)
)
NVDA Screen reader is not announcing the sorting information for the table headers.
Observations
3. After invoking the table column headers, screen reader should announce the sorting ascending or descending information.
Hi,
I have a kendo grid for MVC and bound columns. I have to format date in one of columns as specified above.(QQ-YYYY)(Quarter Of the year format.) I tried below for followup date, but doesnt work. Please let me know solution that works other than this
@(Html.Kendo().Grid(Model) .Name("grid") .Columns(columns => { columns.Bound(p => p.TeamRank).Title("Team Rank").Hidden(); columns.Bound(p => p.ETA).Title("Forecast").ClientTemplate("#=formatDate(ETA)#"); }
function formatDate(ETA) { var CurrentQuarter = ((ETA.getMonth - 1) / 3) + 1; return CurrentQuarter + "-" + ETA.getFullYear; }
Hi,
I have a Kendo grid on a page that is created using this code in my cshtml file
@(Html.Kendo().Grid<Entity>()
.Name("productsGrid")
.Columns(columns =>
{
columns.Bound(schema => schema.Ns).Width(150)
.Filterable(false).Sortable(false);
columns.Bound(schema => schema.Name).Title("Entity Name").Width(250);
columns.Bound(schema => schema.Desc).Title("Description")
.ClientTemplate("#= preserveDirtyFlag(data, data.Desc) #")
.Filterable(false).Sortable(false);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(true)
.PageSize(100)
.Model(model =>
{
model.Id(entity => entity.Id);
model.Field(entity => entity.Ns).Editable(false);
model.Field(entity => entity.Name).Editable(false);
model.Field(entity => entity.Desc);
})
.Read(read => read.Action("GetEntityList", "Products").Data("getQuery"))
.Events(e => e.RequestStart("onPageChange"))
)
.Events(e => e.DataBound("onDataBound"))
.ClientDetailTemplateId("fieldDescriptions")
)
Everything works perfectly fine on first load.
The pagination works perfectly (have removed the code for that from above). Even the filtering works smoothly. super smooth.
The only issue is with sorting.
---
As the code shows that sorting is enabled on the single column: 'Entity name'
As soon as that column title is clicked in order to sort the data, the browser redirects to a new URL
earlier it was at
/CatalogManager/Descriptions
but after clicking on the 'Entity Name' in order to sort that table, it redirects to:
/CatalogManager/Descriptions/GetEntityList?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc
and then shows the pure JSON output that the GetEntityList controller returns instead of rendering in the grid.
Why does filtering and pagination work well but sorting breaks the page?
---
The amazing thing is, if I remove the '/GetEntityList' from the url manually and just navigate to:
/CatalogManager/Descriptions?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc
Then the table is displayed in its full glory sorted by the required field. So they question is, why does it navigate to the API url and display the raw JSON data in the first place?
Try to use the Drag and Drop to reorder the rows.
I'm stuck in an error that I'm not figuring out.
The error: Uncaught TypeError: Cannot read property 'insert' of undefined
The line: grid.datasource.insert(newIndex, dataItem );
I'm sure the datasource has data, since the "console.log(dataItem)" returns the object model
var Material = new kendo.data.Model.define({
id: "NR_position",
fields: {
NR_position: { type: "number" },
CD_Material: { type: "number" },
NM_Material: { type: "string" }
}
});
var Controller = {
dataSource: {
ListMat: new kendo.data.DataSource({
transport: { read: { url: matList, type: "POST" } },
model: Material,
dataType: "json",
url: "data/person.json"
})
},
init: function () {
var grid = $("#grdMatOrder").kendoGrid({
dataSource: Controller.dataSource.ListMat,
columns: [
{ field: "NR_position", title: "Order" },
{ field: "CD_Material", title: "Code" },
{ field: "NM_Material", title: "Name" }
]
}).data("kendoGrid");
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: function (element) {
var table = $('<tr colspan=4" class="placeholder></ tr>'), hint;
table.append(element.clone());
table.css("opacity", 0.7)
return table;
},
change: function (e) {
var skip = grid.dataSource.skip(),
oldIndex = e.oldIndex + skip,
newIndex = e.newIndex + skip,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
console.log(dataItem)
grid.dataSource.remove(dataItem);
grid.datasource.insert(newIndex, dataItem );
}
});
}
};
$(document).ready(function () {
Controller.init();
});
I have a project that uses Kendo UI version 2019 R3 SP 1.
I got some issues when I do the sorting on the content that contains rich text editor (RTE).
I made some demo in the dojo (https://dojo.telerik.com/@septovan_nalysa/IsEgIxAQ)
You can open the demo try to move one of 2 contents.
The issues are the RTE that you moved:
1. becomes like a read-only/disabled field;
2. has empty value.
I tried to change the Kendo UI version 2021 R1 SP2 but I'm still facing the same issues.
Does anyone can help me?
Thanks.
In the attached below, I don't want an Empty to be dragged to another Empty. But anything else is allowed.
Is there an undo event?
Thanks