jQWidgets Forums

Tagged: auto-size columns horizontally, display JSON date correctly

This topic contains 7 replies, has 2 voices, and was last updated by sun21170 11 years, 3 months ago.

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

Author

Cannot get server paging to work on asp.net page with AJAX_enabled web service Posts

January 26, 2014 at 4:23 am Cannot get server paging to work on asp.net page with AJAX_enabled web service #48380

Participant

I am trying to bind jqxgrid to remote data using ASP.Net. If you look at this video, you will see there is no error occurring and the correct data is being returned by the remote web service, but still the page shows up as blank :
CODE of my aspx page is as below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqxGridSample.aspx.cs" Inherits="GridViewSamples.jqxGridSample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.orange.css" />
    </head>
    <body>
        <form id="form1" runat="server">
            
                <div id="jqxgrid">
                </div>
            
        </form>
        <script type="text/javascript">
       
            $(document).ready(function () {
                //subscribe to the page changed event
                $("#jqxgrid").on("pagesizechanged", function (event) {
                    var args = event.args;
                    var pagenum = args.pagenum;
                    var oldpagesize = args.oldpagesize;
                    var pagesize = args.pagesize;
                    alert('0');
                    GetGridData(pagenum, pagesize);
                });

                GetGridData(0, 10);
                alert('after');
            });

            function GetGridData(pagenum, pagesize) { 
                $.ajax({
                           url:"WebService1.asmx/GetSalesOrders",
                           type: 'POST',
                           async: true,
                           cache: false,
                           contentType: "application/json; charset=utf-8",
                           data: JSON.stringify({pagenum:pagenum, pagesize:pagesize}),
                           dataType: "json",
                           success: function (info) {
                               alert('1');
                               alert(info.d.Count);
                               alert(JSON.stringify(info.d.Data));
                               var source = {
                                   datatype: 'json',
                                   localdata: info.d.Data,
                                   totalrecords:info.d.Count 
                               };
                               alert('source.totalrecords :' + source.totalrecords);
                               var dataAdapter = new $.jqx.dataAdapter(source);
                               $("#jqxgrid").jqxGrid(
                                   {
                                       width: '700',
                                       // height: '700',
                                       filterable: false,
                                       sortable: false,
                                       showfilterrow: false,
                                       autoshowfiltericon: false,
                                       autoHeight: true,
                                       pageable:true,
                                       virtual: false,
                                       theme: 'orange',
                                       source: dataAdapter,
                                       columns: [
                                           { text: 'Sales Order ID', datafield: 'SalesOrderID', width: 150 },
                                           { text: 'Sales Order Number', datafield: 'SalesOrderNumber', width: 150 },
                                           { text: 'Customer ID', datafield: 'CustomerID', width: 120 },
                                           { text: 'Order Date', datafield: 'Order Date', width: 160 },
                                           { text: 'Due Date', datafield: 'DueDate', width: 100 }
                                       ]
                                   });
                           },
                           error: function (error) {
                               alert('2');
                               alert('ERROR has occurred when getting Employees!' + JSON.stringify(error));
                           }
                       });
            }
        </script>

    </body>
</html>

January 26, 2014 at 4:50 am Cannot get server paging to work on asp.net page with AJAX_enabled web service #48381

sun21170

Participant

Also, you can see the format of JSON data returned ( there are two date fields in every record): http://screencast.com/t/txB7gqfmoC

January 26, 2014 at 4:51 am Cannot get server paging to work on asp.net page with AJAX_enabled web service #48382

sun21170

Participant

January 26, 2014 at 4:52 am Cannot get server paging to work on asp.net page with AJAX_enabled web service #48383

sun21170

Participant

the link is: http://screencast.com/t/txB7gqfmoC

January 26, 2014 at 6:15 am Cannot get server paging to work on asp.net page with AJAX_enabled web service #48385

sun21170

Participant

I got it to work by changing the code. I was very impressed as its lightning fast when connecting to a remote database. I had to add scripts according to the demo code and not as mentioned in documentation of ASP.Net server paging. Also, I moved the instantiation of jqxgrid to document ready event, so its instantiated once per page lifetime. Lastly, I had to declare source as a global variable so its accessible in GetGridData method.

