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

DataGrid Command Buttons Not Working

Good day,

I have the following bit of code in a cshtml file.  It renders nicely but I don't seem to have a clue how to the View and Execute buttons to work.

Similar functionality in Telerik looks like this (maybe I am being thrown off because the paradigm is different but I can't figure it out and don't seem to be able to pick anything out from the documentation - possibly looking in the wrong place).

            columns.Command(
                commands =>
                {
                    //commands.Custom("btnCreateTradeOrder")
                    //    .Action(ActionNames.TradeOrderCreate, ControllerNames.Orders)
                    //    .ButtonType(GridButtonType.ImageAndText)
                    //    .SendDataKeys(true)
                    //    .Text("Create");
                    commands.Custom("btnViewClass")
                        .Action(ActionNames.SyncClassView, ControllerNames.Sync)
                        .DataRouteValues(route => route.Add(o => o.Id).RouteKey("id"))
                        .ButtonType(GridButtonType.Text)
                        .Text("View");
                    commands.Custom("btnExecuteClass")
                        .Action(ActionNames.SyncClassExecute, ControllerNames.Sync)
                        .DataRouteValues(route => route.Add(o => o.Id).RouteKey("id"))
                        .ButtonType(GridButtonType.Text)
                        .Text("Execute");
                });

@(Html.Syncfusion().Grid<HydSyncClass>("syncOpsGrid")
	.Datasource(this.Model.Element2)
	.CaptionText("Sync Operations")
	.Caption("Sync Operations")  
	.ShowCaption(true)
	.ShowRowHeader(true)
	.ShowStackedHeader(false)
	.RowsSelectionMode(RowsSelectionMode.Toggle)
	.Filtering(
		settings => settings.AllowFiltering(true).FilterBarMode(FilterBarMode.Immediate)
			.FilterDropDownType(FilterDropDownType.SimpleList)
			.FilterMode(FilterMode.Default)
			.ShowFilterStatusMessage(true)
	)
	.PageSettings(
		settings => settings.AllowPaging(true).PagerPosition(Position.BottomLeft)
			.PagerStyle(PagerStyle.DefaultAndAdvanced).PageSize(25)
	)
	.AllowResizing(true)
	.EnableSorting()            
	.Column(
		col=>
		{
			col.Add(op => op.Id).Format("{0:#,##0}")
				.HeaderText("ClassId")
				.TextAlign(Syncfusion.Mvc.Grid.TextAlignment.Right);
			col.Add(h => h.ClassName)
				.HeaderText("ClassName")
				.TextAlign(Syncfusion.Mvc.Grid.TextAlignment.Center);
			col.Add(h => h.ScheduleLastRunDate).Format("{0:yyyy-MM-dd HH:mm:ss}")
				.HeaderText("ScheduleLastRunDate")
				.TextAlign(Syncfusion.Mvc.Grid.TextAlignment.Center);
			col.Add(h => h.ActualLastRunDate).Format("{0:yyyy-MM-dd HH:mm:ss}")
				.HeaderText("ActualLastRunDate")
				.TextAlign(Syncfusion.Mvc.Grid.TextAlignment.Center);
			
			col.Add(				
					"Commands",
					unboundColumn =>
					{
						unboundColumn.Commands(
							cmd => cmd.Command(CommandTypes.Custom)
									.ItemType(UnBoundItemTypes.Button)
									.ItemOption(UnboundItemOptions.TextOnly)
									.Text("View")
						);
					
						unboundColumn.Commands(
							cmd => cmd.Command(CommandTypes.Custom)
									.ItemType(UnBoundItemTypes.HyperLink)
									.ItemOption(UnboundItemOptions.TextOnly)
									.Text("Execute")
						);
					}
				)
				.AllowEditing(false)
				.AllowFilter(false)
				.AllowGrouping(false)
				.AllowSearching(false)
				.AllowSorting(false)
				.HeaderText("_");
		}
	)
)




5 Replies

ES Eswari S Syncfusion Team February 28, 2013 03:48 AM UTC

Hi Eniola,

 

Thank you for using Syncfusion products.

 

We have provided response to your query in the incident #:104883.Could you please follow up with the above incident for further queries?

 

Please let us know if you have any queries.

 

Regards,

Eswari S



PJ paul jilek April 8, 2013 04:56 AM UTC

Hi Eswari
 
Would you please be able to send me the solution also?  I am struggling with the "Mapper" member of commands.  Does this have any relationship with regards to ".Mapper(mapper => mapper.Action".
 
What I am trying to do is have a Custom button in the last column of the grid where once I click onto it, the request will post back to the "CareUsers" controller to the "GetSubscriptions" method with the routing value of "UserId" for that row.
 
Here's my code thus far which is not working:
 

