Hi guys,

I have a grid which should display some order information. There are multiple identifiers to find the order so i created an searchbar above the grid. The user can now enter the the order id into this searchbar, hit the search button and an ajax request will be performed.

Now i have the data as a javascript object and don't know how to assign the data to the grid in javascript.
An alternative would be to perform the ajax request, store the data in my pagemodel and then trigger the grid to perform a read operation. But I also didn't find a way to trigger the read function of the grid.

Best regards

Moritz

I'm looking to use an autocomplete search in combination with the ListView widget, similar to how SharedDataSource is implemented in this demo with the Grid widget. Simply replacing the grid widget code in the SharedDataSource demo (shown below) with the code for ListView results in a blank search box and an empty ListView:

<div class="demo-section k-content wide">
    @(Html.Kendo().DataSource<Project.Models.ProjectViewModels.GalleryImageViewModel>()
                    .Name("dataSource1")
                    .Ajax(dataSource => dataSource
                       .Read(read => read.Action("Images_Read", "DataSource"))
                       .ServerOperation(false)
                    )
    )
    <h4><label for="autoComplete">Select image name</label></h4>
    @(Html.Kendo().AutoComplete()
                    .Name("autoComplete")
                    .DataTextField("GalleryImage.Title")
                    .Filter(FilterType.Contains)
                    .MinLength(2)
                    .DataSource("dataSource1")
    )

    @(Html.Kendo().ListView<Image>()
                       .Name("listView")
                       .TagName("div")
                       .ClientTemplateId("template")
                       .Pageable(pageable => pageable
                              .Refresh(true)
                              .ButtonCount(5)
                              .PageSizes(new[] { 5, 15, 21 })
                        )
                       .DataSource("dataSource1")                         
    )
</div>

Is there a simple solution to this? If not, what is the best way to implement server side filtering via a search widget in combination with ListView?

I have a simple grid with a custom popup template for the editor. The Edit button pops the template and works great. However, the Create command on the toolbar is not responding at all. I get no errors and my custom popup template does not show.

Any help would be very much appreciated.

Thanks … Ed

Hi

I follow the Kendo Core Grid Demo- Editing Custom Editor here https://demos.telerik.com/aspnet-core/grid/editing-custom

but when I click on the add record button, I got an error "Uncaught TypeError: Cannot read property 'CategoryName' of null"

I suspect is is due client template field name with a dot (.ClientTemplate("#=Category.CategoryName#"))

I even downloaded the demo sample file for both core and MVC to run it locally  and turn out MVC version work but .Net Core version has the same error.

Is this a bug in Core version? can anyone advice? Thank you

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Sortable(false).Width(180);
        columns.Bound(p => p.UnitPrice).Width(130);
        columns.Command(command => command.Destroy()).Width(150);
    })
    .ToolBar(toolBar =>
        {
            toolBar.Create();
            toolBar.Save();
        })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.Category).DefaultValue(
                ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);
        })
        .PageSize(20)
        .Read(read => read.Action("EditingCustom_Read", "Grid"))
        .Create(create => create.Action("EditingCustom_Create", "Grid"))
        .Update(update => update.Action("EditingCustom_Update", "Grid"))        
        .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))
    )
)

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