Articles in this section
Category / Section

How to assign column type to auto generated columns?

1 min read

We need column type to perform filtering operations in Grid, so in this KB we will see about how to set the column type for auto generated columns.

Solution:

We can achieve this using dataBound event of Grid. Let us see how to set type for auto generated columns using dataBound event of Grid

JS:

$("#Grid").ejGrid({
            // the datasource "window.gridData" is referred from jsondata.min.js
            dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(200)),
            allowPaging: true,
            dataBound: "databound",
            allowFiltering: true,
            filterSettings: { filterType: "excel" }
        });

 

MVC:

@(Html.EJ().Grid<object>("Grid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
    .AllowPaging()
    .AllowFiltering()
    .FilterSettings(fil=>fil.FilterType(FilterType.Excel))
    .ClientSideEvents(eve=>eve.DataBound("databound"))
    )

 

Controller:

    namespace Sample.Controllers
    {
        public class GridController : Controller
        {
            public ActionResult GridFeatures()
            {
                var DataSource = new NorthwindDataContext().OrdersViews.ToList();
                ViewBag.datasource = DataSource;
                return View();
            }
        }
    }

 

ASPX:

<ej:Grid ID="Grid" AllowFiltering="true" AllowPaging="True" runat="server">
            <ClientSideEvents DataBound="databound" />
            <FilterSettings FilterType="Excel"></FilterSettings>      
</ej:Grid>

 

[Controller]
namespace Sample
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Grid.DataSource = new MyDataDataContext().Orders.ToList();
            this.Grid.DataBind();
        }  
    }
}

 

DataBound event triggers at the initial rendering of the Grid. In this event we can set column type based on currentViewData.

Here we have looped the grid columns for finding the field name and we get the value of the column from the currentViewData using field name and assigned that value in type property of grid columns.

    function databound(args) {
        for (i = 0; i < this.model.columns.length; i++) {
            if (this.model.columns[i]["type"] == null) {
                var field = this.model.columns[i]["field"]; // here we will get field name
                for (j = 0; j < this.model.currentViewData.length; j++) {
                    var value = this.model.currentViewData[j][field]; // here we will get columns values
                    if (value != null) {
                        this.model.columns[i]["type"] = (value.getDay ? (value.getHours() > 0 || value.getMinutes() > 0 || value.getSeconds() > 0 || value.getMilliseconds() > 0 ? "datetime" : "date") : typeof (value)); //here we will get column type based on value
                        break;
                    }
                }
            }
        }
    }

 

The result will be as follows.

Figure 1: Type for auto generated columns

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied