ASP.NET Core MVC Controls | ComponentOne
Client-Side Support / Client-Side Methods and Events
In This Topic
    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);
    

    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>
    

    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.