Hi,

I have a Kendo Grid as per the code below

     @(Html.Kendo().Grid<ReportCompetencyViewModel>()
         .Name("listGrid")
         .BindTo(Model.ReportCompetency.OrderBy(x => x.DisplayOrder))
         .Columns(columns =>
         {
             columns.Bound(c => c.Code).ClientHeaderTemplate("Code");
             columns.Bound(c => c.DisplayName).ClientHeaderTemplate("Description");
             columns.Bound(c => c.IEC).ClientHeaderTemplate("IEC");
             columns.Bound(c => c.Active)
                 .ClientTemplate("#if(Active) {# <i class='fas fa-check'></i>  # } else {# <i class='fas fa-times'></i> #} #")
                 .ClientHeaderTemplate("Active")
                 .HtmlAttributes(new { @class = "text-center" })
                 .Width(100);
         })
         .Pageable(pageable => pageable
             .Refresh(true)
             .PageSizes(true)
             .ButtonCount(5))
         .Sortable()
         .Filterable()
         .Groupable()
         .NoRecords(n => n.Template("<p>There are no records to display.</p>"))
         .HtmlAttributes(new { style = "width:100%;" })
         .Selectable(selectable => selectable
             .Mode(GridSelectionMode.Single)
             .Type(GridSelectionType.Row))
         .Events(events => events
             .Change("lu.onChange")
         )
         .Pageable(p =>
         {
             p.PageSizes(new[] { 5, 10, 30, 50, 100 });
         })
         .DataSource(dataSource => dataSource
             .Ajax()
             .Group(g => g.Add(x => x.IEC))
             .PageSize(50)
             .ServerOperation(false)
             .Read(r => r.Action("RefreshCompetenciesGridData", "ReportLookup").Data("lu.sendAntiForgery"))
         )
    )

I have a partial that has a sortable element in it also as below.
    @(Html.Kendo().Sortable()
              .For($"#{@Model.GridId}")
              .Filter("table > tbody > tr")
              .Cursor("move")
              .PlaceholderHandler("sg.placeholder")
              .ContainerSelector($"#{Model.GridId} tbody")
              .Events(events => events.Change("sg.onChange"))
    )

