This is a migrated thread and some comments may be shown as answers.

Delete a row that has an image on row template grid

4 Answers 284 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Juan
Top achievements
Rank 1
Juan asked on 20 Oct 2016, 12:53 PM

Can anyone help me how to delete a row from a row template grid.

I am using this kind of grid http://demos.telerik.com/aspnet-mvc/grid/rowtemplate,

is there an option that i can use with the Batch Editing grid that has a destroy button, that`s because i want to delete a row that has an image.

I will wait for your answers.

 

4 Answers, 1 is accepted

Sort by
0
Stephen
Top achievements
Rank 2
answered on 20 Oct 2016, 06:33 PM

You can add the button column as part of the row template, example http://dojo.telerik.com/@Stephen/eXIZe.

 

You should also be able to use a column template for your image instead of a full row template and then use "regular" columns for your other field including, built-in destroy command button/column.

0
Juan
Top achievements
Rank 1
answered on 20 Oct 2016, 07:35 PM

Thanks for your help.

The thing is that i'm doing this in MVC like this:

@(Html.Kendo().Grid<TelerikMvcApp4.Models.PublicacionImagenModel>()
    .Name("grid")
    .HtmlAttributes(new { style = "height:400px;" })
    .Columns(columns =>
    {
        columns.Template(e => { }).ClientTemplate(" ").Width(140).Title("Image").HtmlAttributes(new { style = "height:50px" });
        columns.Bound(e => e.Puim_clave_pub).Width(270).Title("ID Publication").HtmlAttributes(new { style = "height:50px" });
    })
    .ClientRowTemplate(
        "<tr data-uid='#: uid #'>" +
            "<td class='photo'>" +
            "<img src='data:image/png;base64,#: imagen64 #' alt='#: data.Puim_clave_pub #' style='width: 180px; height:100px;'/>" +
            "</td>" +
            "<td class='details'>" +
                "<span class='title'>#: Puim_clave_pub #</span>" +
            "</td>" +
            "<td style='width:80px'>" +
                "<a class='k-button k-button-icontext k-grid-delete'" +
            "<span class='k-icon k-delete'></span>Eliminar</a>" +
            "</td>" +
         "</tr>"
    ).DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(10)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.Puim_clave_pub);
        })
        .Read(read => read.Action("RowTemplate_Read", "Gestion"))
    //.Destroy(destroy => destroy.Action("Editing_Destroy_Img", "Gestion"))

    )
    .Scrollable()
        )

And i don`t know how to call the method that would delete the row from database.

I am doing something like this when i click the delete button in javascript,

<script type="text/javascript">
        $("#grid").on("click", ".k-grid-delete", function (e) {
            $.ajax({
                url: "@Url.Action("Editing_Destroy_Img", "Gestion")",
                //data: "{'id': '" + ??+ "' }", --> how to get the uid of the current row
                dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                alert("Success")
            },
            error: function (request, status, error) {

            },
            failure: function (response) {
                alert("arriva al failure");
            }
        });          
        });
    </script>

but i don`t know how to obtain the especific id of the row that i want to delete.

Please, I'll be very greatful if you help me with this issue and if you know other way to do this in mvc I'll be very greatful too if you show me the way to do it.

 

 

0
Stephen
Top achievements
Rank 2
answered on 21 Oct 2016, 01:00 PM

If your grid is set to .Batch(true), you do not want to implement that button click delete handler.  Batch mode implies that you make a bunch of changes to the grid in the browser *that are not submitted as they are made* and then all of the changes are submitted at once when you trigger the grid.saveChanges() or grid.dataSource.sync().

 

So, in your case, I would remove the click handler.

Then, clicking the button will simply remove the row from the grid(and add it to the grid dataSource's destroyed collection, this happens automagically because of the k-grid-delete class on the button) but not trigger anything on the server yet.  

Then, when you submit your grid changes, all the destroyed rows will be sent to your server delete action at that time.

 

You should explore the demo at http://demos.telerik.com/aspnet-mvc/grid/editing.  All the source code for the example is available in the \wrappers\aspnetmvc\Examples folder in your UI for ASP.NET MVC installation folder.

0
Stephen
Top achievements
Rank 2
answered on 21 Oct 2016, 01:08 PM

If you *really* want to just get the id of the row in your button click:

var grid = $("#grid").getKendoGrid(),
  dataItem = grid.dataItem($(this).closest("tr")),
  id = dataItem.ID;

 

In this context, this == the button that was clicked, which is then used to get the <tr>, which is then used to get the corresponding item from the dataSource.

 

 

Tags
Grid
Asked by
Juan
Top achievements
Rank 1
Answers by
Stephen
Top achievements
Rank 2
Juan
Top achievements
Rank 1
Share this question
or