If I add several rows to my grid which is not bound to any data source, upon clicking the edit button of the first row and then clicking then edit of any other row. The first row of the grid is lost/deleted if the update button is not clicked.

This only happens a single time and never again after the first time it occurs on any action combination.

Would be helpful to know if there is a way to send only new items through the create transport instead of the entire grid also.

I've tried setting the model id, this doesn't fix the problem either problem.

logic to get around incorrect rows sent to controller through create transport

Hello,

I have followed this Knowledge base article to adjust the boolean filters of the grids on my site : https://docs.telerik.com/kendo-ui/knowledge-base/grid-boolean-dropdownlist-filter

I am experiencing an issue also found in the preview available at the bottom of this article.

To experience the problem, try filtering by Discontinued column and select the False option. 

When the false option is selected in the dropdownlist, the "True" value is displayed but the "False" option is really selected. If you then hit the filter button, only the false values are shown as expected, but the label was showing "True". The behavior is as expected but the information shown to the user is misleading.

Any help on this problem would be appreciated!

Thank you very much!

David

Hi,

  I am working on a ASP.Net Core MVC project.

  When user click on the Detail button, i will return a partial view with a treeview in it.

  When the page is first loaded, i want the first item in the treeview to be selected programmatically after the Read() operation is competed. (Note: i want to avoid asking user to do that after the page is first loaded)

  Can you share with me how to achieve that?

Index.cshtml

script

controller

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?