The sortable element works great, the majority of the time.
When performing a re-order, opening a kendo window and performing a save action the grid is refreshed with the updated data in a TypeScript class as per code below.
    save = (model: any) => {
    var _self = this;
   
    var girdOrderArray = new Array();
   
    if ($("#grid-reorder-warning").length && $("#grid-reorder-warning").is(":visible")) {
        var grid = $("#" + this.girdName).data("kendoGrid");
        var dataItems = grid.dataItems() as any;
        $.each(dataItems,
            (idx: number, dataItem) => {
                var di = idx + 1;
                var id = dataItem.id === undefined ? dataItem.Id : dataItem.id; // Changing the display order appears to also change the dataItem from Id to id.
                girdOrderArray.push({ Id: id, DisplayOrder: di });
            });
   
    }
   
    var da = new Tmsp.AjaxDataAccessLayer(Tmsp.Enums.AjaxCallType.Post,
        Tmsp.Enums.AjaxDataType.Json,
        this.saveUrl,
        JSON.stringify(model),
        "application/json; charset=utf-8",
        { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
        true, true);
   
    da.ajaxCall(data => {
   
        _self.closeWindow();
       
  if ($("#grid-reorder-warning").is(":visible")) {
            grid.dataSource.read().then(() => {
                var dataItems = grid.dataItems();
                var arr = new Array() as any;
                $.each(dataItems,
                    (idx, dataItem: any) => {
                        var id = dataItem.Id === null ? dataItem.id : dataItem.Id;
                        var gridOrderObj = jQuery.grep(girdOrderArray,
                            function (gridOrderObj: any) { return gridOrderObj.Id == id });
                        dataItem.set("DisplayOrder", gridOrderObj[0].DisplayOrder);
                    });
                grid.dataSource.sort({ field: "DisplayOrder", dir: "Desc" });
            });
        } else {
            _self.refreshGrid();
        }
   
        return false;
   
    }, (xhr, status, errorThrown) => {
        console.log(xhr);
        console.log(status);
        console.log(errorThrown);
    });
   
    return false;
    } 

This saves, and reorders teh grid accordingly by the DisplayOrder which is great and what I need. However, when I try and reorder anything else after this the reordered item gives me the new index, but isnt actually changed on the grid.
However, if I refresh the grid through other means, the re-oredering works perfectly.

So, my question, as I need to keep the display order as is prior the the save, how do I acheive this.

Things I have tried
 - Updating the display order on the refreshed gird - suspected cause of the problem.
 - Created a new controller that returns the partial and inisialises the control again -  No effect
 - Resetting the uid (not a preferred option, but thought I would try and see if it was uid) specific. - No effect




 

Is there a way to display a customized message when the dataSource bound to a DDL TagHelper is empty?

Hi,

  I am using ImageBrowser as a standalone widget without Editor.

When the PanelBar is expanded & ImageBrowser is loaded, the file icon is missing. Please see the attached picture.

Can you let me know how to display the file icon?

I am migrating things from the "forms" world to more and more Core based projects.  I keep hitting an a wall which seems to boil down to missing documentation.  Can someone point me in the correct direction?

My needs start with the basic need to configure the layout of a given form for the user upon initial display.  They will make various selections and press the infamous "update" button when done.  In the broadest sense of things I need to do something like:

That looks simple.  I have figured out how to get the Id of the panel control and have a valid object.  For the life of me I cannot find anything that documents how to find/use the items object.  I know it exists but how of find the item at index "x" seems beyond me.  Based upon the documentation I have found it seems I must find a reference to the item at index "x", then set its expanded property to true/false.  Since I cannot find the index, I am up a creek without the paddle.

I would appreciate any pointers someone can send my way.

On the positive side:  My conversion activities have shown me the power of the telerik core tools.  My initial thoughts has some misgivings however experience has shown they are surprisingly powerful.  I am amazed with the amount of code being replaced by what is now standard functionality.  Working with a framework, as opposed to against it, is a simple but important concept to learn.  Kudos to the Telerik/Progress team.

Hello,

I have a signalr bound grid. The grid has custom popup editor with Tabstrip. First tab - upload picture, or show picture based on ImageUrl field of currently edited record.

So, I'm trying to access:

 - @Model.ImageUrl  - it throws null exception and breaks the page overall, or

- @Html.ValueFor(model=>model.ImageUrl) - it is always null, but I'm sure there are values in database

I have tried the same, just to test it, with for example Firstname field from the same model - the same result

@Html.LabelFor(model=>model.ImageUrl) and @Html.EditorFor(model=>model.ImageUrl) work fine, I can see the label and the correct value inside a textbox.

<div class="row">
            <div>
                @Html.ValueFor(model => model.Firstname) @*this is always null, but I need a value*@
            </div>
            <div>
              @* @Model.Firstname  this breaks whole page with null exception*@
            </div>
            <div>
                @Html.EditorFor(model => model.Firstname) @*this works correctly*@
            </div>
        </div>

/////////// below is the code, why I need the value

<div id="pictures" class="picture dropZoneElement">
                @if (Html.ValueFor(model => model.ImageUrl) != null)
                {
                    <div class="k-edit-label">
                        <img src="Files/Images/" + @Html.ValueFor(model => model.ImageUrl) />
                    </div>
                }
                else
                {
                    <div class="textWrapper">
                        <p><span>+</span>Add Image</p>
                        <p class="dropImageHereText">Drop image here to upload</p>
                    </div>
                }
            </div>

Kind regards

DC

I noticed in one of my forms that suddenly a validation message appears for a dropdownlist. The message could not be found in kendo.messages.xx-XX.js nor was it a validation message from ASP.NET Core (I use my own, localized form of "Required" etc.attribute messages). I found the message inside the file "Exceptions.resx" in the source of Kendo MVC:

How can I translate this into another language?

Regards
Heiko

Hello,

I am experiencing a problem applying culture to the validation messages in my editable grid. I experience the exact same problem as in the following demo:  https://demos.telerik.com/aspnet-core/grid/globalization?culture=fr-FR

As a user I would expect the validation message to be localized but they don't seem to be.

To reproduce,

1. Set the culture to anything other then english,
2. Edit a row,
3. Empty the "Name" column,
4. click out of the textbox to activate validation and notice that the validation message displayed is in english.

Any help on this will be greatly appreciated!

Thank you

I create a disabled DropDownList with the following code:

Based on another DropDownList I change the value of this list:

The change is reflected on the UI, but not on the underlying Model which still has the old value. As soon as I enable the DropDownList everything works fine. What I expect is that the value gets changed no matter if the dropdown is enabled or disabled.

Regards
Heiko

Hi,

i am using ASP.NET Core with a KENDO Grid which calls a Razor Page handler.

For performance reasons, the Grid is pageable, filterable and sortable.

Now we want the DataSourceRequest on the server to directly filter the MongoDB query. I am using "AsQueryable()" on the IMongoCollection, which i thought works nicely with the KENDO DataSourceResult method. 

But the speed of the MongoDB query is always slow. It does not matter if i filter the grid for just one result or if i display all results (paged).

Is this the correct way to use KENDO Grid with MongoDB "database-filtering"?

I am using the following code:

Client

Server

Hello,

I use a template column to have a Kendo style Checkbox in my grid but this is not bind to the underlying boolean value...
with a "normal" Checkbox this is possible with JavaScript but the tsyled Checkbox uses a Label for Styling... (see Picture)

how to do this with the styled checkboxes?