paging-Selec row not able to change the value

[kalaivaniMember]

Hi,

Can’t able to select the select row combo after the grid view is loaded .In default it showing as 10 ,if i try to change that it rolling and i cant able to select it.
But i can able to see the default entry 5,10,20 is just rolling not able to select.
what may be the cause of it ?

[kalaivaniMember]

sorry -Its Show Row combo in pagination.i wrongly mentioned as select row .

[Peter StoevKeymaster]

Hi kalaivani,

I will need a code which reproduces the issue as it works on my side. Could you post a full sample which reproduces the reported issue or send it to support@jqwidgets.com? I’d like to test and debug what could be the issue. Please tell me the browser that you use for testing.

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kalaivaniMember]

Hi Peter,

I have send you the sample code .

In that code Button 1 and Button 2 which updates the API file.In the mean while the Grid got dynamically filled by getting the values from that API file using setinterval() property for every 5 sec.

Problems Facing :

1. Show Row cant able be choose after the grid got filled.
2. Page can be able to navigate but it automatically goes to first page within few secs
3.At last updation of the Grid view ,it got flickered once .is it possible to rectify it ?

May be the problems are due to continuous updation of the grid view .If so then how to stop the updation in certain time ,any suggestion for it?

[Peter StoevKeymaster]

– The “Show Row” is not displaying properly because the project uses jQuery 1.4.1. This version of jQuery Framework is very old(January 2010) and we don’t support it. We support versions which are not more than 1 year old. I suggest you to download and include the jQuery 1.7.2 version. Once doing that, the dropdown will be displayed properly.
– When the Grid’s data source is changed, the pager automatically goes to the first page. It is doing that because let’s say you have a grid with 100 rows and your current page number is 8. The data source is changed and you have 20 rows. What’s more correct in that scenario ? – go to the first page or go to the last page because the new data source has less rows than the previous one. Our choice was “go to the first page” when the data source is changed. You can save the current page number before updating the Grid and use the ‘gotopage’ method to navigate to a page after updating the Grid.
– I can’t reproduce the flickering on my side.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kalaivaniMember]

Thanks again Peter.

-yes the “Show Row ” is working fine after uploading the JQuery 1.7.2.

-Page navigation – Where to store the current page number and where to use this goto page method in my code? It should navigate to the page as per the user selection.

– Flickering in the sense for 1 sec the grid view disappears and appears.

[kalaivaniMember]

I have tried with implementing by getting the pagenumber in Pagerender function and used gotopage function in bindingcomplet function.

var pagerrenderer = function () {
var element = $(“

“);
var paginginfo = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
for (i = 0; i < paginginfo.pagescount; i++) {
// add anchor tag with the page number for each page.
var anchor = $("” + i + ““);
anchor.appendTo(element);
anchor.click(function (event) {
// go to a page.
var pagenum = parseInt($(event.target).text());
$(“#jqxgrid”).jqxGrid(‘gotopage’, pagenum);
});
}
return element;
}

$(“#jqxgrid”).bind(‘bindingcomplete’, function () {
$(“#jqxgrid”).jqxGrid(‘gotopage’, pagenum);
}

But again the same behaviour as it go to first page .How to do it ?

[Peter StoevKeymaster]

Hi kalaivani,

You can do the following:

– Before changing the Data Source, save the current page number.
– After changing the Data Source, navigate to the previous page.

getdata();
setInterval(function () {
    var page = $("#jqxgrid").jqxGrid('getpaginginformation').pagenum;
    getdata();
    $("#jqxgrid").jqxGrid('gotopage', page);
}, 5000);

Best Regards,
Peter Stoev

jQWidgets team
http://www.jqwidgets.com

[kalaivaniMember]

I tried as per your code ..
but am getting like unable to get the value of property ‘pagenum’ object is null or undefined when var page = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’).pagenum; executes.

[Peter StoevKeymaster]

Hi kalaivani,

When calling a Grid method like the ‘getpageinformation’, the Grid should be initialized at that point. That it why in the code I posted you, I first call the getdata function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kalaivaniMember]

Peter,

yes i too done like the code posted by you .iam getting the same error unable to set the property value .
i have send my code to support@jqwidgets.com.

Please go through it.What wrong i done on it ?

[Peter StoevKeymaster]

According to me, the problem is that some of the functions are called outside of the $(document).ready and some DOM elements may not be still loaded. I’ve just sent you an e-mail with an update of your project.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kalaivaniMember]

