Editing Modes in Wijmo Grid

Wijmo jQuery widgets are often used in public-facing financial web applications to create a smooth and engaging user experience. The WijGrid widget is useful in situations where tabular data needs to be displayed, sorted, grouped, edited, etc. In the cases where edit capability is a requirement, there are a number of scenarios by which WijGrid becomes very useful.. Since WijGrid is a data-centric grid, it provides the flexibility of editing the displayed data. It also allows end users to edit data using custom editors. However, we may have a requirement for a specific type of editing Single click editing or editing on specific columns etc. This blog demonstrates the basic edit modes available in WijGrid i.e.

• Single Click
• Double Click
• Selected Columns

We can enable editing in WijGrid by setting allowEditing property to true and you may refer the online sample for same. This is the the default mode where you need to press F2 Key or double click on a cell to go into the edit mode. For Single Click, you need to handle the currentCellChanged event of the wijgrid and manually set the grid in editmode by calling its beginEdit method. Here is the code snippet for same:

   currentCellChanged: function (e, args) {  
            if ($(e.target).wijgrid('option', 'isLoaded')) {  
                selectedEditMode = $("#editMode").wijcombobox("option", "selectedValue");  
                //if Editing mode is single click then start editing  
                if (selectedEditMode == 'Single Click') {  
                   window.setTimeout(function () {  
                   $(e.target).wijgrid('beginEdit');  
                   }, 100);  
             }  
         }  
     }

In order to disable editing on specific column, you can set the readOnly property of that column to true. You may refer to this complete sample implementing the edit modes of Wijgrid or its jsfiddle.