jqGrid for Raudus

The purpose of this article is not an introduction to technologies or developer tools that are somehow mentioned in it, the main goal is to give a small impetus to those who are just beginning to be interested in these technologies or tools and would like to understand whether they will be useful and whether they will cover all current needs. However, despite this, I would like to say a few introductory words about Raudus .

Have you encountered the task of rewriting the code of a sufficiently successful and long-used Windows application written in Delphi in order to turn it into a Web application, but at the same time limit it to the minimum number of source code changes? If yes, then this article is for you. There are several ways to solve this problem, but I would like to stop at one of them. His name is Raudus .

Raudus is a web-framework and a set of components for Delphi that allows you to create Rich Internet Applications (RIA) . In this case, the development process itself is not much different from the development of a conventional desktop application. The set of visual components provided here contains analogs of most of the standard Delphi components - the so-called Raudus VCL . You use these visual components, as well as the non-visual components that you are used to (for example, direct database access components), and compile a console application that runs as an HTTP server . In fact, the entire logic of your application remains on the side of this server, and the visual part, that is, the GUI, is transferred to the user's browser. The communication needs of the visual client and server parts are fully covered by the AJAX capabilities. I will not dwell on the description of this solution in more detail. There are small examples on the Raudus website, you can also download the Raudus component library for free, install it and try running the examples that come with it.
')
Yet in my case, the standard set of components was not enough. For example, I really wanted to use the fully functional analogue of TDBGrid: with filters, with sorting, with colspan, with paging, etc. Immediately the jqGrid came to mind first. But how to make him "infiltrate" in Raudus and is it possible at all?

Fortunately , in the extreme versions of Raudus there is a special class TRaExtendableControlGCD , inheriting which you can potentially convert any jQuery UI component, jQuery plugin, as well as components from ExtJS, QooxDoo, etc. to the Raudus component. At the same time, the newly appeared component will look the same, both in DesignTime and in RunTime.

The TRaExtendableControlGCD class has three key methods: RaDrawExtend , RaUpgradeExtend and RaRouteExtend , redefining which you essentially write a shell around, for example, jqGrid, so that Raudus “understands” how this component works.
RaDrawExtend - by overriding this method, you write JavaScript code that initializes the jqGrid.
RaRouteExtend - by overriding this method, you write code that must be executed with some action in the client side of the jqGrid component. Those. This is the place to respond to any AJAX request from the jqGrid.
RaUpgradeExtend - by overriding this method, you write JavaScript code that must be executed after the code in the RaRouteExtend method. Those. This is the place where the server-side component is affected by the client-side component.
How to use these three methods in general terms and what comes out of this you can see in the examples supplied with the Raudus distribution. There, in particular, contains examples of embedding jqDatePicker and TinyMCE.

The first and most obvious thing that needs to be implemented in the case of a jqGrid is filling it with data and organizing paging. How to do this in this case?

It is known that jqGrid supports several datatype (data retrieval methods): json (jsonstring), xml (xmlstring), local, javascript and function. function allows you to specify the javascript function as the source for receiving data, and inside this function, you can query the data from the server side of the application, then use the addJSONData method to fill the jqGrid with the received data. We will use this method.

So, in the jqGrid initialization string we specify the datatype and define the function in which the initial and next chunk of data will be requested:

The me.route method inside our getData function is the way the client side of the component accesses the server side using AJAX. Thus, we request a data set from the server part based on the parameters contained in the postdata . All request parameters are packed in a JSON string. The postdata contains the service data request parameters that are described in the jqGrid documentation , among them: the current page number with the next data portion, the number of records in the data portion, the sorting parameters, the filter, etc. On the server side, the RaRouteExtend method is triggered, in which we process the request parameters sent, generate the necessary data portion in the form of a JSON string and give this portion back to the jqGrid in the RaUpgradeExtend method approximately like this:

  AJavascript := AJavascript + 'var me=this;' + 'if(me.e){' + 'var v=JSON.parse('''+FJSON+''');'+ '$(me.e)[0].addJSONData(v);' + '};'; 

where FJSON is a chunk of data represented as a JSON string.

So, what happens when you first apply :
1. The user first loads the form with jqGrid. Runs the RaDrawExtend server method, initializing the jqGrid.
2. jqGrid performs a javascript getData () function to get the first chunk of data.
3. Runs the RaRouteExtend server method. A data set is formed based on the data request parameters, which indicate that the first page of data is being requested (page = 1). The data set is serialized to a JSON string.
4. The server method RaUpgradeExtend is executed, in which the javascript code is added, which adds data to the jqGrid.
5. Runs javascript code, registered in the RaUpgradeExtend method and jqGrid is filled with data.

What happens when you go to the page with the next portion of data :
1. The user goes to the next page with data in the jqGrid.
2. jqGrid again performs the javascript getData () function to get the next piece of data.
3. Runs the RaRouteExtend server method. A data set is formed based on the data request parameters, which indicate that the next page of data is being requested (page = 2, page = 3, etc.). The data set is serialized to a JSON string.
4. The server method RaUpgradeExtend is executed, in which the javascript code is added, which adds data to the jqGrid.
5. Runs javascript code, registered in the RaUpgradeExtend method and jqGrid is filled with data.

That's all. If you have any questions, ask. Perhaps the article will have to add some clarifications.
Thank you for your attention and success to you!