jQuery UI Widgets Forums Grid Farsi date In Grid

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Farsi date In Grid #27173

    Hi,

    My requirement is when user select the language as Farsi then i have to display Farsi date in grid.Can u please tell me a place where jqx. grid is constructed, so that i convert the english date into Farsi date and then displayed it into grid.Cool…

    Looking for your help…

    Thanks,
    Manish

    Farsi date In Grid #27181

    Dimitar
    Participant

    Hello Manish,

    This can be achieved by using cellsrenderer. Here is an example, based on the Paging demo:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>This example shows how to enable the paging feature of the Grid.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var url = "../sampledata/orders.xml";
    // prepare the data
    var source =
    {
    datatype: "xml",
    datafields: [
    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:OrderID',
    url: url,
    pager: function (pagenum, pagesize, oldpagenum) {
    // callback called when a page or page size is changed.
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
    var year = value.getFullYear() - 622;
    var month = $.jqx.dataFormat.formatdate(value, "MMMM")
    var day = value.getDate();
    return '<div style="overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">' + month + " " + day + ", " + year + '</div>';
    };
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    theme: theme,
    selectionmode: 'multiplerowsextended',
    sortable: true,
    pageable: true,
    autoheight: true,
    columnsresize: true,
    columns: [
    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
    { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D', cellsrenderer: cellsrenderer },
    { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
    { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
    ]
    });
    $('#events').jqxPanel({ width: 300, height: 300, theme: theme });
    $("#jqxgrid").on("pagechanged", function (event) {
    $("#eventslog").css('display', 'block');
    if ($("#events").find('.logged').length >= 5) {
    $("#events").jqxPanel('clearcontent');
    }
    var args = event.args;
    var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>";
    $('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
    // get page information.
    var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
    $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
    });
    $("#jqxgrid").on("pagesizechanged", function (event) {
    $("#eventslog").css('display', 'block');
    $("#events").jqxPanel('clearcontent');
    var args = event.args;
    var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
    $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
    // get page information.
    var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
    $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    <div id="eventslog" style="display: none; margin-top: 30px;">
    <div style="float: left;">
    Event Log:
    <div style="border: none;" id="events">
    </div>
    </div>
    <div style="float: left;">
    Paging Details:
    <div id="paginginfo">
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.