Deleting rows

[Jorge Pampin]

Hello,
I have two questions:

- How to delete by javascript all rows of a child Grid?
- I have a child Grid with a Context Menu option to delete the selected row, how Can I do this into contextClick event?

Thanks!

[Seeni Sakthi Kumar Seeni Raj]

Hi Jorge,

Query #1: How to delete by javascript all rows of a child Grid?

To delete all records from the Grid, we suggest to use the dataSource() by passing an empty datasource to it. Refer to the code example.

    <ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True">

        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>

        <ToolbarSettings ShowToolbar="True">

            <CustomToolbarItem>

                <ej:CustomToolbarItem TemplateID="#DeleteAll" />

            </CustomToolbarItem>

             . . . .

        </ToolbarSettings>

        <ClientSideEvents ToolbarClick="onToolBarClick" />

    </ej:Grid>

    <script>

        function onToolBarClick(args) {

            if (args.itemName == "DeleteAll")

                this.dataSource([]);

        };

    </script>

    <script id="DeleteAll" type="text/x-jsrender">

        <a class="e-toolbaricons DeleteAll" />

    </script>

    <style type="text/css" class="cssStyles">

        .DeleteAll:hover {

            background-image: url("../Content/ej/web/common-images/ribbon/Check.png;");

        }
    </style>

For sample purpose, we have placed the DeleteAll functionality within the custom toolbar’s ToolbarClick event. Refer to the Help Documents and online demo for custom toolbars items.

http://asp.syncfusion.com/demos/web/grid/toolbartemplate.aspx

http://help.syncfusion.com/js/api/ejgrid#members:toolbarsettings-customtoolbaritems

http://help.syncfusion.com/js/api/ejgrid#events:toolbarclick

Query #2: I have a child Grid with a Context Menu option to delete the selected row, how Can I do this into contextClick event?

Using deleteRecord() of Grid, we can delete the selected record via contextClick event. deleteRecord will accept the two arguments, first one is the primarykey name and second is the record to be deleted.

    <ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True">

        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>

        <ClientSideEvents ContextClick="conClick"/>

          .  .. .

    </ej:Grid>

    <script>

        function conClick(args) {

            if(args.text=="DeletesRow")

                this.deleteRecord("OrderID",this.model.selectedRecords[0]);

        };

    </script>

Refer to the Help Document.

http://help.syncfusion.com/js/api/ejgrid#methods:deleterecord

http://help.syncfusion.com/js/api/ejgrid#events:contextclick

If the above solution doesn’t satisfy your requirement, please provide the following information which would be helpful to analyze the requirement and provide you solution as early as possible.

1)      Are you using a ejGrid (Javascript) or ASP Grid ?

2)      Code example of  Grid

3)      Please provide more information about your requirement.

Regards,
Seeni Sakthi Kumar S.

[Jorge Pampin]

Hello,

Query #1: How to delete by javascript all rows of a child Grid?

I don't want to delete a row from the grid. In the onToolBarClick event I want to delete all records of the child grid of the selected record.

Query #2: I have a child Grid with a Context Menu option to delete the selected row, how Can I do this into contextClick event?

I want to do this but with a chid grid. This is my chid grid code generator:
function detailGridDataDimensionesCOFs(e)
{
    var data = e.data.CuentasDimensionesCOFRows;

    var idControl = e.model.clientId.replace("_ctl01_GdcCOFsDimensiones", "");

    idControl = idControl + "_ctl00_HFColumnasAsignaciones";
    var result = document.getElementById(idControl).value;
    var Columnas = JSON.parse(result);

    var CM = [];
    if (COSoloLectura())
    {
        CM =  [TextoEDITARFORMULAS, TextoVERASIGNACION] ;
    } else {
        CM = [TextoEDITARFORMULAS, TextoVERASIGNACION, TextoELIMINARESTEIMPACTO, TextoELIMINARTODASLASFORMULASDELIMPACTO, TextoRECUPERARFORMULASORIGINALES];
    }

    var g = e.detailsElement.find("#detailDimensionesCOFs").ejGrid({
        dataSource: data,
        locale: GetLocale(),
        allowSelection: true,
        columns: Columnas,
        editSettings: { allowAdding: false, allowEditing: false },
        contextMenuSettings: { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: CM },
        contextClick: 'contextClick_detailDimensionesCOFs',
        queryCellInfo: function (args) { GdcCOFsDimensionesAsignaciones_QueryCellInfo(args); },
        toolbarSettings: { showToolbar: false },
        allowResizeToFit: true,
        idPadre:e.model.clientId
    });
}
Thansk!

[Seeni Sakthi Kumar Seeni Raj]

Hi Jorge,

Query #1: How to delete by javascript all rows of a child Grid?

We have considered your requirement “Multiple Records deleted in Grid” as a feature and created a new incident 151027 for better follow-up.

To work around this requirement, based on the number of selected records call the deleteRecord() with the primaryKey (OrderID in our case) and record to be deleted. Refer to the code example.

    <div id="Grid"></div>

    <script id="GridContents" type="text/">

        <div id="gridTab{{:EmployeeID}}">

            <div id="detailGrid{{:EmployeeID}}">

            </div>

        </div>

    </script>

    <script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

                dataSource: ej.DataManager(window.employeeView),

                detailsTemplate: "#GridContents",

                detailsDataBound: "detailGridData",

                     .. . . .. .

            });

        });

        function detailGridData(e) {

            var filteredData = e.data["EmployeeID"];

            var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));

            e.detailsElement.find("#detailGrid" + filteredData).ejGrid({

                dataSource: data,

                selectionType: "multiple",

                toolbarClick: function (args) {

                    if (args.itemName == "Delete") {

                        var records = this.model.selectedRecords;

                        for (var del = 0; del < records.length; del++) {

                            this.deleteRecord("OrderID", records[del]);

                        }

                        args.cancel = true;

                    }

                },

                . . . . . .

                columns: [

                           . . . . .

                ]

            });

        }
    </script>

Query #2: I have a child Grid with a Context Menu option to delete the selected row, how Can I do this into contextClick event?

Refer to the following code example which explain you the way to delete the selected record from Grid through the contextClick event.

    <div id="Grid"></div>

    <script id="GridContents" type="text/">

        <div id="gridTab{{:EmployeeID}}">

            <div id="detailGrid{{:EmployeeID}}">

            </div>

        </div>

    </script>

    <script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

                dataSource: ej.DataManager(window.employeeView),

                detailsTemplate: "#GridContents",

                detailsDataBound: "detailGridData",

                   . . . . . ..

        });

        function detailGridData(e) {

            var filteredData = e.data["EmployeeID"];

            var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));

            e.detailsElement.find("#detailGrid" + filteredData).ejGrid({

                dataSource: data,

                selectionType: "multiple",

                contextMenuSettings: { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: ['DeleteRow'] },

                contextClick: function (args) {

                    if (args.text == "DeleteRow")

                        this.deleteRecord("OrderID", this.model.selectedRecords[0]);

                },

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                columns: [

                       . . . . . .

                ]

            });

        }
    </script>

We have prepared a sample that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/hhaeasuz

Regards,
Seeni Sakthi Kumar S.