Telerik Forums
UI for ASP.NET MVC Forum
1 answer
26 views

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);
 }
Anton Mironov
Telerik team
 answered on 13 Nov 2023
0 answers
66 views

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);
            })
        )
    )

Rijad
Top achievements
Rank 1
 asked on 23 Aug 2023
0 answers
92 views

NVDA Screen reader is not announcing the sorting information for the table headers.

Observations

Screen reader is not announcing the sorting information for the table headers.
1. After giving the table shortcut key 'T' key NVDA should announce as column 1 User alias data, column headers with buttons are sorted (or)
2. When we land on the table header and pressing enter to sort, Screen reader should announce as 'User alias data column header column 1 with buttons are sortable.

3. After invoking the table column headers, screen reader should announce the sorting ascending or descending information.

 

 

viji
Top achievements
Rank 1
 asked on 04 Apr 2023
0 answers
86 views
How to do sorting and filtering of child nodes in .net mvc treeview using telerik?
 @(Html.Kendo().TreeView()
            .Name("treeview")
            .ExpandAll(true)
            .DataSpriteCssClassField("sprite")
            .BindTo((IEnumerable<FolderViewVM>)Model.FolderList, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<FolderViewVM>(binding => binding.ItemDataBound((item, doc) =>
                {
                    item.Text = doc.Name;
                    item.Id = doc.Id.ToString();
                })
                .Children(doc => doc.Children));

            })
Robin
Top achievements
Rank 1
 updated question on 04 Jan 2023
0 answers
215 views

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;
}
Sunitha
Top achievements
Rank 1
 asked on 02 Aug 2022
1 answer
83 views
HI I am using asp.net mvc .net (not core). Creating the grid.  The grid has multiple columns I only want to have sorting in 2 columns.  HOw I can do that?
Yanislav
Telerik team
 answered on 26 Nov 2021
2 answers
159 views

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?

Kapeel
Top achievements
Rank 1
Iron
 answered on 03 Nov 2021
0 answers
189 views

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();
});

        


        

anna
Top achievements
Rank 1
 asked on 09 Jul 2021
2 answers
46 views

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.

Anton Mironov
Telerik team
 answered on 02 Apr 2021
1 answer
79 views

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

Tsvetomir
Telerik team
 answered on 04 Nov 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?