Value Transformation with JQXB

JQXB allows to specify a data transformation function for any single HTML element binded to data with the jqxb-transformfunc attribute. In this attribute the developer can specify the name of a tranformation function that will be invoked by JQXB just before displaying value inside the binded element and just before storing value back to the underlying datasource after user changes.

The following example use an additional library ( date.js ) for Date manipulation

Including Libraries

 

<script type="text/javascript" src="../../../Scripts/jquery-1.6.js"></script>
<script type="text/javascript" src="../../../Scripts/jQXB.1.1.js"></script>
<script type="text/javascript" src="../../../Scripts/date.js"></script>

 

HTML Declaration

 

<input type="text" jqxb-datasource="dataSource" jqxb-datamember="Date" jqxb-transformfunc="ConversionFunc.convertdate" />

 

JQXB script code

 

<script type="text/javascript">

    var a = { 'Date': new Date() };
    var ConversionFunc = {}
    ConversionFunc.convertdate = function (value) {
        if (value instanceof Date) {
            //toString provided by date.js  
            value = value.toString('d/MM/yyyy');
            return value;
        }
        if (typeof (value) == "string") {
            // parse data provides by date.js
            var newdate = Date.parse( value,'d/MM/yyyy');
            return newdate;
        }
    }

    jQuery(document).ready(function () {
        jQXB.initialize();
        jQXB.setDataSource('dataSource', a).doBind('dataSource');
    });

</script>

Last edited Sep 25, 2011 at 12:50 AM by lightcode, version 7

Comments

No comments yet.