Trying Understand Post

[CharlieParticipant]

I’m very much a newbie.

I have edited the Custom Filtering example to accept input from MySQL. So far so good. However I can’t see how the return the selections made in contenttablejqxgrid at:-

southcot.com/testjs

Even if I select a record I only seem to get postdata back from columnchooser, filterbox and the GoButton. What am I missing?

Sorry if I’m missing something obvious.

Charlie

[Peter StoevKeymaster]

Hi Charlie,

The Grid’s selection is not passed to the server automatically. If you want to add it, you need to get the selected row through the API(“getselectedrowindex” method – var rowindex = $(‘#grid’).jqxGrid(‘getselectedrowindex’); ) and use the “formatdata” callback of the Grid’s source object to extend the default data passed to the server. For more information about “formatdata”, please look at this help topic: jquery-grid-extra-http-variables.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[CharlieParticipant]

Thanks for the speedy response. I’m afraid I’m struggling here, sorry.

Taking the code on the grid tutorial at http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-getting-started.htm:-

var source =
{
localdata: data,
datatype: “array”
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 100 },
{ text: ‘Product’, datafield: ‘productname’, width: 180 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 80, cellsalign: ‘right’ },
{ text: ‘Unit Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total’, datafield: ‘total’, width: 100, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

I can see I need somehow to include:-

formatdata: function (data) {
return “my data”;
}

And you mention:

$(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);

However I’m completely at a loss to make this work.

[Peter StoevKeymaster]

Hi Charlie,

In the posted code, the Grid is bound to a local data source. The formatdata is used when the Grid is bound to a server. In this sample, the Grid is bound to MySQL DB: php-server-side-grid-filtering.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[CharlieParticipant]

I’m checking this out now. FYI there are two typos (three if you count the two occurrences of “orders”:-

in your northwind DB the table is Orders not orders and there’s an extra ” in the

tag. I’ll let you know how I get on.

[CharlieParticipant]

Thanks for your continued support, sorry this is proving such a sticking point for me. I’ve run the code and I see that it is basically the code I have played with before. In the original example above I was using local data rather then MySQL data purely for convenience. What I still can’t get is how to capture the section made on the grid when a form is returned. This brings me back to the original link I offered:-

southcot.com/testjs

From your earlier post I think I can see I need to use:-

formatdata: function (data) {
return “my data”;
}

And you mention:

$(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);

However I’m completely at a loss as to how to do this. Nothing I try works.

With reference to the link you gave me:-

php-server-side-grid-filtering.htm

If I amend the HTML so (see here for full code):-

<form action="" method="POST" id="TestForm" name="TestForm">
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
    <p style="clear: both;">&nbsp;</p>
    <input type="submit" name="GoButton" id="GoButton" value="Post">
</form>

how do I need to change the JavaScript in order for the post to capture the selected ID on the grid?

[Peter StoevKeymaster]

Hi Charlie,

The simplest thing which you can do in order to submit the selected row is to add a hidden Input field to your form. Then bind to the Grid’s “rowselect” event and set your input’s value with the row’s index.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[CharlieParticipant]

I’m sorry to be so thick but I’m still struggling. I have managed to get something returned but it’s still not right. The returned data does not seem to have anything to do with the selected data and does not vary whether you choose one row or many:-

southcot.com/testjs/

[CharlieParticipant]

It would be good to get this sorted please or should I raise it as one of my technical support tickets?

[Peter StoevKeymaster]

Hi Charlie,

As you want to make a submit through a Form, then you may do the following:

1. Add hidden input in your Form and set its “name” attribute.
2. Trigger the ‘rowselect’ event of jqxGrid.
3. In the ‘rowselect’ event handler, fill the hidden input with information about the selected row.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts