jQuery UI Widgets › Forums › Grid › Farsi date In Grid
Tagged: cellsrenderer, date, Farsi, grid, jqxgrid
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)
-
AuthorFarsi date In Grid Posts
-
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,
ManishHello 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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.