Customizing Command Bar for Spread MVC

In this blog I am going to tell you how you can place a custom button in Spread command bar while using Spread for MVC. If you have previously worked with Spread for ASP.net you would probably know that placing a custom button in command bar is not a difficult task. You have to override the PreRender event and put the button in command bar by finding an existing button over it. I am going to follow the same implementation here for Spread MVC which is a bit trickier. Logic behind the implementation is to place an ImageButton in command bar and handle its both the client and server side, click event. I am considering the fact that you are already aware of adding Spread MVC to your MVC project; if not, you may go through this link. Once Spread is added to the View we can access it in the controller and add handler for PreRender and ButtonCommand events:

public ActionResult Index([FarPoint.Mvc.Spread.MvcSpread]FarPoint.Mvc.Spread.FpSpread FpSpread1)  
{  
    ViewBag.Message = "ComponentOne Spread Customized CommandBar";  
    if (FpSpread1 != null)  
    {  
       FpSpread1.PreRender += new EventHandler(FpSpread1_PreRender);  
       FpSpread1.ButtonCommand += new FarPoint.Web.Spread.SpreadCommandEventHandler(FpSpread1_ButtonCommand);  
    }  
    return View();  
}  

In Spread's PreRender event I am going to attach a handler for PreRenderComplete event for the Page object. Here is the code to do that:

void FpSpread1_PreRender(object sender, EventArgs e)  
{  
   FarPoint.Mvc.Spread.FpSpread fpspread1 = (FarPoint.Mvc.Spread.FpSpread)sender;  
   System.Web.UI.Page page = fpspread1.Page;  
   page.PreRenderComplete += new EventHandler(page_PreRenderComplete);  
}  

Now most important part of this blog comes into play. I will now add my custom image button to Spread's command bar. I will first get the parent of any existing control on command bar. For example I am going to check if Print button exists, so that I can get access to its parent which is the command bar itself. See the code below:

void page_PreRenderComplete(object sender, EventArgs e)  
{  
    System.Web.UI.Page page = (System.Web.UI.Page)sender;  
    FarPoint.Mvc.Spread.FpSpread spread = (FarPoint.Mvc.Spread.FpSpread)page.FindControl("FpSpread1");  
    System.Web.UI.Control p = spread.FindControl("Print");  
    if (p != null)  
    {  
       System.Web.UI.WebControls.TableCell tc = (System.Web.UI.WebControls.TableCell)p.Parent;  
       System.Web.UI.WebControls.TableRow tr = (System.Web.UI.WebControls.TableRow)tc.Parent;  
       System.Web.UI.WebControls.TableCell tableCell = new System.Web.UI.WebControls.TableCell();  
       tr.Cells.Add(tableCell);  
       System.Web.UI.WebControls.ImageButton btn = new System.Web.UI.WebControls.ImageButton();  
       btn.ImageUrl = "~/Images/BELL.bmp";  
       btn.Attributes.Add("OnClick", "onBellClick()");  
       tableCell.Controls.Add(btn);  
    }  
}  

Next, I add an image to the image button and place it over the command bar. In code I am also adding an "OnClick" attribute which I will handle client side.

<script type ="text/javascript">  
onBellClick = function ()  
{  
    alert("Image button is clicked!");  
    var ss = FpSpread("FpSpread1");  
    ss.CallBack("ImageButton");  
}  
</script>;  

Spread's CallBack method makes an ajax call to server with a custom command name "ImageButton". This fires Spread's ButtonCommand event server side. Any command button on command bar causes triggers this event. I will check which command button is the source for this event using "e.commandName".

void FpSpread1_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e)  
{  
    if (e.CommandName == "ImageButton")  
   {  
      FarPoint.Mvc.Spread.FpSpread fpspread1 = (FarPoint.Mvc.Spread.FpSpread)sender;  
      FarPoint.Web.Spread.ImageCellType img = new FarPoint.Web.Spread.ImageCellType();  
      img.ImageUrl = "~/Images/Bell.bmp";  
      fpspread1.ActiveSheetView.Cells[0, 0].CellType = img;  
   }  
}  

In button command event I set the celltype for Spread's cell to imageCellType and passed the same image which is used for ImageButton in command bar. Refer to the attached samples for complete implementation: Download C# Sample Download Vb Sample