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,
   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

We have a column of type text, and want to change the default filter from 'equals' to 'contains'.

This doesn't seem to have any effect: 

.Filterable(f => f.Cell(c => c.Operator("contains")))

This does not seem to work in the context of the MVC Grid: jQuery Set the Default Filter Operator in the Grid - Kendo UI for jQuery

Hi,

I have a kendo grid and in the page load kendo grid automatically have a new empty row. When we click on the + icon then it should create multiple rows in the grid.

The above functionality is working fine, but when we do a filter on any of the column then on filter click button it should display filtered row along with new empty row.

After click on filter button the empty row is not creating. I tried the below code on click on filter button it fires the Filter event but  

its not creating the empty row. Can you please let me know how to add a new empty row on click of filter button.

.Events(ev => ev.Filter("onFiltering"))

function onFiltering() {
    var gridName = "grid1";
    var grid = $("#" + gridName).data("kendoGrid");

}

Hi,

I have a strict CSP implemented in the Program.cs file, after that when I verified the browser developer tool then I can see the get API is called 2 times.

Can you please let me know why this get API is called 2 times. 

When I analyze I found that Kendo Panelbar Select event is called twice so internally the Get API is called twice.

function OnSelect_Panel(sender) {

}

Inside the OnSelect_Panel() method is calling twice so the GET API also called twice. How can I restrict to one API call.

Note: Without strict CSP OnSelect_Panel() is called once but with strict CSP it called twice.