According to this article (https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance/height?&_ga=2.194530788.810043146.1580386923-2007283080.1571831975#making-the-grid-100-high-and-auto-resizable), I should be able to disable scrolling and have no height set on my grid and the grid will automatically have a height tall enough to contain all the rows. This does actually work in Chrome running under Windows 10. However, it does not work in Chrome running under iOS (12 or 13). In an iOS environment the grid has no height at all. 

I've attached an image showing what this looks like running on an iPad 7 iOS 13. All you see is a horizontal line underneath "Certifications". I believe this is the top of the grid. I get the same incorrect results on an Android device as well.

I'm currently implementing a grid with in cell editing in which one of the columns is a forign key column bound to a select list with 1000+ entries.

Each time a user clicks on the forign key column there is a several second delay (during which I assume the dropdown is rendering) before the dropdown appears.

Once the dropdown is rendered it performs well, but the load on each click is causing the column to be almost unusable. 

I've tried overwriting the grid forign key editor template to use virtualization, and while that seems to work initially I do this I get an error with the following text "'ValueMapper is not provided while the value is being set." once a value is set on the grid. We're using 2018.1.117, and from what I read a ValueMapper isn't required, but I could be misinterpreting that. 

Do you have any suggestions around how we could get arround this issue?

Hello,

I have been trying to get the value from a simple kendo textbox but keep getting this error: "Unable to get property 'value' of undefined or null reference" upon entry the web page. Below is my jquery and kendo html helper code in my Mvc View:

 

<script>

    function filterGrid() {
        var startDate = $("#StartDate").data("kendoDatePicker"),
            applType = $("#applTypeDropDownList").data("kendoDropDownList"),
            allColumns = $("#allCols").data("kendoTextBox");                                   <==== problem here

        var filter = {
            startDate: startDate.value(),
            applType: applType.value(),
            allColumns: allColumns.value()                                 <==== problem here
        };

        return filter;
    }

</script>

 

<div class="container-fluid">

        <div>
            @(Html.Kendo().TextBox()
                    .Name("allCols")
                    .Deferred()
            )
        </div>

</div>

 

As you can see, I also have other widgets such as datepicker and dropdownlist and they both working fine except the textbox widget. 

 

Please advise. Thank you.

Hi,

In Kendo UI grid: When I press delete button and delete fails (because of foreign key constraints) still that row getting disappear from the Grid.




1) .cshtml code as below (GRID)




@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        //columns.Bound(p
=> p.ID).Width(35);
        columns.Bound(p => p.ClientName);//.Width(50);
        columns.Bound(p => p.ClientCode);//.Width(30);
        columns.Bound(p => p.Desc);//.Width(100);
        columns.Bound(p =>
p.PrimaryContact);//.Width(80);
        //columns.Bound(p
=> p.PrimaryContact).Template(p =>
        //    @Html.ActionLink("Edit",
"Edit", new { id=p.ID }))
        //   
.ClientTemplate(Html.ActionLink("Edit", "Edit",
new { Id = "id" }).ToHtmlString().Replace("id",
"#=id#")).Width(30).Title("");
        columns.Command(command => {
command.Edit(); command.Destroy(); });//.Width(40);  
        columns.Bound(p =>
p.PrimaryContact).Template(p =>
            @Html.ActionLink("Spot Data", "../ViewSpotTimes/Index1",
new { id = p.ID }))
            .ClientTemplate(Html.ActionLink("Spot Data", "../ViewSpotTimes/Index1",
new { Id = "id"
}).ToHtmlString().Replace("id", "#=id#")).Title("Spot Data");//.Width(20).Title("");
   })
                .ToolBar(toolbar =>
                {
                    toolbar.Create().Text("Add Client"); toolbar.Custom().Text("To csv").HtmlAttributes(new { id = "export"
})
          .Url(Url.Action("Export", "Client"));
 
                    toolbar.Custom().Text("To excel").HtmlAttributes(new { id = "export"
})
          .Url(Url.Action("ExportExcel", "Client"));
                })
    .Editable(editable =>
editable.Mode(GridEditMode.PopUp))
    .Selectable(selectable => selectable
     .Mode(GridSelectionMode.Multiple)
     .Type(GridSelectionType.Cell))
    .Navigatable()
    .Pageable()
    .Sortable()
         .Scrollable(scr => scr.Height(530))
     .ClientDetailTemplateId("template")
    //.Scrollable()
    .HtmlAttributes(new
{ style = "height:630px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(500)
             .Read(read => read.Action("HierarchyBinding_Employees", "Client"))
         .Events(events => events.Error("error_handlerPP"))
        .Model(model => model.Id(p =>
p.ID))
        .Create(update => update.Action("EditingPopup_Create", "Client"))
        .Read(read => read.Action("EditingPopup_Read", "Client"))
        .Update(update => update.Action("EditingPopup_Update", "Client"))
        .Destroy(update => update.Action("EditingPopup_Destroy", "Client"))
        .Create("Create","Client")
        )
    .Events(events => events.DataBound("dataBound"))
)
 




 




 




