Delete a row that has an image on row template grid

5 posts, 0 answers
  1. Juan
    Juan avatar
    22 posts
    Member since:
    Oct 2016

    Posted 20 Oct Link to this post

    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.

     

  2. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 20 Oct in reply to Juan Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Juan
    Juan avatar
    22 posts
    Member since:
    Oct 2016

    Posted 20 Oct in reply to Stephen Link to this post

    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.

     

     

  5. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 21 Oct in reply to Juan Link to this post

    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.

  6. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 21 Oct Link to this post

    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.

     

     

Back to Top
Kendo UI is VS 2017 Ready