Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enable create, while also disabling edit for a Kendo Grid

Is it possible to enable only inserting new records in Kendo grid, but disable editing records?

Best I could do is onDataBound remove "Edit" buttons in JavaScript. I tried setting Editable(ed => ed.Enabled(false)) but I get errors during runtime.

@(Html.Kendo().Grid(Model)    
    .Name("Grid" + guid)
    .HtmlAttributes(new { style = "margin:20px" })
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden(true);
        //a few more columns

        columns.Command(command =>
            {
                command.Edit().Text(Resources.KendoEdit).UpdateText(Resources.KendoUpdateText).CancelText(Resources.KendoCancelText);
                command.Destroy().Text(Resources.KendoDestroy);
            }).Title(Resources.KendoCommands).Width(180);

    })
    .ToolBar(toolbar => toolbar.Create().Text(Resources.KendoToolbarCreate))
    .Editable(editable => editable
        //.Enabled(false)
        .Mode(GridEditMode.InLine)
        .DisplayDeleteConfirmation(false)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Events(events => events.Sync("sync").Error("error"))
        .Model(mod => mod
            .Id(p => p.Id)
        )
        .Model(mod => mod
            .Field(p => p.OldRoleId).Editable(false)
        )

        .Read(read => read.Action("ChangeRole_Read", "ChangeRole"))
        .Create(update => update.Action("ChangeRole_Create", "ChangeRole"))
        .Update(update => update.Action("ChangeRole_Update", "ChangeRole"))
        .Destroy(update => update.Action("ChangeRole_Destroy", "ChangeRole"))
    )
    .Sortable()
    .Filterable(filterable => filterable
        .Extra(true)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith(Resources.KendoFilterStartsWith)
                .IsEqualTo(Resources.KendoFilterIsEqualTo)
                .IsNotEqualTo(Resources.KendoFilterIsNotEqualTo)
                .Contains(Resources.KendoFilterContains)
                .DoesNotContain(Resources.KendoFilterDoesNotContain)
                .EndsWith(Resources.KendoFilterEndsWith)
            )
        )
        .Messages(mess => mess
            .Info(Resources.KendoFilterMsgInfo)
            .And(Resources.KendoFilterMsgAnd)
            .Or(Resources.KendoFilterMsgOr)
            .Filter(Resources.KendoFilterMsgFilter)
            .Clear(Resources.KendoFilterMsgClear)
        )
    ) 
    .Scrollable()
    .Pageable(pg => pg
        .Refresh(true)
        .Messages(ms => ms
            .First(Resources.KendoPageableFirst)
            .Last(Resources.KendoPageableLast)
            .Next(Resources.KendoPageableNext)
            .Previous(Resources.KendoPageablePrevious)
            .Empty(Resources.KendoPageableEmpty)
            .Display(Resources.KendoPageableDisplay)
        )
    )
    .Events(ev => ev
        .Edit("edit")
        .Save("save")
        .DataBound("dataBound")
    )
)
like image 619
dari0h Avatar asked Mar 01 '13 13:03

dari0h


2 Answers

The only way to do it would be to set the visibility of the Edit button to None:

<style>
    #yourgridid .k-grid-edit
    {
        display: none;
    }
</style>
like image 73
Sergey T Avatar answered Sep 20 '22 07:09

Sergey T


It's hard to answer without the code you are using to initialize the grid, but I'm going to take a shot. If I remember correctly you have to explicitly tell Kendo to add a column with edit/delete buttons like so:

.Columns(columns =>
        {
            columns.Bound(m => m.Whatever);
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            });
        })

So if you do have this or something like it in your column definitions, removing it will get rid of the edit/delete but keep the add button in the top bar of the grid.

If this is not how your edit/delete buttons are set up, I'd be happy to revise my answer if you post the grid code.

like image 32
jebar8 Avatar answered Sep 21 '22 07:09

jebar8