Grid in jQuery based on Flex Grid

Grid in jQuery based on Flex Grid

Below is the code which converts html table to jquery grid. I am using custom attributes like dataField, Sortable, ItemRendererFunction to display grid rows. Please copy the code to create test html file. I would appreciate feed back. Thanks!

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible"  content="IE=edge" />
<title>FlexLikeGrid</title>
    
<style type="text/css">  
body
{
    font-family:Arial;
    font-size:12px;
    color:#000000;
  
}
.Rowgradient 
{
  
    background-color: #FFFFFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#C3CFD6)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #FFFFFF, #C3CFD6); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #FFFFFF, #C3CFD6); /* FF3.6 */
    background-image:-ms-linear-gradient(top, #FFFFFF, #C3CFD6); /* IE10 */
    background-image:-o-linear-gradient(top, #FFFFFF, #C3CFD6); /* Opera 11.10+ */
    background-image: linear-gradient(top, #FFFFFF, #C3CFD6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF90,endColorstr=#C3CFD690); /* GradientType=0 : vertical, 1:horizontal IE6–IE9 */
    
}  
.GridStyle{
    border:solid 0px #8AABBD;
    table-layout:fixed;
    width:100%;
    text-indent:0.5em;   
}
.GridStyle td
{
    white-space:nowrap;
    overflow:hidden;
    -ms-text-overflow:ellipsis; 
    text-overflow:ellipsis;
    padding:3px 0px 3px 0px;
}
.GridStyle TR.EvenRow
{
    background-color:#FFFFFF;
}
.GridStyle TR.EvenRow:hover
{
    background-color: #FFFFE0;/*#FFFACD;*/
}
.GridStyle TR.OddRow
{
    background-color:#E4E8EB;
}
.GridStyle TR.OddRow:hover
{
    background-color:#FFFFE0; /*#FFFACD;*/
}
.GridStyle TR.GridHeaderStyle
{
    font-weight:bold;
    font-size:11px;
}
.GridStyle TR.GridHeaderStyle td.Sortable
{
    background-image : url("../images/sort.png");
    background-position:right;
    background-repeat:no-repeat;
   
}
.GridStyle TR.GridHeaderStyle td.Sortable:hover
{
    background-color:#C3CFD6;
    color:#444444;
}
  
input[type='text']
{
    border : 1px solid silver;
    background-color:#FFFFFF;
}
input[type='text']:focus
{
    background-color: #ffa;/*#EFEFEF;*/
}
input[type='text']:hover
{
    background-color: #ffa; /*#EFEFEF;*/
}
input[type='text']:disabled
{
    background-color: #EEEEEE; /*#EFEFEF;*/
}
input[type='text']:disabled:hover
{
    background-color: #EEEEEE; /*#EFEFEF;*/
}

a
{
    color:#002EB8;
    text-decoration:underline;
}
a:hover
{
    color:#002EB8;
    text-decoration:none;
}
a:visited
{
    color:#002EB8;
    text-decoration:underline;
}
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript">/********** SIMPLE GRID **********************/
(function ($) {
   
        var SmartGridSettings ;

        $.fn.ConvertToSmartGrid = function (arrData, settings) {
            SmartGridSettings = settings;
            var tgtGrid = this;
            var tgtPrnt = tgtGrid.parent();
            var prntTag = tgtPrnt.prop("tagName");
           
            if (prntTag != "DIV") {
                alert("Grid needs to be inside block element div");
                return;
            }



            var tblWdth; var hdrClss; var evenRowClss; var oddRowClss;
            var tblHt; var showGridLines

            tblWdth = tgtGrid.outerWidth();
            tblHt = tgtGrid.css("height");

            evenRowClss = tgtGrid.attr("evenRowClass");
            oddRowClss = tgtGrid.attr("oddRowClass");
            hdrClss = tgtGrid.attr("headerClass");
            tblClss = tgtGrid.attr("class");
            showGridLines = tgtGrid.attr("showGridLines") == "true" ? true : false;


            hdrClss = typeof (hdrClss) == "undefined" ? "GridHeaderStyle" : "GridHeaderStyle " + hdrClss;
            evenRowClss = typeof (evenRowClss) == "undefined" ? "EvenRow" : evenRowClss;
            oddRowClss = typeof (oddRowClss) == "undefined" ? "OddRow" : oddRowClss;
            tblClss = typeof (tblClss) == "undefined" ? "GridStyle" : "GridStyle " + tblClss;

            var arrTrs = tgtGrid.find('tr');
            var gridTr = arrTrs[0];
            gridTr = $(gridTr);
            var gridTds = gridTr.children(['td']);


            //creating header grid
            var hdrTblTr = document.createElement("tr");
            hdrTblTr = $(hdrTblTr);
            hdrTblTr.addClass(hdrClss);


            var SortData = function(event){
                event.data.JqTBody = $("#_t_b_dy");
                GridHandler.SortTable(event);
                event.stopImmediatePropagation();
            };

            var tdWidth;
            var tdStyle;
            var ntd;
            var srtble;

            
            //creating header row and td
            gridTds.each(function (idx) {
                tdWidth = $(this).attr("width");
                tdStyle = $(this).attr("style");
                ntd = document.createElement("td");
                ntd = $(ntd);
                typeof (tdWidth) != "undefined" ? ntd.attr("width", tdWidth) : "";
                showGridLines == true ? ntd.css("border-right", "solid 1px silver") : "";

                ntd.text($(this).attr("headerText"));
                ntd.css("padding", "3px 0px 3px 0px");
                
                srtble = typeof($(this).attr("Sortable"))
                srtble != "undefined" ? ntd.addClass("Sortable") : "";
                if(srtble != "undefined")
                {
                    var evData =new Object();
                   // evData.jqTBody = ntd.parent().parent();
                    evData.ColIdx = idx;
                    evData.EvenRowClss = evenRowClss;
                    evData.OddRowClss = oddRowClss;
                    ntd.bind("click", evData, SortData);
                }
                  
                hdrTblTr.append(ntd);
            });


            ntd = document.createElement("td");
            $(ntd).attr("width", "16px");
            hdrTblTr.append($(ntd));

            var hdrTbl = document.createElement("table");
            var jhdrTbl = $(hdrTbl);
            jhdrTbl.addClass(tblClss);
           
            
               
            jhdrTbl.attr("cellpadding", "2");
            jhdrTbl.attr("cellspacing", "0");
            jhdrTbl.append(hdrTblTr);


            var hdrDiv = document.createElement("div");
            $(hdrDiv).append(hdrTbl);

            tgtGrid.css("display", "none");


            tgtPrnt.width(tblWdth); // setting parent width to width of grid width

            tgtPrnt.append($(hdrDiv)); // adding header 



            //********starting building grid Rows*************

            var getPropertyValue = function (dataField, data) {
                var retVal;
                var arrDataField;
                arrDataField = dataField.split(".");

                if (arrDataField.length > 1) {
                    for (var x in arrDataField) {
                        data = data[arrDataField[x]];
                    }
                    retVal = data;
                }
                else {
                    retVal = data[dataField];
                }

                return retVal;
            };



            var ctntTbl = document.createElement("table");
            var tbody = document.createElement("tbody");
            $(tbody).attr("id", "_t_b_dy");
            
            ctntTbl = $(ctntTbl);
            ctntTbl.append(tbody);
            ctntTbl.addClass(tblClss);
            ctntTbl.attr("cellpadding", "2");
            ctntTbl.attr("cellspacing", "0");


            var PopulateGridContent = function (arrData) {
                var ctntTr; var data; var propVal; var ctntTd; var lblFn;
                var dataField; var iRend; var thsObj;
                var elem; var rendFn;
                for (var i in arrData) {
                    data = arrData[i];
                    ctntTr = document.createElement("tr");
                    ctntTr = $(ctntTr);
                    i % 2 == 0 ? ctntTr.addClass(oddRowClss) : ctntTr.addClass(evenRowClss);

                    gridTds.each(function (idx) {
                        thsObj = $(this);
                        dataField = thsObj.attr("dataField");
                        propVal = getPropertyValue(dataField, data);

                        ctntTd = document.createElement("td");
                        ctntTd = $(ctntTd)
                        tdWidth = thsObj.attr("width");
                        tdStyle = thsObj.attr("style");
                        typeof (tdWidth) != "undefined" ? ctntTd.attr("width", tdWidth) : "";
                        typeof(tdStyle) != "undefined" ? ctntTd.attr("style", tdStyle) : "";

                        showGridLines == true ? ctntTd.css({
                                                                "border-right" :  "solid 1px silver",
                                                                "border-bottom" :  "solid 1px silver",
                                                                }) : "";
                           
                        rendFn = thsObj.attr("itemRendererFunction");
                        typeof(rendFn) != "undefined" && rendFn != "" ? window[rendFn](data, ctntTd, idx) : ctntTd.text(propVal);


                        ctntTr.append(ctntTd);
                    });

                    ctntTbl.append(ctntTr);

                  
                }
            };

            PopulateGridContent(arrData);
            var ctntDiv = document.createElement("div");
            ctntDiv = $(ctntDiv);
            ctntDiv.css({
                "height": tblHt,
                "overflow-y": "scroll",
                "overflow-x": "auto"
            });

            ctntDiv.append(ctntTbl);

            tgtPrnt.append(ctntDiv); // adding content

           
            if (settings.ShowPagination) {
                var pgDiv = document.createElement("div");
                pgDiv = $(pgDiv);
                pgDiv.css({
                    "position": "relative",
                    "height": "25px",
                    "border": "solid 0px red"
                });

                tgtPrnt.append(pgDiv);
                if(SmartGridSettings.PaginationType == "AppendToExistingRecord")
                {
                    var spn = document.createElement("span");
                    spn = $(spn);
                    spn.css({
                        "position" : "absolute",
                        "right" : "2px"
                    });

                   spn.append("<label>Total Record: " + SmartGridSettings.MaxRecord + "</label>" );

                    var ancr = document.createElement("a");
                    ancr = $(ancr);
                    ancr.attr("href", "#");
                    ancr.css("margin-left", "15px");
                    ancr.text("Get Next " + SmartGridSettings.RecordsPerPage + " Records");
                    ancr.bind("click",SmartGridSettings.GetMoreFn);
                    spn.append(ancr);

                    pgDiv.append(spn);  

  
                }
                else
                {
                    pgDiv.GetPaginationUI(SmartGridSettings.MaxRecord, SmartGridSettings.RecordsPerPage, SmartGridSettings.GetMoreFn, 'dropdown', "0-" + SmartGridSettings.RecordsPerPage);
                }

            }

            tgtPrnt.css("border", "solid 1px silver");


            this.refresh = function (arrData) {
                if(SmartGridSettings.PaginationType != "AppendToExistingRecord")
                {
                    $("#_t_b_dy").empty();
                }
                PopulateGridContent(arrData);
            }

            return this;
        };
    })(jQuery);


//*************** Simple Data Grid Ends********************

var GridHandler = {
    SortByColIdx: null,

    SortDirection: null,

    AscendDataCompareFunction: function (jqTrA, jqTrB) {
        var a = jqTrA.text().toLowerCase();
        var b = jqTrB.text().toLowerCase();

        var aDtMillsec = Date.parse(a)
        if (isNaN(aDtMillsec) == false) {
            a = aDtMillsec;

            b = Date.parse(b);
        }
        if (isNaN(parseInt(a))) {

         

            if (a > b) {
                return -1
            }
            if (a < b) {
                return 1
            }

            return 0;
        }
        else {
            return a - b;
        }
    },

    DescendDataCompareFunction: function (jqTrA, jqTrB) {

     
        var a = jqTrA.text().toLowerCase();
        var b = jqTrB.text().toLowerCase();

        var aDtMillsec = Date.parse(a)
        if (isNaN(aDtMillsec) == false) {
            a = aDtMillsec;

            b = Date.parse(b);
        }
        if (isNaN(parseInt(a))) {
            if (a > b) {
                return 1
            }
            if (a < b) {
                return -1
            }
            return 0;
        }
        else {
            return b - a;
        }
    },

    SortTable: function (event) {
    
        var jqTBody = event.data.JqTBody;
        var colIdx = event.data.ColIdx;

        GridHandler.SortByColIdx = colIdx;

        var arrTrs = jqTBody.find("TR");

        var arrTds = new Array();
        var ntd;
        var len = arrTrs.length;
        
        for (var i = 0; i < len; i++) {
            $(arrTrs[i]).removeAttr("class");
            ntd = $(arrTrs[i]).find("td").get(colIdx);

            $(ntd).attr("idx", i);

            arrTds.push($(ntd));
        }


        if (GridHandler.SortDirection == null || GridHandler.SortDirection == "D") {
            GridHandler.SortDirection = "A"
            arrTds.sort(GridHandler.AscendDataCompareFunction);
        }
        else {
            GridHandler.SortDirection = "D"
            arrTds.sort(GridHandler.DescendDataCompareFunction);
        }

        var oRowCls = event.data.EvenRowClss;
        var eRowClss = event.data.OddRowClss;
        jqTBody.empty();
        
        $(arrTds).each(function (idx) {
            ix = $(this).attr("idx");
            if (idx % 2 == 0) {
                $(arrTrs[ix]).addClass(eRowClss);
            }
            else {
                $(arrTrs[ix]).addClass(oRowCls);

            }
            jqTBody.append(arrTrs[ix]);
        });

    }
};

/********** SIMPLE GRID ENDS **********************/


(function ($) {
    $.fn.GetPaginationUI = function (totalRecCount,
                                    noRecPerPage,
                                    onPageSelectionHandler,
                                    type,
                                    selectedRangeVal) {

        if($.isEmptyObject($("#_pge_div")) == false)
        {
            $("#_pge_div").remove();
        }
        var str = new StringBuilder();
        str.append("<div id='_pge_div' style='position:absolute;top:2px;" +
                            "border:solid 0px red;" +
                            "right:15px;'>");

        str.append("<input type='hidden' name='sRange' id='sRange' value='' />");
        var ctr = Math.ceil(totalRecCount / noRecPerPage);

        var strNum = 0;
        var endNum = noRecPerPage;

        str.append("<span style='margin-right:30px;'><b>Total Records:</b> " + totalRecCount + "</span>");

        str.append("<span style='margin-right:50px'>" +
                "<input type='text' onkeyup=\"PaginationValidation('_recsPerPage')\" id='_recsPerPage' name='_recsPerPage' size='4' style='text-align:right' value='" + noRecPerPage + "' /> <b>records per page</b>" +
               "</span>");

        if (type == "numbers") {
            for (var i = 0; i < ctr; i++) {
                str.append("<span style='margin-left:2px;padding:0px 2px 0px 2px;" +
                                    "text-decoration:underline;" +
                                    "cursor:pointer;" +
                                    "font-weight:bold;" +
                                    "margin-right:4px;" +
                                    "border:solid 1px #999999' onclick='" + onPageSelectionHandler + "(" + strNum + "," + endNum + ")'>" + (i + 1) + "</span>")
                strNum = endNum;
                endNum = endNum + noRecPerPage;
            }
        }
        else if (type == "dropdown") {
            var rangeval;
            var strSelected = "";

            var selectElem = document.createElement("SELECT");
            $(selectElem).attr("id", "pdwn");




            for (var i = 0; i < ctr; i++) {

                rangeval = strNum.toString() + "-" + endNum.toString();
              
                if (rangeval == selectedRangeVal) {
                    strSelected = " SELECTED ";
                }
                else {
                    strSelected = "";
                }

                $(selectElem).append("<option  " + strSelected + "  value ='" + rangeval + "'>" + (i + 1) + "</option>");

                strNum = endNum;
                endNum = parseInt(endNum) + parseInt(noRecPerPage);

            }
            str.append("show page ");

            str.append(selectElem.outerHTML);
            str.append(" of " + i);
        }
        str.append("</div>");

        $(this).append(str.toString());
        $("#pdwn").bind("change", onPageSelectionHandler);
        str.clear();
    };
})(jQuery);



function StringBuilder(value)
{
    this.strings = new Array("");
    this.append(value);
}

// Appends the given value to the end of this instance.

StringBuilder.prototype.append = function (value)
{
    if (value)
    {
        this.strings.push(value);
    }
}

// Clears the string buffer

StringBuilder.prototype.clear = function ()
{
    this.strings.length = 1;
}

// Converts this instance to a String.

StringBuilder.prototype.toString = function ()
{
    return this.strings.join("");
    
}</script>
    <script language="javascript" type="text/javascript">
   
    var sGrid;

    function CreateMockData() {
        var GridDP = new Array();
        var obj;
        for (var i = 0; i < 5; i++) {

            obj = new Object();
            obj.Person = {
                FirstName: "First Name" + i,
                Address: {
                    City: "Boston" + i
                }
            };
            obj.LastName = "Last Name " + i;
            obj.Title = "Sr.Software Engg";
            obj.Address1 = "Address1";
            obj.Address2 = "Address2";
            obj.MobilePhone = "555 555 5 55"
            obj.LanPhone = "22 2222 2222";

            GridDP.push(obj);

        };

        return GridDP;
    }

    function LoadData() {

        SmartGridSettings = new Object();
        SmartGridSettings.MaxRecord = 100;
        SmartGridSettings.RecordsPerPage = 10;
        SmartGridSettings.GetMoreFn = GetMoreFunction;
        SmartGridSettings.ShowPagination = true;
        SmartGridSettings.PaginationType = ""; // use 'AppendToExistingRecord' if you want to keep appending record to existing result set when click GetMoreFunction is called

        var GridDP = CreateMockData();
        sGrid = $("#mGrid").ConvertToSmartGrid(GridDP, SmartGridSettings);
    }


    function MyItemRendererFunction(data,colTd, colIdx){

        if (data.Person.FirstName == "First Name0")
        {
            colTd.append("<input  type='text'style='width:90%;padding:0 0 0 0' value='" + data.Person["FirstName"] + "' />");
        }
        else{
            colTd.text(data.Person["FirstName"]);
        }
    }

    function GetMoreFunction() {
        var GridDP = new Array();
        var obj;
        for (var i = 0; i < 5; i++) {
            obj = new Object();
            obj.Person = {
                FirstName: "New FirstName" + i,
                Address: {
                    City: "Bangkok" + i
                }
            };
            obj.LastName = "Last Name " + i;
            obj.Title = "CFA";
            obj.Address1 = "Address1";
            obj.Address2 = "Address2";
            obj.MobilePhone = "555 555 5 55"
            obj.LanPhone = "22 2222 2222";

            GridDP.push(obj);

        };

        // call .refresh method if you want to refresh data
        sGrid.refresh(GridDP);
    }


    
    </script>
</head>
<body onload="LoadData()">
     <div id='mgridDiv' style="border:solid 1px silver;">
        <table id = "mGrid"
                            showGridLines = "true" 
                            contentEvenRowClass="EvenRow" 
                            contentOddRowClass = "OddRow"
                            headerClass="Rowgradient"
                            style="width:700px;height:600px;display:none;">     
             <tr>
               
                <td id="fname" 
                    width="120px" 
                    Sortable
                    itemRendererFunction =  "MyItemRendererFunction"
                    headerText = "First Name" 
                    dataField = "Person.FirstName" >
                      
                </td>
                <td  headerText = "City"
                     Sortable
                     dataField = "Person.Address.City">
                </td>

                <td headerText = "Title" 
                    dataField = "Title">
                </td>
                <td headerText = "Address1"   
                    dataField = "Address1">
            
                </td>
                <td headerText = "Address2"
                    dataField = "Address2">
            
                </td>
                <td headerText = "Mobile Phone"  
                    dataField = "MobilePhone">
                </td>
                <td headerText = "LAN Phone"  
                    dataField = "LanPhone">
            
                </td>
             </tr>                      
        </table>
  </div>
                            
</body>
</html>