1. Home
  2. Forum
  3. jQuery
  4. Delete records from grid and refresh

Delete records from grid and refresh

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

3 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team February 8, 2018 10:16 AM UTC

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. 



Regards, 
Thavasianand S. 


JJ Juan Jose Uribe February 8, 2018 01:30 PM UTC

Yes, that was the reason. Now it is working. 
Thanks so much,

Juan J.

TS Thavasianand Sankaranarayanan Syncfusion Team February 9, 2018 04:34 AM UTC

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. 


Loader.
Up arrow icon