Delete records from grid and refresh

[Juan Jose Uribe]

Hi, 

I have a grid wiht multiselect option that can be filtered. I want to delete records from the grid and refresh the view in javascript. I check the records, process them at server side and i want to delete them from the grid in the view, but the grid view doesn´t change. 

My code (uploaded in zip file as well):

The controller:

public class HomeController : Controller

    {

        public ActionResult Index()

        {

            List<GridDeleteSample.Models.EquiposGeotabUI> lstEquipos = new List<Models.EquiposGeotabUI>();

            for (int i=0; i<10; i++)

            {

                GridDeleteSample.Models.EquiposGeotabUI equipo = new Models.EquiposGeotabUI()

                {

                    DatabaseName = "DB name " + i.ToString(),

                    DeviceId = i,

                    IdEquiposGeotab = i,

                    DeviceType = "Device type " + i.ToString(),

                    LicensePlate = "NKN-" + i.ToString(),

                    SerialNumber = "Serial No. 00" + i.ToString(),

                    Vin = "VIN0000" + i.ToString()

                };

                lstEquipos.Add(equipo);

            }

            ViewBag.Equipos = lstEquipos;

            return View();

        }

        public ActionResult IndexPost(int[] ids)

        {

            //Do Something with ids

            return Json(new { exito = true, msg = "OK" }, JsonRequestBehavior.AllowGet);

        }

        

    }

----------------------------------

The view (cshtml)

@{

    ViewBag.Title = "Home Page";

    IEnumerable<GridDeleteSample.Models.EquiposGeotabUI> equipos = ViewBag.Equipos as IEnumerable<GridDeleteSample.Models.EquiposGeotabUI>;

}

<legend>Delete sample</legend>

<div class="row">

    <ContentSection>

        <div class="col-lg-12 no-margin no-padding">

            @using (Html.BeginForm("AsignarEquiposGeotabPost", "ClienteContrato", FormMethod.Post, new { id = "formularioEquipos" }))

            {

                @(Html.EJ().Grid<IEnumerable<object>>("ListaEquiposGeotab")

            .Datasource(equipos)

            .Columns(col =>

            {

                col.Field("IdEquiposGeotab").IsPrimaryKey(true).Visible(false).Add();

                col.Type("checkbox").Width("5em").Add();

                col.Field("DatabaseName").HeaderText("Base datos").Type("string").Width("10em").Add();

                col.Field("LicensePlate").HeaderText("Placa").Type("string").Width("10em").Add();

                col.Field("DeviceType").HeaderText("Tipo").Type("string").Width("5em").Add();

                col.Field("SerialNumber").HeaderText("Serial").Type("string").Width("10em").Add();

                col.Field("Vin").HeaderText("Vin").Type("string").Width("10em").Add();

            })

            .Locale("es-CO")

            .AllowScrolling()

            .IsResponsive()

            .AllowPaging()

            .AllowSearching()

            .ToolbarSettings(toolbar =>

            {

                toolbar.ShowToolbar().ToolbarItems(items =>

                {

                    items.AddTool(ToolBarItems.Search);

                });

            })

                )

            }

        </div>

        <div class="row">

            <div class="col-md-2">

                <br />

                <input type="button" id="btnAsignar" class="btn btn-primary" value="Delete" onclick="enviarEquiposChecked()" />

            </div>

        </div>

    </ContentSection>

</div>

<script src="~/Scripts/Delete.js"></script>

--------------------------------------------------------

The script Delete.js:

    function enviarEquiposChecked() {

        debugger;

        var gridObj = $("#ListaEquiposGeotab").ejGrid("instance");

        var rec = [];

        var idEquipos = [];

        var check = gridObj.checkSelectedRowsIndexes;

        if (check.length == 0) {

            alert("No records selected");

        }

        else {

            for (var pageInx = 0; pageInx < check.length; pageInx++) {

                if (!ej.isNullOrUndefined(check[pageInx]))

                    rec = getRecords(pageInx, check[pageInx], gridObj, rec);

            }

            for (var i = 0; i < rec.length; i++) {

                idEquipos[i] = rec[i].IdEquiposGeotab;

            }

            $.ajax({

                url: "/Home/IndexPost",

                type: "POST",

                datatype: "json",

                contentType: "application/json; charset=utf-8",

                data: JSON.stringify({ids: idEquipos }),

                success: function (result) {

                    if (result.exito) {

                        for (var i = 0; i < rec.length; i++) {

                            //gridObj.deleteRecord("IdEquiposGeotab", rec[i]);

                            $("#ListaEquiposGeotab").ejGrid("deleteRecord", "IdEquiposGeotab", rec[i]);

                        }

                        gridObj.refreshContent();

                        $("#ListaEquiposGeotab").ejGrid("refreshContent");

                    }

                    else {

                        alert(result.msg);

                    }

                },

                error: function (jqXHR, textStatus, error) {

                    alert(error);

                }

            });

        }

    }

    function getRecords(pageInx, inx, proxy, rec) {

        var data;

        if (inx.length) {

            for (var i = 0; i < inx.length; i++) {

                var pageSize = proxy.model.pageSettings.pageSize;

                if (proxy.model.searchSettings.fields.length) {

                    data = proxy.getFilteredRecords()[pageInx * pageSize + inx[i]];

                }

                else {

                    data = proxy.model.dataSource[pageInx * pageSize + inx[i]];

                }

                rec.push(data);

            }

        }

        return rec;

    }

Attachment: DeleteRecrodsGrid_d59dec7c.zip

[Thavasianand Sankaranarayanan]

Hi Juan, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we found that you not enable the allowDeleting property in editSettings of ejGrid control. This might be the root cause of your issue. So, we suggest you to enable the allowDeleting property of ejGrid control. 

Refer the below code example. 

@(Html.EJ().Grid<Object>("FlatGrid") 

            .Datasource((IEnumerable<object>)ViewBag.DataSource) 

            .AllowPaging() 

 

            .EditSettings(edit => { edit.AllowDeleting(); }) 

             

            .Columns(col => 

              { 

                  col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add(); 

                   

                   ---- 

 

              })) 

  

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:editsettings-allowdeleting 

Link: https://help.syncfusion.com/aspnetmvc/grid/editing#toolbar-with-edit-option 

Regards, 

Thavasianand S. 

[Juan Jose Uribe]

Yes, that was the reason. Now it is working. 

Thanks so much,

Juan J.

[Thavasianand Sankaranarayanan]

Hi Juan, 

 

We are happy that the problem has been solved at your end. 

 

Please get back to us if you need any further assistance.  

 

Regards, 

Thavasianand S.