We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Deleting rows

Thread ID:

Created:

Updated:

Platform:

Replies:

121939 Feb 10,2016 08:54 AM Feb 12,2016 02:32 AM ASP.NET Web Forms 3
loading
Tags: Grid
Jorge Pampin
Asked On February 10, 2016 08:54 AM

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 [Syncfusion]
Replied On February 11, 2016 04:11 AM

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
Replied On February 11, 2016 12:54 PM

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 [Syncfusion]
Replied On February 12, 2016 02:32 AM

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;