How to add CheckBox to the Grid

Jun 14, 2011 at 2:46 PM

Hi

I have to add check box filed to the Grid for select All e.t.c...

How to do that  .. the following is my grid code

 

@Html.Grid(new GridControl()
        .SetName("grid")
        .SetPageSize(10)
        .SetIsAutoSize(true)
        //.SetOnGridCompleteEvent("createActionControls")        
        .SetListUrl(ViewData["URL"].ToString())
        .SetEditUrl("/Renderers/EditBank")
        .SetHeight("'100%'")
        .AddColumn(header: "Print?", format: @
<text>@item.Printable == 1 ?<input name="Prints"
                type="checkbox": ""
</text>)
        .SetOnGridCompleteEvent("createActionControls")
        //.SetOnSelectedRowEvent("window.location.href ='Members/Details/'+id;")        
        //.AddColumn(.Column(format: (item) => Html.CheckBox(item.Id)),)  
        .UseColumns(Columns.BankData)
            .UpdateDefaultPager(pager =>
                pager
                    .ShowAdd(true)
                    .ShowDel(true, deleteUrl: "/Renderers/DeletePerson")
                    .ShowEdit(true)
                    .ShowView(true)
                ))
Coordinator
Jun 14, 2011 at 3:36 PM

Do use want the checkbox for editing mode or viewing mode?

Jun 15, 2011 at 5:19 AM

In Both and in the grid also to delete more than one record at a time.....

Coordinator
Jun 15, 2011 at 10:34 AM

To use checkboxes for edit-mode is possible using a simple implementation of the IColumnRenderer (I'll commit one later on today).

For view mode, it is possible by defining a custom formatter though it'll force you to render and manage the cell HTML,
which could be a bit of a headache and frankly I cant see a reason why to. 

Jun 15, 2011 at 1:41 PM

private static GridColumnModelList<BankMaster> CreateBankColumns()
        {
            GridColumnModelList<BankMaster> cn1 = new GridColumnModelList<BankMaster>();                       
            cn1.Add(p => p.SlNo).SetAsPrimaryKey().SetEditable(false);
            cn1.Add(p => p.BBCode).SetCaption("Bank Code");
            cn1.Add(p => p.BBName);
            cn1.Add(p => p.BranchName);
            cn1.Add(p => p.SlNo > 0).SetName("City.Id").SetCaption("CityId").SetColumnRenderer(new ComboColumnRenderer("/Renderers/GetCities")).SetIndex("4");
            return cn1;
        }

In the above i have to add one more column as cn1.Add(p => p.IsActive). In this case i need to show checkbox on create, edit views.. So, guide me where i can add IColumnRenderer....(code i am expecting)

 

I have requirement like, i have to delete multiple records at a time. So in that case i need check boxes what and all the rows has to be deleted...

Jun 16, 2011 at 1:10 PM

hi sternr i am waiting for your reply

Coordinator
Jun 16, 2011 at 1:21 PM

I didn't have time to post a complete response, I'll write one later on today.

Developer
Jun 16, 2011 at 2:59 PM

I figured out a solution for both edit and view modes, I'll post it after this one.

Developer
Jun 16, 2011 at 3:37 PM
Edited Jun 16, 2011 at 4:05 PM

 

A way to do this is to use the same method that is posted here to add buttons to a column. 
First you need to add a column to house the checkboxes. 
In your example, you would have to add a property (Actions) to the BankMaster class:
public class BankMaster
{
	[Key]
	public int SlNo{ get; set; }

	public string Actions{ get; set; }

	[Display(Name="Bank Code")]
	public string BBCode{ get; set; }
	public string BBName{ get; set; }
	public string BranchName{ get; set;
}
Then the GridColumnModelList would look like this:
private static GridColumnModelList CreateBankColumns()
{
	GridColumnModelList cn1 = new GridColumnModelList();                    
	cn1.Add (p => p.Actions);
	cn1.Add(p => p.SlNo).SetAsPrimaryKey().SetEditable(false);
	cn1.Add(p => p.BBCode).SetCaption("Bank Code");
	cn1.Add(p => p.BBName);
	cn1.Add(p => p.BranchName);
	cn1.Add(p => p.SlNo > 0).SetName("City.Id").SetCaption("CityId").SetColumnRenderer(new ComboColumnRenderer("/Renderers/GetCities")).SetIndex("4");
	return cn1;
}
As well you should define the data you want to send back for each item. 
In your case, it looks like you want a checkbox for both printing and deleting.
public class BankGridAction
{
    public int SlNo { get; set; }
    public bool Print { get; set; }
    public bool Delete {get; set; }
}
In your grid, you are already are calling the set on grid complete event .SetOnGridCompleteEvent("createActionControls") 
so we will use that function. Thus your grid code will be the same:
@Html.Grid(new GridControl()
	.SetName("grid")
	.SetPageSize(10)
	.SetIsAutoSize(true)
	.SetListUrl(ViewData["URL"].ToString())
	.SetEditUrl("/Renderers/EditBank")
	.SetHeight("'100%'")
	.SetOnGridCompleteEvent("createActionControls")
	.UseColumns(Columns.BankData)
	.UpdateDefaultPager(pager =>
		pager
			.ShowAdd(true)
			.ShowDel(true, deleteUrl: "/Renderers/DeletePerson")
			.ShowEdit(true)
			.ShowView(true)
		))
To get the data back, you can either put a parameter in your controller method, or, if you want 
to keep the list of actions results in your model, you will have to call the Update Model method. 
For example:
public ActionResult Index (BankViewModel model, List <BankGridAction> gridActions)
{
	//code to handle the grid actions
}

//or if you want it in your BankViewModel
public ActionResult Index (BankViewModel model)
{
	UpdateModel<List<BankGridAction>>(model.gridActions,"gridActions");
	//code to handle the grid actions
}
Finally, the createActionControls function. Keep in mind, the variable name that we are using 
is gridActions. It is important to use the exact name so the model binder can find it. As well, 
we use two inputs for the checkboxes because by default, checkboxes only return values if they 
are checked. By adding the second, we ensure that a value is returned for each 'checkbox' and 
the model binder can work.
function createActionControls(data) {
	var ids = jQuery("#grid").getDataIDs();
	for (var i = 0; i < ids.length; i++) {
		var currentID = ids[i];

		printCheckBox = ""
		printCheckBox = printCheckBox + "<input name='gridActions[" + i + "].Print' type='checkbox' value='true' />"
		printCheckBox = printCheckBox + "<input name='gridActions[" + i + "].Print' type='hidden' value='false' />"

		deleteCheckBox = ""
		deleteCheckBox = deleteCheckBox + "<input name='gridActions[" + i + "].Delete' type='checkbox' value='true' />"
		deleteCheckBox = deleteCheckBox + "<input name='gridActions[" + i + "].Delete' type='hidden' value='false' />"

		idField = "<input name='gridActions[" + i + "].SlNo' type='hidden' value='" + currentID + "' />";

		jQuery("#grid").setRowData(ids[i], { Actions: printCheckBox + deleteCheckBox + idField });
	}
}
Hope that works for you!
Jul 11, 2011 at 3:34 AM

Not sure how much it helped vijayreddy59 but it sure helped me. Very much appreciated - thx!