Custom Toolbar and adding checkbox for each rows issue

[Yujin Wu]

1. How to set checkbox or radiobutton in the first column of the grid for each rows?

We want to add "Select-All" and "Opposite Select" functionality

in the header of the grid, when "Select-All" is clicked, all of the rows in the current page are selected, and it can be deleted when a user-definied button "Delete All" are clicked;

"Opposite Select" means the selected rows are unselected and meanwhile the unselected rows are selected;

2. How to add a custom button in the toolbar of the grid and implement user-defined events such as a new window are popped out when the button is clicked?

currently we use below codes and set "GridToolBarItems.Custom" property for the grid, however we don't know how to associate a button-click event with this custom button.

.ToolBar(tools =>{tools.Add(GridToolBarItems.AddNew).Add(GridToolBarItems.Custom);})

Appreciated for your helps.

[Alan Sangeeth S]

Hi Yujin,

Thanks for using Syncfusion Products.

Query 1: “to set checkbox or radiobutton in the first column of the grid”

We suggest you to use template column to have check box in a column and to have checkbox in column header, we can use HeaderText property.

 Please refer the following code snippets.

Code Snippet:

[CSHTML]

@{Html.Syncfusion().Grid<custom.Models.Student>("GenericListGrid")

…

cols.Add("Add").HeaderText("<input type='checkbox' id='headercheck'/>").TemplateColumn(true).TemplateName("Partial").Width(130);

..

)

Query 2: “Select-All functionality”

For Select-All functionality we can use click event of column header checkbox and in that event we can select all rows by using the client-side function “selectMutipleRows”. Please refer the following code snippet.

Code Snippet:

[JAVASCRIPT]

$('#headercheck').click(function () {

 

var checkbox = $find("GenericListGrid")._gridContentTable.children[1];

var rowslength = $find("GenericListGrid")._gridContentTable.rows.length;

for (var i = 0; i < rowslength; i++) {

 

$(checkbox.rows[i]).find("#check").click()

var univCode = $($(checkbox.rows[i].children)[2]).text();

if ($("#headercheck").is(":checked") != true) {

$find("GenericListGrid").deselectRow((rowslength - 1)); // To unselect rows

 

}

else {

myArray.push(univCode); // TO get records for deletion operation

$find("GenericListGrid").selectMutipleRows(0, (rowslength - 1)); // To select rows

}

} 

});

Query 3: “Opposite Select functionality”

We have created custom sample request for this query and we will update you with solution on February 21, 2014.

Query 4: “custom button in the toolbar to pop-up a window and Delete-All functionality”

We can have a custom button in toolbar using “Template” property and by using “OnToolbarClickEvent” clientsideevent we can pop-up a dialog window. For Delete-All functionality, we can pass the selected records to DeleteAll Controller Action and from there we can delete those records. Please refer the following code snippet:

Code Snippet:

[CSHTML]

@{Html.Syncfusion().Grid<custom.Models.Student>("GenericListGrid")

…

.ClientSideEvents(c => c.OnToolbarClickEvent("ToolbarClick"))

.ToolBar(tools =>

{

tools.Template(@<div>

<li><button id="opener">Open the dialog</button></li>

<li><button id="check1">DeleteAll</button></li>

</div>

);

…

)

[JAVASCRIPT]

function ToolbarClick(sender, args)

{

var checkbox = $find("GenericListGrid")._gridContentTable.children[1];

var rowslength = $find("GenericListGrid")._gridContentTable.rows.length;

if (args._currentItemIndex == 0)

{

$('#dialog').dialog({

title: "dialog",

autoOpen: false,

width: 400,

height:350

});

$("#dialog").dialog("open");

}

 

if (args._currentItemIndex == 1)

{

if(myArray.length!=0){

$.ajax({

url: "/Layout/DeleteAll",

type: 'POST',

datatype: 'json',

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

data: JSON.stringify({ DelAll: myArray }),

 

success: function (data) {

$find("GenericListGrid").sendRefreshRequest();

$('#headercheck').prop('checked', false);

myArray = [];

} 

});

}

else{

alert("All Records are not selected");

}

}

}

For your convenience we have created a sample and the same can be downloaded from below link.

Sample:

http://www.syncfusion.com/downloads/support/directtrac/118618/custom1851820260.zip

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

[Alan Sangeeth S]

Hi Yujin,

Thanks for your patience.

We have created custom sample for your requirement and the same can be downloaded from below link.

Sample:

http://www.syncfusion.com/downloads/support/directtrac/119364/custom-1431779880.zip

Please let us know if you have any queries.

Regards,
Alan Sangeeth S