ASP.NET MVC Controls | ComponentOne
Working with Controls / CollectionView / Work with CollectionView / Client- Side Operations / Current Record Management
In This Topic
    Current Record Management
    In This Topic

    CollectionView can manage the current record by using the ICollectionView interface.

    To obtain the current position of a record in the collection, use currentPosition property. We also use the methods moveCurrentTo(item), moveCurrentToFirst(), moveCurrentToLast(), moveCurrentToNext(), moveCurrentToPosition(index) and moveCurrentToPrevious() to change the current position. When the current is changed, we use the events currentChanging and currentChanged to track it. We can cancel the current changing in the event currentChanging.

    Make sure that the DisableServerRead property of ItemSource is set to True if filtering, paging, sorting is to be performed on data available at client side only.

    The example uses C1NWind data source, which was configured in the application in the Quick Start:

    Record management in FlexGrid

    The following code example demonstrates how to manage current records in FlexGrid through CollectionView.

    In Code

    CurrentRecordManagementController.cs

    C#
    Copy Code
    private C1NWindEntities db = new C1NWindEntities();
    
    public ActionResult Index()
    {
        return View(db);
    }
    

    CurrentRecordManagement.cshtml

    Razor
    Copy Code
    <div>
        <button class="btn btn-default" id="btnCRMMoveNext">Move To Next</button>
        <button class="btn btn-default" id="btnCRMMovePre">Move To Previous</button>
        <button class="btn btn-default" id="btnCRMStop4">Stop in 4th Row</button>
        <button class="btn btn-default" id="btnCRMReset">Clear Stopping</button>
    </div>
    @(Html.C1().FlexGrid().Id("crmGrid").IsReadOnly(true).SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
    .Height(300).Width(800).AutoGenerateColumns(true).Bind(b => b.DisableServerRead(true).Bind(Model.Customers))
    )
    
    Script
    Copy Code
    <script>
        $(document).ready(function () {
            //Current Record Management
            crmGrid = wijmo.Control.getControl('#crmGrid');
            cvCRM = crmGrid.itemsSource; //new wijmo.collections.CollectionView(getData(10)),
    
            // Add the processes for buttons' click
            // Move to the Next item
            document.getElementById('btnCRMMoveNext').addEventListener('click', function () {
                cvCRM.moveCurrentToNext();
            });
    
            // Move to the previous item
            document.getElementById('btnCRMMovePre').addEventListener('click', function () {
                cvCRM.moveCurrentToPrevious();
            });
    
            // When the current item is the 4th one, restrict any change
            document.getElementById('btnCRMStop4').addEventListener('click', function () {
                cvCRM.currentChanging.addHandler(stopCurrentIn4th);
            });
    
            // Restore to be able to change
            document.getElementById('btnCRMReset').addEventListener('click', function () {
                cvCRM.currentChanging.removeHandler(stopCurrentIn4th);
            });
    
            // define the function to forbid the current moving.
            function stopCurrentIn4th(sender, e) {
                // when the current is the 4rd item, stop moving.
                if (sender.currentPosition === 3) {
                    e.cancel = true;
                }
            };
        });
    
        // create collectionview, grid
        var crmGrid = null
            , cvCRM = null;
    
    </script>