Change column width before and after edit event telerik core grid

user_68746 0
Viewed 282

I am using telerik grid in a MVC c# core application.

I have turned on inline editing, the column that displays the edit/cancel/update buttons however 'wraps' in a less than desirable way when editing turns on due to the cancel/update button being added to it.

I want to capture the start of the edit function, expand the width of the column, then afterwards put it back.

I have tried these two events, but both fire on the start of editing:

        .Events(et => et.BeforeEdit("testEdit"))
        .Events(ett => ett.Edit("testEdit2"))

But assuming that I get through that I am not able to change the width in a good manner. This is how I am doing that:

function testEdit() {
    debugger;
    alert("here start");

    var options = $("#gridAmmoChecks").data("kendoGrid").getOptions();
    options.columns[0].width = "200px";
    $("#gridAmmoChecks").data("kendoGrid").setOptions(options);

}

problems are a couple, one I would like to find and use the correct events. also, the above is very slow for some reason setting the column width, there has to be a better way of doing it.

But two, doing like above the grid does not go into 'edit' mode any longer. It seems that the setOptions 'resets' the grid and it no longer lets the user edit the cell. It would also be great to know how to address the columns by name vs index.

Update: Using this link to Telerik documetation I make the below change, but it is also not working yet: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/resizecolumn

    function setExport() {
    var grid = $("#gridAmmoChecks").data("kendoGrid");

    grid.hideColumn("printFlag");
    grid.resizeColumn(grid.columns[5], 100);
   
}

In the above, the hideColumn works, but resizeColumn throws: ManageAmmoChecks:566 Uncaught TypeError: grid.resizeColumn is not a function at setExport (ManageAmmoChecks:566) at HTMLButtonElement.onclick (ManageAmmoChecks:480)

I am using Telerik.UI.for.AspNet.Core (2021.1.224)

telerik-grid asp.net-core telerik
1 Answers

Using the setOptions() method will reinitialize the grid, therefore, there is a possibility of entering in an endless loop.

There is no suitable event for detecting when the edit is finished. DataBound can be used in case the Update button is clicked, however, it is not invoked when the Cancel button is closed. It would be best if you attach custom click handlers to the two buttons within the Edit event.

        function onEdit(e){
          // attach click event handlers here
          
          setTimeout(function(){
            var grid = e.sender;
            grid.resizeColumn(grid.columns[5], 100);
          });
        },
user_101644300
Related