Is that code working for you ?
For me initial execution itself showing error and the function is not called again.Grid View is not available in my page now.

[Peter StoevKeymaster]

It works, please see below:

I am using VS 2010 Ultimate and ASP .NET 4.0.

Here’s the source code that I use in the Default.aspx page:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="JQueryGridview_demo._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <%--<link rel="stylesheet" href="http://localhost/../jqwidgets/styles/jqx.base.css" 
        type="text/css" />--%>
    <link href="jqx/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <%-- <script  type="text/javascript" src="Scripts/jquery-1.4.1.min.js" ></script>--%>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <%-- <script type="text/javascript" src="http://localhost/../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="http://localhost/../jqwidgets/jqxdropdownlist.js"></script>--%>
    <script src="jqx/jqxcore.js" type="text/javascript"></script>
    <script src="jqx/jqxdata.js" type="text/javascript"></script>
    <script src="jqx/jqxbuttons.js" type="text/javascript"></script>
    <script src="jqx/jqxscrollbar.js" type="text/javascript"></script>
    <script src="jqx/jqxmenu.js" type="text/javascript"></script>
    <script src="jqx/jqxgrid.js" type="text/javascript"></script>
    <script src="jqx/jqxgrid.selection.js" type="text/javascript"></script>
    <script src="jqx/jqxgrid.sort.js" type="text/javascript"></script>
    <script src="jqx/jqxgrid.pager.js" type="text/javascript"></script>
    <script src="jqx/jqxgrid.columnsresize.js" type="text/javascript"></script>
    <script src="jqx/jqxlistbox.js" type="text/javascript"></script>
    <script src="jqx/jqxdropdownlist.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function getdata() {
                 var data = '{"Products":[{"PNum":"1001","Description":"Product1", "Stock": "10"}, {"PNum":"1002","Description":"Product2", "Stock": "20"}]}';
                 var source =
                 {
                     datatype: "json",
                     async: false,
                     datafields: [
                        {name: 'Id' },
                        { name: 'FileName' },
                        { name: 'Link' },
                        { name: 'user' }
                     ],
                     id: "id",
                     url: 'api/Files/'
                 };
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid").bind('bindingcomplete', function () {
                });
                $("#jqxgrid").jqxGrid(
                {
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    columns: [
                        { text: 'First Name', dataField: 'Id', width: 100 },
                        { text: 'Last Name', dataField: 'FileName', width: 100 },
                        { text: 'Product', cellsrenderer: makeAddToListButton_html, dataField: 'Link' },
                        { text: 'user', dataField: 'user' }
                    ]
                });
            }
            getdata();
            setInterval(function () {
                var page = $("#jqxgrid").jqxGrid('getpaginginformation').pagenum;
                getdata();
                $("#jqxgrid").jqxGrid('gotopage', page);
            }, 5000);
            var makeAddToListButton_html = function (id, row, column, value) {
                var datarow = $('#jqxgrid').jqxGrid('getcellvalue', id, "Link");
               return '<input type="button" onClick="buttonclick(event)" class="gridButton" id="btn' + id + '" value= ' + datarow + '>'
            }
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button1" />
            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button2" />
            <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="Clear" />
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <script type="text/javascript">
                function clear() {
                    clearInterval(updateprocess);
                }
            </script>
            <div id='jqxWidget'>
                <div id="jqxgrid">
                </div>
                <script type="text/javascript">
                    var buttonclick = function (event) {
                        var buttonID = event.target.id;
                        // window.alert(buttonID);
                        var datarow = event.target.value;
                        // window.alert(datarow);
                        // var url = "http://" + top.location.host + "/JQueryGridview_demo/" + datarow;
                        newwindow = window.open(datarow, 'name', 'scrollbars = 1', 'height=1000,width=1000');
                        if (window.focus) { newwindow.focus() }
                    }
                </script>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <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>
</asp:Content>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

In addition to my previous post:

You can set the ‘async’ to true. This will ensure that the data is loaded in asynchronous mode and could be helpful.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts