DataGrid Command Buttons Not Working

[Eniola Benjamin]

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("_");
		}
	)
)

[Eswari S]

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

[paul jilek]

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

 

[Eswari S]

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

[paul jilek]

Hi Eswari

 

Thank you for the example.  I have now go it all working.

 

Cheers

 

Paul

[Eswari S]

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