I have a Telerik MVC Grid in a Razor view. I have added the ColumnMenu option which gives the user the ability to show/hide columns in the grid. By default it places this in the context menu of the header of the columns. I want to change this so that it is available in the ToolBar header as a custom control.

     @(Html.Kendo().Grid<StockReport>()
               .Name("grid")
               .Columns(columns =>
                  columns.Bound(p => p.SohQty).Title("Quantity");
                 columns.Bound(p => p.StockName).Title("Item Name");

                  ...

                  .ToolBar(tools => tools.Excel())
                  .ToolBar(tools => tools.Custom()
                      .Text("Customise")

                      .WhatToPutHere?????
                      )

                .ColumnMenu() //I want to reuse this but in the custom toolbar

I think it sits better in the toolbar header since it is about all the columns whereas the rest of the items in the context header of a column relate to just that column (filtering, sorting).
The only thing I don't know is what I can put on the custom toolbar in order to make use of the existing ColumnMenu control

Hi Team,

I am facing issue in ClientDetailTemplateId Grid when using checkbox, data coming from database is true checkbox selected but if we checkbox checked or uncheck then checkbox values not sending proper values in jquery bellow sending code for grid.

  @(
      Html.Kendo().Grid<PNWorklistSupplierGridViewModel>()
                          .Name("pnwlGrid_#=Id#") // template expression, to be evaluated in the master context
                              .Columns(columns =>
                               {
                                   columns.Command(command =>
                                    {
                                        command.Custom("editPn1").Text(" ").IconClass("k-icon k-i-pencil").Click("OpenSupplierEditWindowPN");
                                    }).Width(40).HtmlAttributes(new { @style = "text-align: center;" });

                                        columns.Bound(e => e.Check).Title("test").Width(150)
                                   .ClientTemplate("<input type='checkbox' \\#=Check? checked='checked' : '' \\# />")
                                   .HeaderHtmlAttributes(new { @class = "headerText" }).Sortable(false).Filterable(false).HtmlAttributes(new { @style = "text-align: center;" }); 

If Check checkbox checked then js file getting Check values false

please check and let me know any thing else required.

Thank you!

Hi, im currently creating a Grid with dynamic columns and came across with this post and current following the structure.

Dynamic Data in the Kendo UI Grid (telerik.com)

My problem is that during Update, I cant seem to access the Property Values of those edited columns. 

Can I get the actual code for the "Update" of this demo API?

https://demos.telerik.com/kendo-ui/service/products/Update

Heres my update code btw:

[HttpPost]
        public JsonResult Update_Employee([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<dynamic> models)
        {
            foreach(var obj in models)
            {
                string a = GetProperty(obj, "EmployeeName");

            }

            return Json(ModelState.ToDataSourceResult());
        }

        private object GetProperty(dynamic obj, string propertyName)
        {
            var objDict = obj as IDictionary<string, object>;
            if (objDict.ContainsKey(propertyName))
            {
                var value = objDict[propertyName];

                if (value != null)
                    return value;
            }

            return null;
        }

I have a model class given below in MVC. I am trying to set MinDate and MaxDate for the DatePicker

public class YourModel
{
    public DateTime Deadline { get; set; }
    public DateTime MinDate { get; set; }
    public DateTime MaxDate { get; set; }
}

@(Html.Kendo().DatePickerFor(x => x.Deadline)
    .Name("datepicker") // Set the name attribute
    .Format("MM/dd/yyyy")
    .Min(DateTime.Today) // Set the minimum date
    .Max(DateTime.Today.AddMonths(3)) // Set the maximum date (in this example, 3 months from today)
    .HtmlAttributes(new { id = "datepicker" }) // Set the ID attribute
)

Hi, I have this list of thousands of employees from our Database and will be displayed in a Grid via ViewModel. Im using Custom Binding with paging to fetch only specific number of records per page to reduce the loading time of the grid thats why the ServerOperation = true.

My problem is that, how can I customize or recreate the request filters? Since FullName and Address does not exists in the Employees table. I'm getting error whenever i use search.

public class Employee
    {
        public string EmployeeID { get; set; }

        public string LastName { get; set; }
        public string FirstName { get; set; }

        public string Street { get; set; }
        public string City { get; set; }
        public string Province { get; set; }

        public string TelephoneNo { get; set; }

        public string FullName
        {
            get
            {
                return String.Format("{0}, {1}", LastName, FirstName ?? "");
            }
        }

        public string Address
        {
            get
            {
                return String.Format("{0} {1} {2}", Street, City, Province);
            }
        }
    }

@(Html.Kendo().Grid<Employee>()
    .Name("gridEmployees")
    .ToolBar(toolbar =>
    {
        toolbar.Search();
    })
    .Columns(column =>
    {
        column.Bound(c => c.EmployeeID);
        column.Bound(c => c.FullName);
        column.Bound(c => c.Address);
        column.Bound(c => c.TelephoneNo);
    })
    .Filterable()
    .AutoBind(false)
    .DataSource(ds =>
    {
        ds.Ajax()
        .ServerOperation(true)
        .PageSize(10)
        .Model(m => m.Id(c => c.EmployeeID))
        .Read(r => r.Action("Read", "Employees"));
    })
)

Hi!

I have this large data from a Table with related tables and I'm currently using Custom Binding to apply paging, sorting and more importantly filtering to load smaller data sets. 

And my problem is on the below link, no paging example was documented.  Can you please help me with this?

ASP.NET MVC Data Grid Component Custom Binding - Telerik UI for ASP.NET MVC

I have this grid with Edit and Destroy column command buttons. As I click the Delete/Destroy button it instantly calls the Destroy action without waiting for the delete confirmation. How can I solve this?

I recently updated the Kendo library to 2023.3.1114.545 from 2022.3.  I did not change any code other than the style sheets.  My grids are showing a long drop down with the page numbers even though I do not specify it and other options like page records per page do not show.  Plus, the refresh button doesn't show.

I attached how it looks.

My CSS and script includes:

<link href="@Url.Content("~/Content/classic-silver/classic-silver.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/kendo/font-icons/index.css")" rel="stylesheet"  type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-3.7.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2023.3.1114/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2023.3.1114/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2023.3.1114/kendo.aspnetmvc.min.js")"></script>

Kendo Grid code:

    @(Html.Kendo().Grid<ListModel>()
        .Name("List")
        .Columns(columns =>
        {
            columns.Bound(e => CaseNumber).Filterable(false).Title("Case Number")
            columns.Bound(e => e.LastName);
            columns.Bound(e => e.FirstName);
        })
        .Sortable()
        .Filterable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(new int[] { 10, 25, 50, 100 })
            .ButtonCount(5))
        .DataSource(ds =>
        {
            ds.Ajax()
                .Read(read => read
                    .Action("Cases_Read", "CasesList")
                )
                .PageSize(25);
        })
        .ToolBar(tools => tools.Excel())
    )

Dear Sir/Madam,

Telerik UI for Asp.net MVC and AJAX have been installed in my destkop.

I have created a project for Asp.net MVC with GRID AND MENU interface in visual studio 2017. 

I run dedug mode, the datagrid can't show any column. What's wrong of this?

I am trying to bind the datatable to the MVC grid and using ajax read to get the data. Everything is working as expected until I am trying to convert one of the column to foreignkey column.

Here is my sample code

 @(Html.Kendo().Grid<dynamic>()
                .Name("ReportGrid")
                .Scrollable()
                .Columns(columns =>
                {
                    foreach (var column in Model.TableConfig.MasterColumns)
                    {
                        if (refColumns.Contains(column.ColumnName))
                        {
                            var refData = Model.MetaData.Where(m => m.ColumnName == column.ColumnName).ToList();


                            columns.ForeignKey(column.ColumnName, new SelectList(refData, "DataValue","DataText")).EditorTemplateName("GridForeignKey");


                        }
                        else
                        {
                            columns.Bound(column.ColumnName);
                        }
                        //var c = columns.Bound(column.ColumnName);
                    }                
                })

I am getting the below error