Grid: Insert and Delete only, no update of existing records

[Daniel Knoll]

Hi,

I'm using the Kendo Grid in my application.

In my Grid I just need to insert rows and delete them. Update should not be possible.

If I define the Grid as follows, I dont have an update button to save the values. If I specify the Update function, I get the Update Button.

How can I achieve this?

Greets

.Columns(

    col =>

    {

        col.Command(c => { c.Destroy(); }).Width(250);

        ...

    })

    .ToolBar(c => c.Create())

[Rosen]

Hi David,

Although, the requested functionality is not supported you can achieve this using few lines a JavaScript to manually hide the edit command button. This can be implemented by attaching to grid's DataBound event:

Html.Kendo().Grid<..>()
   .Name("grid")
   .Columns(columns =>
   {
       //....
       columns.Command(command => { command.Edit(); command.Destroy(); });
   })
   .ToolBar(toolbar => toolbar.Create())
   .Editable(editable => editable.Mode(GridEditMode.InLine))
   .Events(events => events.DataBound("dataBound"))
   .DataSource(dataSource => dataSource
       .Ajax()
       //.....
   )

<script type="text/javascript">
    function dataBound() {
        this.table.find(".k-grid-edit").hide();
    }
</script>

Regards,
Rosen
the Telerik team

[habeeb]

Has anything changed since ? This does not seem to work. I don't want any edit functionality. Just want insert.

 

Also, if I do below, it is adding a new empty colomn in table. Is this a bug ?

columns.Command(command => { command.Edit(); command.Destroy(); });

[Rosen]

Hello habeeb,

The mentioned approach is still applicable. If you are getting empty command column, then I guess it is working at your end as it is hiding the command buttons. 

Note that the command buttons column is required when using inline editing, even when only insert operation is used as it is holding the update/cancel button shown during editing. If you want to not have the command column at all you should consider using Popup editing instead. Another approach will be to use a external button and use the Grid's API to submit the record.

Regards,
Rosen
Telerik

[Leo]

OP question is over 3 years old, but still same situation?

I need a create only grid. It will only show the save button as command.Edit() is used and that can only be used if the datasource as an .Update() method defined. And i need to clutter the javscript withsome piece of code to hide the Edit buttons.

I think the toolbaar.Create() button should be enough to get the wrappers to render the save buttons.

 

[Alex Hajigeorgieva]

Hi, Leo,

You could use the Command buttons Visible() method now and check if the row has a new item in it to show the Update/Cancel buttons:

columns.Command(c =>
{
      c.Edit().Visible("showOnNew");
      c.Destroy();
});

<script>
   function showOnNew(dataItem) {
       return dataItem.isNew();
   }
</script>

As for the Update operation in the data source definition, that would still be necessary but it could be anything really, even a space would do:

.Update(upd => upd.Action(" ", " "))

If you think that a lot of people would like to have this functionality built-in, we should log a Feature Request and that will allow the feature to become popular and upvoted. When a feature request collects a lot of votes it gets pushed forward for implementation by the team.

Let me know what you think of the approach I mentioned above and if you like we can open a feedback item on your behalf.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Andy]

Hi Alex,

Is this solution is only intended to work when the datasource is set to Ajax?

We have a hierarchical grid with 3 levels (using server side details templates). We want to allow them to Create top level items but not edit them so we have tried adding the following visible() method of the top grid

@{Html.Kendo().Grid<Location>(Model)
    .Name("Locations")
    .ToolBar(t => t.Create().Text(" TopLevel").IconClass("fas fa-plus text-success"))
    .Editable(e => e.Mode(GridEditMode.InLine))
    .Columns(columns =>
    {
      columns.Bound(e => e.Name);
      columns.Bound(e => e.Type);
      columns.Command(c => { c.Edit().Visible("function (dataItem) { return dataItem.isNew(); }"); });
    })
    .DetailTemplate(@<text>@RenderAreaGrid(item)</text>)
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model =>
        {
            model.Id(l => l.LocationId);
            model.Field(l => l.Type).Editable(false);
        })
        .Create("TopLocations_Create", "Location")
        .Update(" ", " ")
    )
    .Render()
;}

 

its just ignored if the datasource is set to server. If I change to Ajax then the Visible method works but we can't use the server side details to bind to a single hierarchical viewModel.

 

[Alex Hajigeorgieva]

Hello, Andy,

You are correct about the server bound grids. For them, you can use the RowAction() method as discussed in this forum post:

https://www.telerik.com/forums/how-do-i-conditional-set-the-visibility-of-the-command-edit-button-on-a-row-by-row-basis-#4u1jtFY7-k28ZWXjMOQYIA

For your purposes, it would look like this:

.RowAction(row =>
{
    if (row.DataItem.LocationId == 0 ) // or the defaultValue for the LocationId type
    {
        row.HtmlAttributes["class"] = "hide-buttons";
    }
})

Then, you can use CSS to hide the cancel button for example:

   <style>
        .hide-buttons .k-grid-cancel {
            display:none;
        }
    </style>

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Andy]

Thanks Alex that's what we needed!