But there are 2 problems (look at this video: http://screencast.com/t/FaKGY4iJrU) : (1) Why does a horzontal scroll bar show up? It should auto-size horizontally.
(2) The fields that are of DateTime type returned by ASP.Net ajax web service do not show up correctly.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqxGridSample.aspx.cs" Inherits="GridViewSamples.jqxGridSample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.orange.css" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.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/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            
                <div id="jqxgrid">
                </div>
            
        </form>
        <script type="text/javascript">
            var source = {
                datatype: 'json',
                localdata:null,
                totalrecords:null
            };
            GetGridData(0, 10);
            $(document).ready(function () {
               
                

                //alert('source.totalrecords :' + source.totalrecords);
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid").jqxGrid(
                    {
                        //width: '100%',
                        // height: '700',
                       // filterable: false,
                        sortable: false,
                       // showfilterrow: false,
                       // autoshowfiltericon: false,
                        autoHeight: true,
                        pageable: true,
                        virtualmode: true,
                        rendergridrows: function (params) {
                            return params.data;
                        },
                        theme: 'orange',
                        source: dataAdapter,
                        columns: [
                            { text: 'Sales Order ID', datafield: 'SalesOrderID', width: 150 },
                            { text: 'Sales Order Number', datafield: 'SalesOrderNumber', width: 150 },
                            { text: 'Customer ID', datafield: 'CustomerID', width: 120 },
                            { text: 'Order Date', datafield: 'OrderDate', width: 160 },
                            { text: 'Due Date', datafield: 'DueDate', width: 100 }
                        ]
                    });
                 
                //subscribe to the page changed event after grid is created.
                $("#jqxgrid").on("pagesizechanged", function (event) {
                    var args = event.args;
                    var pagenum = args.pagenum;
                    var oldpagesize = args.oldpagesize;
                    var pagesize = args.pagesize;
                    // alert('pagesizechanged');
                    GetGridData(pagenum, pagesize);
                });
                $("#jqxgrid").on("pagechanged", function (event) {
                    var args = event.args;
                    var pagenum = args.pagenum;
                    var oldpagesize = args.oldpagesize;
                    var pagesize = args.pagesize;
                    //alert('pagechanged');
                    GetGridData(pagenum, pagesize);
                });
               
                //alert('after');
            });

            function GetGridData(pagenum, pagesize) { 
                $.ajax({
                           url:"WebService1.asmx/GetSalesOrders",
                           type: 'POST',
                           async: false,
                           cache: false,
                           contentType: "application/json; charset=utf-8",
                           data: JSON.stringify({pagenum:pagenum, pagesize:pagesize}),
                           dataType: "json",
                           success: function (info) {
                              //  alert('1');
                              //  alert(info.d.Count);
                              //  alert(JSON.stringify(info.d.Data));
                               source.totalrecords = info.d.Count;
                               source.localdata = info.d.Data;
                           },
                           error: function (error) {
                              // alert('2');
                               alert('ERROR has occurred when getting Employees!' + JSON.stringify(error));
                           }
                       });
            }
        </script>

    </body>
</html>

January 26, 2014 at 7:45 pm Cannot get server paging to work on asp.net page with AJAX_enabled web service #48392

sun21170

Participant

I could not solve the JSON date problem but the auto-size of columns problem is solved.

To have a JSON serialized data show up correctly,I tried to specify a date time format for the grid column as in code below. Look at last two columns which have a date format specified. But it did not help.
Also, to have the columns auto-size horizonatlly, I need to NOT mention the width property for every grid column.

columns: [
                        { text: 'Sales Order ID', datafield: 'SalesOrderID' },
                        { text: 'Sales Order Number', datafield: 'SalesOrderNumber' },
                        { text: 'Customer ID', datafield: 'CustomerID' },
                        { text: 'Order Date', datafield: 'OrderDate', width: 100, cellsformat: 'dd-MMMM-yyyy' },
                        { text: 'Due Date', datafield: 'DueDate', width: 100, cellsformat: 'dd-MMMM-yyyy' }
                    ]

January 26, 2014 at 8:08 pm Cannot get server paging to work on asp.net page with AJAX_enabled web service #48397

Peter Stoev

Keymaster

Hi sun21170,

1. If you do not want to specify the width property, the other option is to call “autoresizecolumns” after the Grid is loaded with data. However, the best option remains setting the “width” property of each column.
2. Check also whether you had set the “type” property of your data fields in the source object. If it is necessary, set th “format” property, too. Example: { name: ‘SubmitDate’, type: ‘date’, format: “yyyy-MM-ddTHH:mm:ss-HH:mm” }

Best Regards,
Peter Stoev

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

January 28, 2014 at 1:01 am Cannot get server paging to work on asp.net page with AJAX_enabled web service #48482

sun21170

Participant

Hi Peter,

When I set the type property to date in source, then JSON serialized date displays correctly. I think that’s very nice feature.

Thanks
Sunil

Author

Posts

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

You must be logged in to reply to this topic.