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. Image for the cookie policy date
close icon

How do I delete multiple selected ranges of rows in a Grid

Hi,

I need to delete multiple selected using :

AllowSelection()
            .SelectionType(SelectionType.Multiple)
            .SelectionSettings(select => { select.SelectionMode(mode => { mode.AddMode(SelectionMode.Row); }); })

or checkbox ??

The Grid code :

@model System.Data.DataTable
@(Html.EJ().Grid<System.Data.DataTable>("FlatGrid")
            .Datasource((System.Data.DataTable)Model)
            .AllowPaging()
            .AllowResizeToFit()
            .AllowScrolling()
            .ScrollSettings(col => { col.FrozenColumns(2); })
            .EditSettings(edit => { edit.AllowDeleting(); })
            .ToolbarSettings(toolbar =>
            {
                toolbar.ShowToolbar().ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.Delete);
                });
            })
            .Columns(col =>
            {
                col.Type("checkbox").Width(50).Add();
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    col.Field(column.ColumnName).Width(150).Add();
                }
                col.Field("ResponseID").IsPrimaryKey(true);
            })

)

3 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 20, 2017 04:21 PM UTC

Hi Customer, 

You can select multiple rows and perform deletion by using check box selection itself. By clicking the checkbox you can select the particular rows and perform deletion operation on that. 

Please refer to the sample attached. 

http://www.syncfusion.com/downloads/support/forum/131610/ze/Sample145862-1874765724 

Please let us know if you need any further assistance. 

Regards, 

Farveen sulthana T 



AL ALJANE July 21, 2017 08:09 AM UTC

Hi Sulthana,

Thank you for your reply,

It work when i set data like this :

.Columns(col =>
        {
            col.Type("checkbox").Width(50).Add();
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).ValidationRules(v => v.AddRule("required",true).AddRule("number", true)).Width(100).Add();
           
            col.Field("Freight").HeaderText("Freight").Format("{0:c2}").Width(100).Add();
            col.Field("OrderDate").HeaderText("Order Date").Format("{0:MMM dd,yyyy}").Width(100).Add();
            col.Field("ShipAddress").HeaderText("Ship Country").EditType(EditingType.Dropdown).Width(100).Add();
          
        })

But is not working when I am using "foreach"!!!

I have Datatable as Datasource with about 146 columns...

I make some changes in your example, can you perform multiple selected range with this update,


Best regards

ALJANE


Attachment: Sample145862_10532825.rar


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 24, 2017 11:29 AM UTC

Hi Customer, 

We have checked your modified sample and we can able to reproduce your reported problem “multiple row deletion using checkbox”  while using “foreach” for binding the Columns. The problem occurs due to “IsPrimaryKey” value for the column has not updated while using this method. Because IsPrimaryKey is necessary to perform Editing operation in Grid. So we suggested you to update the IsPrimaryKey for the particular column using “DataBound” event of the Grid. 

Please refer to the code example:- 

Client side:- 
@(Html.EJ().Grid<object>("FlatGrid") 
            .Datasource((System.Data.DataTable)Model) 
            .AllowPaging() 
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
              
            .ClientSideEvents(eve => { eve.DataBound("dataBound"); }) 
            .Columns(col => 
            { 
              foreach (System.Data.DataColumn column in Model.Columns) 
            { 
                col.Field(column.ColumnName).Width(100).Add(); 
            } 
        }) 
 
    ) 
        <script type="text/javascript"> 
            function dataBound(args) { 
                var column = this.getColumnByIndex(1); 
                column.isPrimaryKey = true; 
                //Here columns method used to update the particular column 
                this.columns(column, "update"); 
            } 
        </script> 
     



Please refer to the modified sample:- 


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

Regards, 

Farveen sulthana T 


Loader.
Live Chat Icon For mobile
Up arrow icon