Script as below




<script type="text/javascript">
    function
error_handlerPP(e) {
        e.preventDefault(e);
        if (e.errors)
{
          
            var
message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if
('errors' in
value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>
 
 
//Also I tried below Code
<script type="text/javascript">
    var
validationMessageTmpl1 = kendo.template($("#message").html());
 
    function
error_handler1(args) {
       
        if
(args.errors) {
            var
grid = $("#Grid").data("kendoGrid");
            grid.one("dataBinding",
function (e) {
                e.preventDefault();   // cancel
grid rebind if error occurs                            
                for (var error in
args.errors) {
                alert("Not deleted Successfully! See Log for details")
                   
showMessage1(grid.element, error, args.errors[error].errors);
                }
            });
        }
    }
 
 
 
    function
showMessage1(container, ClientName, errors) {
        //add
the validation message to the form
        container.find("[data-valmsg-for=" + ClientName + "],[data-val-msg-for=" + ClientName + "]")
        .replaceWith(validationMessageTmpl1({
field: ClientName, message: errors[0] }))
    }
    </script>
 




 




Controller code as below




            [AcceptVerbs(HttpVerbs.Post)]
            public
ActionResult EditingPopup_Destroy([DataSourceRequest] DataSourceRequest
request, ClientModel client)
            {
                if
(client != null)//
&& ModelState.IsValid)
                {
                    try
                    {
                       
db.ClientModels.Remove(db.ClientModels.Find(client.ID));
                        db.SaveChanges();
                    }
                    catch
(Exception ex)
                    {
 
                       
ModelState.AddModelError("ClientName",
Convert.ToString(ex.InnerException.InnerException.Message));
                    }
 
                }
 
                //return
RedirectToAction("IndexKUI1");
                return
Json(new[] { client
}.ToDataSourceResult(request, ModelState));
                //return
Json(ModelState.ToDataSourceResult());
              
                }
 




 

 

Hello,
I used Asynchronous Mode of the Upload component in my MVC project.  How to pass small amount of Json data back to client after successful uploading the file?

Thanks!

I have the following code to dynamically set the height of a Kendo MVC grid. This works on any Windows based browser. However, it does not work in Chrome or Safari on an iOS device. Would you know why this isn't working? Or, is there a better way to change the height of a grid after it's been initialized?

 

Hi There,

I've upgraded my ASP.NET MVC website from Kendo 2019 to 2020.1 and suddenly the Kendo.Grid got broken (no data loaded). The first thing I noticed, was the browser error: "Uncaught ReferenceError: getAntiForgery is not defined". (see attached screenshot)

After investigating some hours, I've discovered that I need to remove the .Data("getAntiForgery") call from my View and the [ValidateAntiForgery] attribute from controller actions to be able to resume the Kendo grid functionalities. (see attached screenshots)

Can anybody explain me why?

Thanks,

Alberto

How to add a kendo button in nodatatemplate of autocomplete widget in MVC. Sample screenshot is attached.

I am trying to port a Telerik MVC extentions view to a KendoUI view and I am running into a problem.

The view has a grid and a client detail template which also contains a grid. The detail grid is databound (Ajax) to another datasource than the parent grid. In the detail grid I have a client template column. Problem is that in the client template of the detail grid I can only access the fields from the parent grid, not the fields from the detail view grid. This used to work perfectly in the Telerik MVC extentions.

The parent grid
And the detail grid:

In the ClientTemplate of the detail grid I want to access the RoleId and UserId fields of the row but I get the "ReferenceError: RoleId is not defined" message. Scoping it using 'data.RoleId' also does not work because then 'data.RoleId' is replaced with 'undefined'.

Any ideas?

Here is the grid:

this.Html.Kendo().Grid<Model>()
      .Name("grid")
      .Filterable()
      .ColumnMenu()
      .Sortable()
      .Groupable()
      .ToolBar(commands => { commands.Custom().Name("foo").Text("Perform Action").Action("PerformAction", "ViewPayrollEmployeeDetail"); })
      .Scrollable(scrollable => scrollable.Height(430))
      .Columns(col =>
      {
          col.Bound(x => x.CompanyId).Visible(false);
          col.Template(x => x.CompanyName).ClientTemplate(Html.ActionLink("#= CompanyName #>", "Update", "AppCompany", new { id = "#= CompanyId #", panel = 1 }, null).ToHtmlString()).Width(120);
      })
      .Pageable(pageable => pageable
          .ButtonCount(5)
          .Info(true))
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(25)
          .Read(read => read.Action("GetData", "EmployeeHistory").Data("sendAntiForgery")))

As you can see, I am trying to use CompanyName and CompanyId to render the ActionLink.

When the grid renders, I get this error in javascript:

Uncaught ReferenceError: companyid is not defined

CompanyId is in a nav property a couple of domain model levels down, but I have mapping set up with Deflattening so Kendo knows where to find it for sorting/grouping, etc.

The question is, am I doing this right, and how can I get this to work?  We use these kinds of links everywhere in our current grids, so getting this to work is very important for us.

Thanks!

Mike