Hi,

I have a case where I need one column to be always editable as shown in this screenshot:

This was written a long time ago before anyone here was using the telerik grid.  Now that I have everything populated nicely I am trying to get the status column to be always accessible for quick setting of the status and at the same time I want an edit button to edit the larger model in an Editor Template or open a partial view.  I did my best to google this and the ai generated answer doesn't work. I'm getting conflicting advice on whether or not I should use the Editable property on the column bound vs. in the datasource.  I like to take things in small steps so my first task was getting the three other columns readonly.  I did this through the datasource because .Editable(false) or .Editable("false') on column bound did not work.  I found out that one is the older way of doing this.  I can't remember which is which. Anyway below is what the example said to do and it doesn't work unless I press the edit button.  I did this inline for now but I will be doing the popup of some type.

GRID DEFINITION

@(
Html.Kendo().Grid<HookupChargeViewModel>()
    .Name("HookupChargesList")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden(true);
        columns.Bound(p => p.PropertyOwner).Title("Property Owner");
        columns.Bound(p => p.AddressDisplay).Title("Address");
        columns.Bound(p => p.TaxAccountDisplay).Title("Tax Account");
        columns.ForeignKey(p => p.HookupChargeStatusID, (System.Collections.IEnumerable)ViewData["LookupHookupChargeStatuses"], "IdNumber", "Name").Title("Status").Editable("alwaysEditable");
        columns.Command(command => { command.Edit(); }).Width(220);
    })
    .ToolBar(toolbar => { toolbar.Create().Text("Add New Hookup Charge Worksheet"); })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Sortable()
    .Scrollable()
    .Filterable(filterable => filterable.Extra(false))
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.PropertyOwner);
            model.Field(p => p.AddressDisplay).Editable(false);
            model.Field(p => p.TaxAccountDisplay).Editable(false);
            model.Field(p => p.HookupChargeStatusID);
        })
        .Read(read => read.Action("HookupCharges_Read", "HookupCharges"))
        .Create(create => create.Action("HookupCharges_Create", "HookupCharges"))
        .Update(update => update.Action("HookupCharges_Update", "HookupCharges"))
    )
    .Events(events => events.Edit("grid_edit"))
)

SCRIPT

<script>
    function alwaysEditable(dataItem) {
        return true; // Always allow editing for this column
    }

</script>

Hi,

Is it possible to enable AutoSwitchParts for DateInput Integration of  Datepicker?
DateInput works fine by itself, but I can’t figure out how to enable AutoSwitchParts with Datepicker.

Any suggestions would be appreciated.

(Telerik UI for Asp.net MVC  2025.4.1217.462)

Hi,
   I am working with Kendo UI grid in ASP .NET MVC using an EditorTemplate with ComboBoxFor inside the grid.

Issue description

• The combobox appears inside the grid edit mode.
• When I click the dropdown , it shows "No data found"
• The server side action method is not being hit at all.
• No JS error
• Using same server endpoint DropdownListFor works correctly and loads data

Sample code

@model Department

@(Html.Kendo()
.ComboBoxFor(m=>m)
.DataValueField("departmentId")
.DataTextField("departmentName")
.DataSource(ds=>ds.Read(read=>read.Action("GetDepartments", "Home")))
)

Hi,

I am exporting excel from kendo grid in client side with default Excel() method.

When I am trying to read any exported excel from JavaScript I am not able to read any excel data, but when I open the excel file and click on save button, then going forward that excel I am able to read from JavaScript. Below are the codes used for export and import. 

Export Code:

function exportData(gridName) {
    var grid = $("#" + gridName).data("kendoGrid");
    var pageSize = grid.dataSource._pageSize;
    var dataSourceTotal = grid.dataSource.total();
    grid.dataSource.pageSize(dataSourceTotal);
    grid.saveAsExcel();
    grid.dataSource.pageSize(pageSize); // Reset page size after a delay
}

Import Code :

const reader = new FileReader();
var mappedExcelRecords = [];

// The callback is executed here, once the load event fires
reader.onload = function (event) {
    var data = event.target.result;
    var workbook = XLSX.read(data, {
        type: 'binary'
    });

    var jsonExcelRecords;

    workbook.SheetNames.forEach(function (sheetName) {
        jsonExcelRecords = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])
    })

In jsonExcelRecords variable I am getting all the excel data if the excel is open and saved once but when the excel is exported from the kendo grid and trying to import then the below code doesn't get any data from excel.

jsonExcelRecords = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])

