[Solved] One dropdownlist column in a grid always editable and still have an edit button that open an editor template or partial view

[Cynthia]

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>

[Anton Mironov]

Hi Cynthia,

Thank you for the image and the details provided.

In order to achieve the desired behavior, I would recomend uisng a PopUp Edit mode as shown in the following demo:

• https://demos.telerik.com/aspnet-mvc/grid/editing-popup

The following article provides additional information about the PopUp edit mode for the Grid:

• https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/popup

If you like to implement a custom PopUp editor for the Grid, I would recommend the following:

• https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/popup#custom-popup-editor-template

For the DropDownList custom column, I would recommend using a Template for the columns. Please note that the DropDownList will not be a property in your model, so you will need to add custom code for handling its changes.

I hope this information helps.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Cynthia]

Thank you Anton for your response.  However,  my question is more about the column that is always editable and how to accomplish that.  I am using ForeignKey for my dropdownlist which is using a model property.  I am not sure how to accomplish this..

[Anton Mironov]

Hi Cynthia,

Thank you for the kind words and the additional details provided.

The Telerik UI Grid can use one Edit Mode, so you have to choose whether your  Grid will use InCell Edit Mode or PopUp Edit Mode.

Another option is to have two Grids and switch between them - hide the unneeded and show the needed one when deciding.

The Grids can share one dataSource, and one to be in InCell Edit and another in PopUp edit mode.

Please note this is not a built-in customization.

 

Best Regards,
Anton Mironov

[Cynthia]

Okay this is good to know.  Thank you again for the possible work arounds.  This was helpful.

[Anton Mironov]

Hi Cynthia,

Thank you for the kind words. If you need additional assistance or information, do not hesitate to contact the Team and the community.


Kind Regards,
Anton Mironov