.Column(column =>

{

column.Add(item => item.UserId).HeaderText(

"UserId");

column.Add(item => item.AccountName).HeaderText(

"AccountName");

column.Add(item => item.Name).HeaderText(

"Name");

column.Add(item => item.FirstName).HeaderText(

"FirstName");

column.Add(item => item.Surname).HeaderText(

"Surname");

column.Add(item => item.MailAddress).HeaderText(

"MailAddress");

column.Add(item => item.Deprovisioned).HeaderText(

"Deprovisioned");

column.Add(item => item.Description).HeaderText(

"Description");

column.Add(item => item.Department).HeaderText(

"Department");

column.Add(item => item.Location).HeaderText(

"Location");

column.Add(

"Manage", col => col.Commands(cmd => cmd.Command(CommandTypes.Custom)

.Text(

"Subscriptions")

.ItemType(

UnBoundItemTypes.Button)

.ItemOption(

UnboundItemOptions.TextOnly)

.Mapper(

"GetSubscriptions")

)

)

.TextAlign(

TextAlignment.Center)

.AllowSearching(

false)

.AllowFilter(

false)

.AllowEditing(

false)

.UnBound(

true).Width(110);

}

)

.Mappers(mapper => mapper.Action(

"GetSubscriptions", new { id = "${UserId}" }))

.Editing(edit => edit.PrimaryKey(key => key.Add(p => p.UserId)))

Thanks

Paul

 



ES Eswari S Syncfusion Team April 9, 2013 01:04 PM UTC

Hi Paul,

 

Thank you for using Syncfusion products.

 

# Grid Mapper actions are used as the mapper for Paging/Sorting/Editing operations. Please refer to the following code snippets:

 

@{

        Html.Syncfusion().Grid<Student>("Simple_Grid")

       . .. 

      .Mappers(map =>

      {

          map.Action(“Index”) //used as the mapper for Grid Post action for Paging/Sorting, etc.

              .InsertAction("AddOrder")   //used as the mapper for inserting records

              .SaveAction("OrderSave")//used as the mapper for saving edited records

              .DeleteAction("DeleteOrder");//used as the mapper for deleting records

      })}

 

# Unbound column mappers are used to map some specific actions other than default editing actions. Please refer to the following code snippets:

@(Html.Syncfusion().Grid<EditableOrder>("JSONCRUD")

.ActionMode(ActionMode.JSON)

.Column(column => {

column.Add("Commands",

unboundColumn =>{unboundColumn.Commands(cmd => cmd.Command(CommandTypes.Custom)

.Mapper("ViewDetails?Orderid=${OrderID}"));});});

For example to retrieve the value of a selected record and view it by custom you can send a ajax post to action method defined in mapper by using $.ajax and in its success action you can retrieve the JSON data returned from action method. You can now process this data according to your need and display it. In order to retrieve the JSON data from action method call args.eventArgs.preventDefault() method at the end of OnCustomUnboundCellClickHandler event. Please refer below code snippet for further details.

[ cshtml ]

@(Html.Syncfusion().Grid<EditableOrder>("JSONCRUD")

.ActionMode(ActionMode.JSON)

.Column(column => {

column.Add("Commands",

unboundColumn =>{unboundColumn.Commands(cmd => cmd.Command(CommandTypes.Custom)

.ItemType(UnBoundItemTypes.Button)

.ItemOption(UnboundItemOptions.TextOnly)

.Mapper("ViewDetails?Orderid=${OrderID}")

.Text("View")

);

});

});

.ClientSideEvents(eve => eve.OnCustomUnboundCellClickHandler("CustomHandler"))

<script type="text/javascript">

function CustomHandler(sender, args) {

$.ajax({

type: 'POST',

url: args.eventArgs.target.rel='nofollow' href,

success: function (data) {

alert(data.OrderDetails.OrderID);

}

});

args.eventArgs.preventDefault();

}

</script>

[ Controller ]

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult ViewDetails(int? Orderid)

{

var data = OrderRepository.GetAllRecords().Where(ord => ord.OrderID == Orderid).FirstOrDefault();

return Json(new { OrderDetails = data });

}

For your convenience we have prepared a sample for the above scenario and it is attached below. Please refer to it.

http://www.syncfusion.com/downloads/Support/DirectTrac/104883/Cusom%20command-2004641397.zip

 

Please try this and let us know if you have any queries.

 

Regards,

Eswari S



PJ paul jilek April 16, 2013 03:33 AM UTC

Hi Eswari
 
Thank you for the example.  I have now go it all working.
 
Cheers
 
Paul


ES Eswari S Syncfusion Team April 16, 2013 04:00 AM UTC

Hi Paul,

 

Thanks for the update.

 

Happy to hear that you have everything working . Do not hesitate to update if you have any questions.

 

Regards,

Eswari.S


Loader.
Up arrow icon