Please look into this issue and feel free to ask if you need any new information.

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
    // Check if any sorts have been applied.if (request.Sorts != null)
    {
        // Loop through each sort.foreach (var sort in request.Sorts)
        {
            // Check if the Category column is being sortedif (sort.Member == "Category")
            {
                // Sort by the CategoryName instead of the Object.
                sort.Member = "Category.CategoryName";
            }
        }
    }
}
 
My grid column coincidentally also has to do with categories.  I tried adding the above code to my read method and it doesn't work.  When I click on the header to sort the column it doesn't automatically initiate a read call so I'm not sure how this could work.  I guess I'm missing something.
My grid definition:
@(
Html.Kendo().Grid<LookupItem>()
    .Name("LookupList")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).Hidden(true);
        columns.Bound(m => m.CategoryListItem).ClientTemplate("#: CategoryListItem.CategoryName #").EditorTemplateName("LookupCategoryDropDown").Width("25%"); ;
        columns.Bound(m => m.Name).Width("25%");
        columns.Bound(m => m.Value).Width("15%");
        columns.Bound(m => m.AlternativeValue).Width("15%");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => { toolbar.Create().Text("Add New Lookup Item"); })
    .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation("Are you sure you want to delete this item?"))
    .Sortable()
    .Scrollable()
    .Filterable(filterable => filterable.Extra(false))
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(50)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(m => m.Id);
            model.Field(m => m.Category);
            model.Field(m => m.Name);
            model.Field(m => m.Value);
            model.Field(m => m.AlternativeValue);

        })
        .Read(read => read.Action("Lookup_Read", "Lookup"))
        .Create(create => create.Action("Lookup_Create", "Lookup"))
        .Update(update => update.Action("Lookup_Update", "Lookup"))
        .Destroy(read => read.Action("Lookup_Delete", "Lookup"))
    )
My Controller Read Method:
 public async Task<IActionResult> Lookup_Read([DataSourceRequest] DataSourceRequest request)
 {
     if (request.Sorts != null)
     {
         // Loop through each sort.
         foreach (var sort in request.Sorts)
         {
             // Check if the Category column is being sorted
             if (sort.Member == "CategoryListItem")
             {
                 // Sort by the CategoryName instead of the Object.
                 sort.Member = "CategoryListItem.CategoryName";
             }
         }
     }
     var model = await _service.GetAllLookupTypesAsync();
     var result = model.ToDataSourceResult(request);
     return Json(result);

 }               
    
        
            

Hi,

We have a requirement, where we have a kendo grid, from the grid columns we need one or multiple columns as a dropdown/combobox.

Along with the above requirement we have the below requirements. 

1. Grid column with Dropdown/Combobox should work when paste in grid
2. Export also should work with dropdown/combobox columns.

To add new rows in the grid, we have to copy the rows from excel and paste in the grid, so after the paste all the new records should appear even in the dropdown/combobox field. The export is a client side export. 

And for the grid we have a button for exporting the grid data in excel. If for specific column which will be dropdown/combobox which will be of complex type then after export how that column will display in the excel.

Note: We have already tried with dropdownlist in the grid. We created a UI component and user that inside EditorTemplateComponentName

in the cshtml file. We are able to render the dropdown for that particular column inside the grid. But the problem is with dropdownlist column when we try to copy and paste records from excel to grid, paste is not working for dropdown column.

And also the dropdown column is a complex type so when we export the grid, the dropdown column value is not render in the excel file.

So, we are thinking to achieve the above requirements with a combo box, please provide the solution for the above requirements.

I have a asp.net mvc kendo grid with Edit option in each row, on click it brings the data from Editor Template(its having a kendo dropdown in it) I have implemented CSP globally. Grid having Deferred() in it.  Grid works fine with its basic get records.

After CSP . Edit click is not opening the popup. Shows console error with invalid template. 

followed by the entire page html code.

How to eliminate this. How to use Edit with CSP.

Grid Example:

Thanks,

Anupriya. R

I have multiple autocomplete boxes and they all filter through the same AJAX datasource.  I want to somehow pass the ID of the specific box to the AdditionalData javascript function so that I don't have to write like five different JavaScript functions with pretty much the same logic.  I didn't see anything in the documentation and passing "e" in the AdditionalData function just passes the filter.

<strong>To:</strong>  Html.Kendo().AutoComplete().Name("ToAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

<strong>CC:</strong>  Html.Kendo().AutoComplete().Name("ccAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

            
<strong>BCC:</strong>  Html.Kendo().AutoComplete().Name("bccAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

    function AdditionalData() {
        var text = $("[the autocomplete id]").val();  //get the ID or any other identifier
        var i = text.indexOf(";");
        var value = text.substring(i + 1);
        return {
            text: value
        }
    }