Client-Side Methods and Events

In This Topic

MVC Controls offers an advanced client-side API, which includes methods, events and properties that allow you to update or modify the controls at client-side. The client-side API provided by the MVC Edition is implemented using JavaScript. The JavaScript code which implements the client API can be embedded in the view file or embedded as a resource file. This enables the user to develop coherent web applications by combining server-side and client-side processing.

Working with Client-Side Methods and Events

Once a control is initialized on the server side, it can be fetched as an object on the client-side either by using the control ID or using "sender" parameter of an event. Once you fetch the object, you can now access its members on the client-side. For instance, the following code illustrates how to fetch the FlexGrid control on client side using object on the client-side using FlexGrid control "ID" and access its members on the client-side as shown in the following code. Moreover, you can cast the object to FlexGrid type using the cast method and use the IntelliSense.

CSHTML	Copy Code
//Fetch the FlexGrid object on client side using the 'Id'. var gridObj = wijmo.Control.getControl("#fg"); //Cast the object to FlexGrid type using the cast method and get the intellisense working. var flex = wijmo.grid.FlexGrid.cast(gridObj);

CSHTML

Copy Code

//Fetch the FlexGrid object on client side using the 'Id'.
var gridObj = wijmo.Control.getControl("#fg");        
//Cast the object to FlexGrid type using the cast method and get the intellisense working.
var flex = wijmo.grid.FlexGrid.cast(gridObj);

Similarly, you can fetch the FlexGrid control on client side using the "sender" event parameter and use IntelliSense with the help of cast method.

CSHTML	Copy Code
<script> //Define event handler function for the client side event "selectionChanged" //which is bind using the server side method "OnClientSelectionChanged" function gridSelectionChange(s, e) { //Fetch the FlexGrid control on client side using the 'sender' event parameter //and get the intellisense working using the cast method. var flex1 = wijmo.grid.FlexGrid.cast(s); var cv = flex1.collectionView; var amt2 = document.getElementById('lblAmt2'); var active = document.getElementById('lblActive'); var discount = document.getElementById('lblDisc'); if (cv.currentItem) { amt2.innerText = cv.currentItem.Amount2; active.innerText = cv.currentItem.Active; discount.innerText = cv.currentItem.Discount; } } //Bind client side event "formatItem" using addHandler c1.documentReady(function () { flex.formatItem.addHandler(function(s, e) { if (e.panel.cellType == wijmo.grid.CellType.Cell && e.panel.columns[e.col].binding == "Amount") { var val = e.panel.grid.getCellData(e.row, e.col, false); //Invoke client side method if (val < 1000) e.cell.style.color = 'red'; } }); }); </script> @ * Instantiate FlexGrid and set its properties * @ @(Html.C1().FlexGrid < Sale > ().Id("fg") .AutoGenerateColumns(false) .Width(700) .AllowAddNew(true) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell) .CssClass("grid") .Bind(Model) .Columns(bl => { bl.Add(cb => cb.Binding("ID")); bl.Add(cb => cb.Binding("Start")); bl.Add(cb => cb.Binding("Product")); bl.Add(cb => cb.Binding("Amount").Format("c")); bl.Add(cb => cb.Binding("Discount").Format("p0")); bl.Add(cb => cb.Binding("Active")); }) .OnClientSelectionChanged("gridSelectionChange") // Bind the client side "selectionChanged" event ) <br/> <br/> <div> <label> Amount2: </label> <label id = "lblAmt2"> </label> <br/> <label> Active: </label> <label id = "lblActive"> </label> <br/> <label> Discount: </label> <label id = "lblDisc" > </label> </div>

CSHTML

Copy Code

<script>
 //Define event handler function for the client side event "selectionChanged"
 //which is bind using the server side method "OnClientSelectionChanged"
 function gridSelectionChange(s, e) {
  //Fetch the FlexGrid control on client side using the 'sender' event parameter 
  //and get the intellisense working using the cast method.        
  var flex1 = wijmo.grid.FlexGrid.cast(s);
  var cv = flex1.collectionView;
  var amt2 = document.getElementById('lblAmt2');
  var active = document.getElementById('lblActive');
  var discount = document.getElementById('lblDisc');
  if (cv.currentItem) {
   amt2.innerText = cv.currentItem.Amount2;
   active.innerText = cv.currentItem.Active;
   discount.innerText = cv.currentItem.Discount;
  }
 }
//Bind client side event "formatItem" using addHandler
c1.documentReady(function () {
   flex.formatItem.addHandler(function(s, e) {
      if (e.panel.cellType == wijmo.grid.CellType.Cell && e.panel.columns[e.col].binding == "Amount") {
        var val = e.panel.grid.getCellData(e.row, e.col, false); //Invoke client side method
        if (val < 1000)
          e.cell.style.color = 'red';
    }
  });   
});
 </script>

@ * Instantiate FlexGrid and set its properties * @
@(Html.C1().FlexGrid < Sale > ().Id("fg")
  .AutoGenerateColumns(false)
  .Width(700)
  .AllowAddNew(true)
  .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
  .CssClass("grid")
  .Bind(Model)
  .Columns(bl => {
   bl.Add(cb => cb.Binding("ID"));
   bl.Add(cb => cb.Binding("Start"));
   bl.Add(cb => cb.Binding("Product"));
   bl.Add(cb => cb.Binding("Amount").Format("c"));
   bl.Add(cb => cb.Binding("Discount").Format("p0"));
   bl.Add(cb => cb.Binding("Active"));
  })
  .OnClientSelectionChanged("gridSelectionChange") // Bind the client side "selectionChanged" event
 )
 <br/>
 <br/>
 <div>
        <label> Amount2: </label>
        <label id = "lblAmt2"> </label>
        <br/>
        <label> Active: </label>
        <label id = "lblActive"> </label>
        <br/>
        <label> Discount: </label>
        <label id = "lblDisc" > </label>
 </div>

Invoking Client-Side Method

You can invoke a client-side method in a same way you invoke a method in any other .NET applications. For instance, we invoked the getCellData client-side method in the above example.