Databind

[linekerParticipant]

Hi I am new at jqwidgets.
I have a grid and a button above grid.
My grid displays json data.

When my page is displayed here is my json url:

http://xxx.yyyyy.com/?cmd=json_act_cat_list&filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=18&stdate=4&_=1367362159957

When I click on a button, I want my json url called again with new parameters.

Here is my click function:

$("button").click(function () {
         dataAdapter.dataBind();
 });

My parameters are always same. Why? For example I cahnge pagesize from 10 to 20 but it is still 10 at url when I clieck on button

http://xxx.yyyyy.com/?cmd=json_act_cat_list&filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=18&stdate=4&_=1367362159957

[linekerParticipant]

To explain clearly, I am writing my source below:

var mydate = $(“#mydate”).jqxDateTimeInput({ width: ‘120px’, height: ’25px’, animationType: ‘fade’ });

// prepare the data
var source = {
datatype: “json”,
datafields: [
{ name: ‘CategoryID’, type: ‘int’ },
{ name: ‘Category’ },
{ name: ‘Updated’ },
],
id: ‘CategoryID’,
url: url,
data: {
stdate: mydate.jqxDateTimeInput(‘getDate’).getMonth(),
}
};

After I change date from mydate.jqxDateTimeInput, I click on a button, call databind and I want stdate to set the value of date selected from jqxDateTimeInput but it is not. It is always sent to server with value of initial.

[Peter StoevKeymaster]

Hi,

The “updatebounddata’ method of jqxGrid is required to be called if your intention is to update the Grid’s data. I also suggest you to look at the implementation of our PHP or ASP .NET samples with Server Paging.

Best Regards,
Peter Stoev

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

[linekerParticipant]

Hi Peter,

Thanks for quick reply.
When I commented out dataAdapter.dataBind() and added $(‘#jqxgrid’).jqxGrid(‘updatebounddata’) as below, I saw that correct pagesize parameter is passed to url when I clicked on button.

$(“button”).click(function () {
//dataAdapter.dataBind();
$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
});

But the parameter stdate which is datetimeinput is not passed to url with new paramater.

var source = {
datatype: “json”,
datafields: [
{ name: ‘CategoryID’, type: ‘int’ },
{ name: ‘Category’ },
{ name: ‘Updated’ },
],
id: ‘CategoryID’,
url: url,
data: {
stdate: mydate.jqxDateTimeInput(‘getDate’).getMonth(),
}
};

I will also analysize what is the difference between databound and databind because when I used databound instead of databind with your offer I saw that reqest to server has been performed again. Then I will search what is the meaning of databind.

[Peter StoevKeymaster]

Hi,

If you send us a full sample which demonstrates your scenario, then we will be able to test with your code, too. dataBind of dataAdapter and updateBoundData will make a new Ajax request. The difference is that “updatebounddata” as a jqxGrid method will prepare a new Data from jqxGrid’s parameters for posting. If you call just dataBind, the dataAdapter will perform Ajax call with its old parameters. For posting custom parameters see: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm

Best Regards,
Peter Stoev

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

[linekerParticipant]

Hi Peter,

I understood the difference between dataBind of dataAdapter and updateBoundData.
There is no problem to pass static parameter to json url with ajax request as follow:

var source =
{
…………
………….
data: {
featureClass: “P”,
style: “full”,
maxRows: 50
}
};

I have problem to pass dynamic parameter to json url as follow

var mydate = $(“#mydate”).jqxDateTimeInput({ width: ‘120px’, height: ’25px’, animationType: ‘fade’ });

var source =
{
…………
………….
data: {

mydate: mydate.val()

}
};

Another question is that, suppose that I appended my datetimeinput to toolbar of grid, then can we assume that datetimeinput is a membr of grid and databound is enough to pass value of it to url without using databind?

[Peter StoevKeymaster]

Hi lineker,

If you want to pass dynamic parameters, you should use the formatdata callback of the source object as demonstrated in the help topic that I posted you in my previous post.

Best Regards,
Peter Stoev

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

[linekerParticipant]

Hi Peter,

Thanks a lot. Dynamic parameter passed to url by using formatdata as follow.

formatdata: function (data) {
return {‘stdate’: datemy.val()};
}

But this time, I dont see grid parameter at URL although databound is used. There is only stdate at url as parameter. Using formatdata prevented grid parameters to be at URL

[Peter StoevKeymaster]

Hi lineker,

The Grid’s Parameter is the “data” parameter passed in the “formatdata” callback. The result of that function is what is passed to the server so if you do not include the data parameter in the return statement, the Grid will not pass it to the server.

Best Regards,
Peter Stoev

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

[linekerParticipant]

Hi Peter,

Now it is ok, I am using below code and it works

var mydate = $(“#mydate”).jqxDateTimeInput({ width: ‘120px’, height: ’25px’, animationType: ‘fade’ });

processdata: function (data) {
data.startdate= mydate.val();
}

But there is very critical point for me.

If I define div of datetimeinput at toolbar with rendertoolbar property as follow::

rendertoolbar: function (toolbar) {
var container = $(“

“);

var span_start = $(“

“);
/>”);

var s_date = span_start.jqxDateTimeInput({ width: ‘120px’, height: ’25px’, animationType: ‘fade’ });
….
….
}

When I write below code to pass datetimeinput of which div part defined at rendertoolbar , it does not pass to url

v
processdata: function (data) {
data.startdate= $(“startdate”).val();
}

As a result, there is no problem to pass value to url if div ofdatetimeinput is defined at html, but it is problem if it is defined at rendertoolbar.

[Peter StoevKeymaster]

Hi,

To select a Tag with jQuery, you can use the tag’s ID i.e $(“#myID”) or by class $(“.myCSSClass”); If your jQuery’s selection is not correct then you will not be able to get the widget’s value.

Best Regards,
Peter Stoev

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

[linekerParticipant]

Hi Peter,

I use correct syntax, Inly wrote wrong to form.
At below example, startdate is a div defined at rendertoolbar for which jquerydatetimeinput is applied, but I dont see anything at url called startdate. If I defined div at html body I see it

processdata: function (data) {
data.startdate= $(“#startdate”).val();
}

[Peter StoevKeymaster]

Hi,

If $(“#startdate”) fails there are 2 possible reasons:

1. There is no HTML Element with ID = “startdate” at all.
2. You add HTML Element with ID = “startdate” after your processdata is called.

*rendertoolbar callback of jqxGrid is called when the Grid is rendered and its data is loaded. It is very possible that “startdate” is still not created when you bind the widget.

Best Regards,
Peter Stoev

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

[linekerParticipant]

Hi Peter,

The reason is 2nd one.
But there is no chance define processdata after grid definition?
So this means that I can’t pass value of items to url defined at rendertoolbar callback of jqxgrid?

[Peter StoevKeymaster]

Hi lineker,

Actually, you can create a Date object before the Grid’s definition and update that Date object when the DateTimeInput’s value is changed. In the processdata, you will work with the Date object.

Best Regards,
Peter Stoev

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

[Author]

Posts