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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom Toolbar and adding checkbox for each rows issue

Thread ID:

Created:

Updated:

Platform:

Replies:

115853 Feb 12,2014 03:06 AM UTC Feb 21,2014 08:41 AM UTC ASP.NET MVC (Classic) 2
loading
Tags: Grid
Yujin Wu
Asked On February 12, 2014 03:06 AM UTC

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 [Syncfusion]
Replied On February 18, 2014 06:08 AM UTC

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 [Syncfusion]
Replied On February 21, 2014 08:41 AM UTC

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


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.

Warning Icon 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.Close Icon

;