Table of Contents
Table of Contents
Custom Column

Overview

EO.Web Grid supports CustomColumn that allows you to customize displaying and editing in the column. To use this feature, first define one or more CustomColumn in the grid's Columns collection, then use various properties on the column to customize displaying and editing.

Customize Displaying

Use ClientSideGetText client side event to customize displaying. The following list describes steps taken by EO.Web Grid to display a cell in a custom column:

  • Data for each cell are transfered to the client side as with other type of columns;
  • EO.Web Grid calls function specified by ClientSideGetText for each cell of the column to evaluate the HTML to be displayed for every cell, passing the current value of the cell through the cellValue parameter;
  • Inside ClientSideGetText, you would format the value into a string based on your particular logic;
  • Your function returns the formatted result to the grid, the grid then displays this return value in the cell;

The following example demonstrated an implementation that displays "Excellent" for "5", "Good" for 4, "Fair" for 3, "Poor" for 2 and "Horrible" for 1:

Copy 
function on_column_gettext(column, item, cellValue)
{
    if (cellValue == 5)
        return "Excellent";
    else if (cellValue == 4)
        return "Good";
    else if (cellValue == 3)
        return "Fair";
    else if (cellValue == 2)
        return "Poor";
    else if (cellValue == 1)
        return "Horrible";
}

Customize Editing

EO.Web Grid supports customizing editing through the following properties:

Column Type Remarks
EditorTemplate Specifies the template for the cell editor. This template defines the editing UI and will be displayed inside a cell when the cell enters edit mode.
ClientSideBeginEdit Client side event handler to be called when a cell of the column enters edit mode. You should usually calls GridCell.getValue inside this event handler to get the current cell value, then load the cell value into your editing UI.
ClientSideEndEdit Client side event handler to be called when a cell of the column leaves edit mode. This event handler should retrieve the value from the editing UI and return it to the grid.

The following sample code demonstrates displaying a drop down list for editing data in the cell. Note these are only code snippets intend to demonstrate how custom column works. For the complete source code, please refer to the sample project.

Copy 
function on_begin_edit(cell)
{
    //Get the current cell value
    var v = cell.getValue();
    
    //Use index 0 if there is no value
    if (v == null)
        v = 0;
    
    //Load the value into our drop down box
    var dropDownBox = document.getElementById("grade_dropdown");
    dropDownBox.selectedIndex = v;
}

function on_end_edit(cell)
{
    //Get the new value from the drop down box
    var dropDownBox = document.getElementById("grade_dropdown");
    var v = dropDownBox.selectedIndex;
    
    //Use null value if user has not selected a
    //value or selected "-Please Select-"
    if (v == 0)    
        v = null;
    
    //Return the new value to the grid    
    return v;
}