I have a grid where I am trying to put a drop down list in the toolbar of the grid.

This is the syntax I am using:

Html.Kendo()

            .Grid<Fss.Areas.Customers.Models.Contact>()

            .Name("ContactsGrid")

            .Columns(columns =>

            {

                columns.Bound(c => c.LastName);

                columns.Bound(c => c.FirstName);

                columns.Bound(c => c.Email);

                columns.Bound(c => c.Phone);

                columns.Bound(c => c.Mobile);

                columns.Bound(c => c.Changed).Format("{0:HH:mm:ss d/M/yyyy}");

                columns.Bound(c => c.ChangedBy);

                columns.Command(command =>

                {

                    command.Edit();

                    command.Destroy();

                }).Width(172);

            })

            .ToolBar(toolbar =>

            {

                toolbar.Create();

                toolbar.Template(() =>

                {

                    @<div class="toolbar">

                        @{

                            Html.Label("Customer");                                                    

                            Html.Kendo()

                                .DropDownList()

                                .Name("CustomersComboBox")

                                .HtmlAttributes(new { style = "width: 400px" })

                                .DataTextField("Name")

                                .DataValueField("CustomerId")

                                .AutoBind(false)

                                .Events(e => e.Change("changeCustomer"))

                                .DataSource(source => source.Read(read => read.Action("GetCustomers", "Contacts")));

                        }

                    </div>

                });

            })

            .Editable(editable => editable.Mode(GridEditMode.PopUp))

            .Pageable()

            .Sortable()

            .Scrollable()

            .Reorderable(con => con.Columns(true))

            .Resizable(con => con.Columns(true))

            .ColumnResizeHandleWidth(5)

            .HtmlAttributes(new { style = "height:600px;" })

            .Events(e => e.Edit("edit"))

            .DataSource(dataSource => dataSource.Ajax()

                                                .PageSize(10)

                                                .Events(events => events.Error("error_handler"))

                                                .Model(model =>

                                                {

                                                    model.Id(c => c.ContactId);

                                                    model.Field(f => f.Changed).Editable(false);

                                                    model.Field(f => f.ChangedBy).Editable(false);

                                                    model.Field(f => f.Error).Editable(false);

                                                })

                                                .Create(c => c.Action("Create", "Contacts"))

                                                .Read(r => r.Action("Read", "Contacts"))

                                                .Update(u => u.Action("Edit", "Contacts"))

                                                .Destroy(d => d.Action("Delete", "Contacts")));

I am following an example found here:
http://demos.telerik.com/kendo-ui/Beta/web/grid/toolbar-template.html

This seems to compile OK, but at runtime it throws this error. It's saying it's missing a semicolon, but I don't understand where I would put one:

Server Error in '/' Application.

Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1002: ; expected

Source Error:

Line 186:EndContext(__razor_template_writer, "~/Areas/Customers/Views/Contacts/Customer.cshtml", 1606, 30, true);
Line 187:
Line 188:})
Line 189:
Line 190: #line 44 "C:\Users\riston\Desktop\Fss\Fss\Areas\Customers\Views\Contacts\Customer.cshtml"
Source File: c:\Users\riston\AppData\Local\Temp\Temporary ASP.NET Files\root\c09ffc8d\a8a27bfd\App_Web_customer.cshtml.d9b99660.sjvq2jbh.0.cs    Line: 188

Should be really simple.... cannot find any documentation and the demo is lacking...

How do you set the target color from the helper?

 

Hi,

I have multiple kendo grids on my page and I would like to switch focus between the grids using keyboard.  I tried to follow the below example but it does not work for multiple grids.

https://demos.telerik.com/aspnet-mvc/grid/keyboard-navigation

Below is the current configuration which I am using.
Version: 2019.2.619.545 (Kendo Web Extensions for ASP.NET MVC)
MVC version: 5.0
IDE: Visual Studio 2015
Browser : Chrome  76.0.3809.100, IE 11.0
.Net Framework: 4.6.2
Programming Language: C#

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