{"id":50,"date":"2008-07-01T09:11:01","date_gmt":"2008-07-01T17:11:01","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=49"},"modified":"2023-05-09T12:31:55","modified_gmt":"2023-05-09T09:31:55","slug":"grid-gears","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/grid-gears\/","title":{"rendered":"Grid + Gears = ?"},"content":{"rendered":"

Translated from original posted on www.monoxrom.net<\/em><\/p>\n

I’ve been trying to have a look at Google Gears in action, but always had some other fish to fry. You can hardly expect a user to agree on implementing some off-site plug-in developing a simple web-page. But if it is about developing for the Intranet, it doesn’t come out to be anything like a serious problem.<\/p>\n

Still less chance a user has to implement an off-site plug-in in the Intranet. But if the boss wants it, so “keep quiet and drive” :)<\/p>\n

Initially we have: a file with tabular data (an Excel file, in practice).
\nRequired output: a changes-friendly interface for a remote user.<\/p>\n

The most trivial solution – to use ready-made online services (for example, Google Spreadsheet) – doesn’t meet the case, unfortunately (authorization is required, and it is laced with some (un)healthy paranoia).
\nThe second simple approach is using one of ready-made grid-like solutions, to which Google Gears can be attached for additional comfort.<\/p>\n

Step One – Toolkit Preparation<\/strong><\/p>\n

Let’s reject purely commercial components at once. They also have their own niche in real life but in this case their usage is not reasonable.<\/p>\n

There are three good solutions among open-source components: extJS Grid, dhtmlxGrid, DOJO Grid (the first two of them are produced under double licenses: GPL | Commercial, the third one has BSD-like license).<\/p>\n

ExtJS – All other things being equal, it has the largest amount of necessary files and some performance problems working with huge datasets.<\/p>\n

The unclear situation with its licensing policy reduces the desire of using it (the moral aspect of project development under GPL which further on was shifted to a tougher license is on developer’s head).
\nLet’s leave making a smaller build for people who have more spare time.<\/p><\/blockquote>\n

DOJO grid – It seems to be ok, but there’s no certainty about it due to absence of documentation.<\/p>\n

dhtmlxGrid – the amount of code is relatively small, its examples and documentation, and, the main thing, working speed make this component our best card.<\/p>\n

We’ll take it, wrap up two, please.<\/p><\/blockquote>\n

We use a highly classified<\/em> Excel file as a data source (in further examples, this highly classified Excel file will be replaced by an unclassified one obtained with the help of freebase.com – but it was deprecated).
\nLet’s convert it into CVS to simplify further development.<\/p>\n

I adore office packets: you save the file as “data with a separator , “, and get “data with a separator ; ” – such a slight misunderstanding. But saving was done, at least it’s something.<\/p><\/blockquote>\n

Thus, settled: dhtmlxGrid<\/a> + data<\/p>\n

Step Two – Data Loading<\/strong><\/p>\n

When we have the required toolkit in hand, we can get down to practice.
\nAs a first step we render grid and populate it with data – prototype.<\/p>\n

The initialization code is relatively simple:<\/p>\n

    \n
  1. \n

    \/\/create a grid object <\/em><\/span><\/p>\n<\/li>\n

  2. \n

    \u00a0grid =\u00a0 new<\/strong><\/span> dhtmlXGridObject(<\/span>\u2018for_grid\u2019<\/span>)<\/span>;<\/p>\n<\/li>\n

  3. \n

    \/\/set columns names
    <\/em><\/span><\/p>\n<\/li>\n

  4. \n

    \u00a0grid.setHeader<\/span>(<\/span>“Name,Manufacturer,Format,Horizontal Resolution,Vertical Resolution,Digital zoom,Compressed Formats,Viewfinder type,LCD resolution,Weight (g),Width,Height,Depth,Also known as,Web Link”<\/span>)<\/span>;<\/p>\n<\/li>\n

  5. \n

    \/\/set columns width<\/em><\/span><\/p>\n<\/li>\n

  6. \n

    \u00a0grid.setInitWidths<\/span>(<\/span>“300,100,100,100,100,100,100,100,100,100,
    \n100,100,100,200,300″<\/span>)<\/span><\/li>\n

  7. \n

    \/\/render grid<\/em><\/span><\/p>\n<\/li>\n

  8. \n

    grid.init<\/span>(<\/span>)<\/span><\/p>\n<\/li>\n

  9. \n

    \/*inform grid that input data has ready-made IDs and there’s no need to worry about them <\/em><\/span><\/p>\n<\/li>\n

  10. \n

    ready-made IDs are not typical for CSV|Excel – but we’re lucky at this point*\/<\/em><\/span><\/p>\n<\/li>\n

  11. \n

    \u00a0grid.enableCSVAutoID<\/span>(<\/span>false<\/strong><\/span>)<\/span><\/p>\n<\/li>\n

  12. \n

    \/\/set data separator in CSV<\/em><\/span><\/p>\n<\/li>\n

  13. \n

    \u00a0grid.csv<\/span>.cell<\/span>=“;”<\/span><\/p>\n<\/li>\n

  14. \n

    \/\/make grid a little more attractive<\/em><\/span><\/p>\n<\/li>\n

  15. \n

    \u00a0grid.setSkin<\/span>(<\/span>“modern”<\/span>)<\/span><\/p>\n<\/li>\n

  16. \n

    \/\/load data<\/em><\/span><\/p>\n<\/li>\n

  17. \n

    \u00a0grid.load<\/span>(<\/span>“data.csv”<\/span>,“csv”<\/span>)<\/span>;<\/p>\n<\/li>\n<\/ol>\n

    <\/small><\/p>\n

    It’s not that the amount of code is small, but there is no useless commands – everything is to the point. Grid is being rendered, data is being loaded, default settings allow to edit it, but everything is done not so quickly.<\/p>\n

    Initially a file with 1000 lines was used in tests. In the example above it was replaced by a file with 200 lines – using a 300kb file in a post is not very humane :) – that’s why the difference in loading speed is not so notable. Believe my word, the difference will be much more visible in case of 1000 lines.<\/p><\/blockquote>\n

    Now that it can be fixed pretty easily by adding one command to the initializing code:<\/p>\n

    Code (javascript)<\/p>\n

      \n
    1. \n

      grid.enableSmartRendering<\/span>(<\/span>true<\/strong><\/span>)<\/span><\/p>\n<\/li>\n<\/ol>\n

      And we get the same example, but the data is now being rendered nearly instantly – prototype<\/p>\n

      At a closer look it’s obvious that only two lines were changed in the code, one more JS file was added in addition to the command itself.
      \nIn case of dhtmlxgrid – more functionality means more included files, in contrast with extJs’s approach which initially includes everything in the core.<\/p><\/blockquote>\n

      Step Three – Saving Changes<\/strong><\/p>\n

      We have data, it can be edited, there’s only one little thing left – to save it.<\/p>\n

      In theory there’s a possibility in dhtmlxgrid to integrate with server code, but this opportunity is included only into the PRO version. That’s why it’s time for a workaround.<\/p><\/blockquote>\n

      In order not to complicate the thing that is already simple, we add a “Save” button, a click on which transforms the grid back to CSV and sends it to the server:<\/p>\n

      Code (javascript)<\/p>\n

        \n
      1. \n

        function<\/strong><\/span> save_data(<\/span>)<\/span>{<\/span><\/p>\n<\/li>\n

      2. \n

        \u00a0 document.forms<\/span>[<\/span>0<\/span>]<\/span>.data<\/span>.value<\/span>=grid.serializeToCSV<\/span>(<\/span>)<\/span>;<\/p>\n<\/li>\n

      3. \n

        \u00a0 document.forms<\/span>[<\/span>0<\/span>]<\/span>.submit<\/span>(<\/span>)<\/span>;<\/p>\n<\/li>\n

      4. \n

        }<\/span><\/p>\n<\/li>\n<\/ol>\n

        At the same time we add a couple of code lines to make the changed data noticeable:<\/p>\n

        \u00a0Code (javascript)<\/p>\n

          \n
        1. \n

          \u00a0grid.attachEvent<\/span>(<\/span>“onEditCell”<\/span>,function<\/strong><\/span>(<\/span>stage,id,ind)<\/span>{<\/span> \/\/in case of editing<\/em><\/span><\/p>\n<\/li>\n

        2. \n

          \u00a0 if<\/strong><\/span> (<\/span>stage==2<\/span>)<\/span> \/\/ when it is finished<\/em><\/span><\/p>\n<\/li>\n

        3. \n

          \u00a0\u00a0 grid.setRowTextStyle<\/span>(<\/span>id,“font-weight:bold;”<\/span>)<\/span>; \/\/ mark the line<\/em><\/span><\/p>\n<\/li>\n

        4. \n

          \u00a0\u00a0 <\/strong>return<\/strong><\/span> true<\/strong><\/span>;<\/p>\n<\/li>\n

        5. \n

          \u00a0}<\/span>)<\/span><\/p>\n<\/li>\n<\/ol>\n

          Everything is simpler on the server side:<\/p>\n

          Code (php)<\/p>\n

            \n
          1. \n

            if<\/span> (<\/span>isset(<\/span>$_POST<\/span>[<\/span>“data”<\/span>]<\/span>)<\/span>)<\/span><\/p>\n<\/li>\n

          2. \n

            \u00a0file_put_contents(<\/span>“data.csv”<\/span>,$_POST<\/span>[<\/span>“data”<\/span>]<\/span>)<\/span>;<\/p>\n<\/li>\n<\/ol>\n

            Authorization code is omitted.
            \nNaturally, such approach of overwriting the data source is too straight and doesn’t have right to exist in real life. But why not at the stage of prototype?<\/p><\/blockquote>\n

            With all these changes introduced we have the next version of the prototype that can load data, allows to edit data and saves the result on the server (it took me much more time to describe the process rather than to create the prototype).<\/p>\n

            Step Four – Google Gears Enters the Game<\/strong><\/p>\n

            Now when everything works, we can think of some useful ingredients.
            \nData saving is one of the things that seem obvious. In my personal experience, data loss is the nastiest thing that may happen (network connection loss, program error, some accidentally pressed button – losing is much easier than creating).<\/p>\n

            In case of using Google Gear, you can store all the information on client’s side. Then if a page is reloaded or even closed, the data won’t be lost. During your next visit the data can be restored out of the local storage.<\/p>\n

            Unlike grid, Gears’s initialization and configuring are troublesome.
            \nAs a first step we need to install Gears and create a database.<\/p>\n

            Code (javascript)<\/p>\n

              \n
            1. \n

               <\/p>\n<\/li>\n

            2. \n

              \u00a0\/\/check the availability of Google Gears; if it is not installed, everything will operate without any changes<\/em><\/span><\/p>\n<\/li>\n

            3. \n

              \u00a0if<\/strong><\/span> (<\/span>!window.google<\/span>)<\/span> return<\/strong><\/span> alert<\/span>(<\/span>“The page requires Google Gears \\n<\/strong><\/span> It will work without it as well, but you will not be able to work offline.”<\/span>)<\/span>;<\/p>\n<\/li>\n

            4. \n

              \u00a0\/\/if Google Gears is installed, we create a local database<\/em><\/span><\/p>\n<\/li>\n

            5. \n

              \u00a0db = google.gears<\/span>.factory<\/span>.create<\/span>(<\/span>\u2018beta.database\u2019<\/span>)<\/span>;<\/p>\n<\/li>\n

            6. \n

               <\/p>\n<\/li>\n

            7. \n

              \u00a0\/\/check database creation. Gears requests user’s permission and the user can well deny the operation<\/em><\/span><\/p>\n<\/li>\n

            8. \n

              \u00a0if<\/strong><\/span> (<\/span>db)<\/span> {<\/span><\/p>\n<\/li>\n

            9. \n

              \u00a0\/\/create the required table, we set all the fields as <\/em><\/span>varchar(255)<\/em><\/span> to avoid any mess<\/em><\/span><\/p>\n<\/li>\n

            10. \n

              \u00a0<\/em>\/\/a table field is created for each column in grid, plus one additional field – updated – that will save the status of data lines
              <\/em><\/span><\/p>\n<\/li>\n

            11. \n

              \u00a0db.open<\/span>(<\/span>\u2018gearsgrid\u2019<\/span>)<\/span>;<\/p>\n<\/li>\n

            12. \n

              \u00a0 db.execute<\/span>(<\/span>\u2018create table if not exists photodata (pkID varchar(255), Name varchar(255), Manufacturer varchar(255), Format varchar(255), Horizontal varchar(255), Vertical varchar(255), Zoom varchar(255), Compressed varchar(255), Viewfinder varchar(255), LCD varchar(255), Weight varchar(255), Width varchar(255), Height varchar(255), Depth varchar(255), Known varchar(255), Link varchar(255), updated int)\u2019<\/span>)<\/span>;<\/p>\n<\/li>\n

            13. \n

               <\/p>\n<\/li>\n

            14. \n

              \u00a0<\/em>\/\/check whether there is data in the database or it is the first loading<\/em><\/span><\/p>\n<\/li>\n

            15. \n

              \u00a0<\/strong>var<\/strong><\/span> rs = db.execute<\/span>(<\/span>\u2019select count(*) from photodata\u2019<\/span>)<\/span>;<\/p>\n<\/li>\n

            16. \n

              \u00a0<\/em>\/\/if the data is not loaded yet <\/em><\/span><\/p>\n<\/li>\n

            17. \n

              \u00a0<\/strong>if<\/strong><\/span> (<\/span>rs.field<\/span>(<\/span>0<\/span>)<\/span>==0<\/span>)<\/span>{<\/span><\/p>\n<\/li>\n

            18. \n

              \u00a0 <\/em>\/\/create the query and get the data<\/em><\/span><\/p>\n<\/li>\n

            19. \n

              \u00a0 <\/strong>var<\/strong><\/span> request = google.gears<\/span>.factory<\/span>.create<\/span>(<\/span>\u2018beta.httprequest\u2019<\/span>)<\/span>;<\/p>\n<\/li>\n

            20. \n

              \u00a0\u00a0 request.open<\/span>(<\/span>\u2018GET\u2019<\/span>, \u2018data.csv?uid=\u2019<\/span>+(<\/span>new<\/strong><\/span> Date(<\/span>)<\/span>)<\/span>.valueOf<\/span>(<\/span>)<\/span>)<\/span>;<\/p>\n<\/li>\n

            21. \n

              \u00a0\u00a0 request.onreadystatechange<\/span> = function<\/strong><\/span>(<\/span>)<\/span> {<\/span><\/p>\n<\/li>\n

            22. \n

              \u00a0\u00a0\u00a0 if<\/strong><\/span> (<\/span>request.readyState<\/span> == 4<\/span>)<\/span>{<\/span><\/p>\n<\/li>\n

            23. \n

              \u00a0\u00a0\u00a0 \/\/split the derived CSV file into lines<\/em><\/span><\/p>\n<\/li>\n

            24. \n

              \u00a0\u00a0\u00a0\u00a0 <\/strong>var<\/strong><\/span> data=request.responseText<\/span>.split<\/span>(<\/span>“\\n<\/strong><\/span>“<\/span>)<\/span>;<\/p>\n<\/li>\n

            25. \n

              \u00a0\u00a0\u00a0\u00a0 <\/strong>for<\/strong><\/span> (<\/span>var<\/strong><\/span> i=0<\/span>; i < data.length<\/span>; i++)<\/span>{<\/span><\/p>\n<\/li>\n

            26. \n

              \u00a0\u00a0\u00a0\u00a0 <\/em>\/\/split the lines into columns<\/em><\/span><\/p>\n<\/li>\n

            27. \n

              \u00a0\u00a0\u00a0\u00a0 <\/strong>var<\/strong><\/span> fields=data[<\/span>i]<\/span>.split<\/span>(<\/span>“;”<\/span>)<\/span><\/p>\n<\/li>\n

            28. \n

              \u00a0\u00a0\u00a0\u00a0 \/\/set the reloading flag to 0
              <\/em><\/span><\/p>\n<\/li>\n

            29. \n

              \u00a0\u00a0\u00a0\u00a0 fields.push<\/span>(<\/span>0<\/span>)<\/span><\/p>\n<\/li>\n

            30. \n

              \u00a0\u00a0\u00a0\u00a0 \/\/save in the local database<\/em><\/span><\/p>\n<\/li>\n

            31. \n

              \u00a0\u00a0\u00a0\u00a0 db.execute<\/span>(<\/span>“insert into photodata values(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)”<\/span>,fields)<\/span>;<\/p>\n<\/li>\n

            32. \n

              \u00a0\u00a0\u00a0\u00a0 }<\/span>;<\/p>\n<\/li>\n

            33. \n

              \u00a0\u00a0\u00a0 <\/em>\/\/invoke the function of grid filling<\/em><\/span><\/p>\n<\/li>\n


            34. <\/li>\n
            35. \n

              \u00a0 \u00a0\u00a0 fill_grid(<\/span>)<\/span>;<\/p>\n<\/li>\n

            36. \n

              \u00a0 \u00a0 }<\/span><\/p>\n<\/li>\n

            37. \n

              \u00a0\u00a0 }<\/span>;<\/p>\n<\/li>\n

            38. \n

              \u00a0\u00a0 request.send<\/span>(<\/span>)<\/span>;<\/p>\n<\/li>\n

            39. \n

              \u00a0}<\/span><\/p>\n<\/li>\n

            40. \n

              \u00a0rs.close<\/span>(<\/span>)<\/span>;<\/p>\n<\/li>\n

            41. \n

              \u00a0}<\/span><\/p>\n<\/li>\n<\/ol>\n

              If you don’t receive any data working with the object “request”, check the character encoding in the loaded document. If it is not Us-ASCII | Unicode, “request” will return null – such a nice peculiarity.<\/p><\/blockquote>\n

              As promised – this code fragment came out to be fairly big, but it is not complicated. There’s just a lot of text in it.<\/p>\n

              The Gears loaded the data into the local database, and now the grid can be populated with this data.<\/p>\n

              Code (javascript)<\/p>\n

                \n
              1. \n

                 <\/p>\n<\/li>\n

              2. \n

                function<\/strong><\/span> fill_grid(<\/span>)<\/span>{<\/span><\/p>\n<\/li>\n

              3. \n

                \u00a0if<\/strong><\/span> (<\/span>db)<\/span>{<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \/\/if there is Google Gears<\/em><\/span><\/p>\n<\/li>\n

              4. \n

                \u00a0 <\/strong>var<\/strong><\/span> data=[<\/span>]<\/span>;<\/p>\n<\/li>\n

              5. \n

                \u00a0 <\/em>\/\/choose the data<\/em><\/span><\/p>\n<\/li>\n

              6. \n

                \u00a0 <\/strong>var<\/strong><\/span> rs=db.execute<\/span>(<\/span>“select * from photodata”<\/span>)<\/span>;<\/p>\n<\/li>\n

              7. \n

                \u00a0\u00a0 \/\/form the array of data for grid<\/em><\/span><\/p>\n<\/li>\n

              8. \n

                \u00a0 while<\/strong><\/span> (<\/span>rs.isValidRow<\/span>(<\/span>)<\/span>)<\/span> {<\/span><\/p>\n<\/li>\n

              9. \n

                \u00a0 data.push<\/span>(<\/span>{<\/span><\/p>\n<\/li>\n

              10. \n

                \u00a0 id:rs.field<\/span>(<\/span>0<\/span>)<\/span>,<\/p>\n<\/li>\n

              11. \n

                \u00a0\u00a0 data:[<\/span>rs.field<\/span>(<\/span>1<\/span>)<\/span>,rs.field<\/span>(<\/span>2<\/span>)<\/span>,rs.field<\/span>(<\/span>3<\/span>)<\/span>,rs.field<\/span>(<\/span>4<\/span>)<\/span>,rs.field<\/span>(<\/span>5
                \n<\/span>)<\/span>,rs.field<\/span>(<\/span>6<\/span>)<\/span>,rs.field<\/span>(<\/span>7<\/span>)<\/span>,rs.field<\/span>(<\/span>8<\/span>)<\/span>,rs.field<\/span>(<\/span>9<\/span>)<\/span>,rs.field<\/span>(<\/span>10
                \n<\/span>)<\/span>,rs.field<\/span>(<\/span>11<\/span>)<\/span>,rs.field<\/span>(<\/span>12<\/span>)<\/span>,rs.field<\/span>(<\/span>13<\/span>)<\/span>,rs.field<\/span>(<\/span>14<\/span>)<\/span>,rs.field<\/span>(<\/span>15<\/span>)<\/span>]<\/span>}<\/span>)<\/span>;<\/li>\n

              12. \n

                \u00a0 rs.next<\/span>(<\/span>)<\/span>;<\/p>\n<\/li>\n

              13. \n

                \u00a0 }<\/span><\/p>\n<\/li>\n

              14. \n

                \u00a0rs.close<\/span>(<\/span>)<\/span>;<\/p>\n<\/li>\n

              15. \n

                \u00a0\/\/load the data into grid
                <\/em><\/span><\/p>\n<\/li>\n

              16. \n

                \u00a0grid.clearAll<\/span>(<\/span>)<\/span>;<\/p>\n<\/li>\n

              17. \n

                \u00a0grid.parse<\/span>(<\/span>{<\/span>rows:data}<\/span>,“json”<\/span>)<\/span><\/p>\n<\/li>\n

              18. \n

                \u00a0}<\/span> else<\/strong><\/span><\/p>\n<\/li>\n

              19. \n

                \/\/if there’s no Google Gears, load the data right from the server<\/em><\/span><\/p>\n<\/li>\n

              20. \n

                \u00a0grid.load<\/span>(<\/span>“data.csv?uid=”<\/span>+grid.uid<\/span>(<\/span>)<\/span>,“csv”<\/span>)<\/span>;<\/p>\n<\/li>\n

              21. \n

                }<\/span><\/p>\n<\/li>\n

              22. \n

                 <\/p>\n<\/li>\n<\/ol>\n

                Two examples described above allow us proxying the data through Google Gears. But there’s no other particular use of this, except for some traffic saving (when the second loading takes place, the data will be loaded from the local data store). Though if you load huge datasets, the saving can be substantial.<\/p>\n

                There is one step left to make Gears really wholesome:<\/p>\n

                Code (javascript)
                <\/p>\n

                  \n
                1. \n

                   <\/p>\n<\/li>\n

                2. \n

                  \u00a0grid.attachEvent<\/span>(<\/span>“onEditCell”<\/span>,function<\/strong><\/span>(<\/span>stage,id,ind,value)<\/span>{<\/span><\/p>\n<\/li>\n

                3. \n

                  \u00a0\u00a0 <\/strong>if<\/strong><\/span> (<\/span>stage==2<\/span>)<\/span>{<\/span><\/p>\n<\/li>\n

                4. \n

                  \u00a0\u00a0\u00a0 grid.setRowTextStyle<\/span>(<\/span>id,“font-weight:bold;”<\/span>)<\/span>;<\/p>\n<\/li>\n

                5. \n

                  \u00a0\u00a0\u00a0 <\/em>\/\/if there is Google Gears<\/em><\/span><\/p>\n<\/li>\n

                6. \n

                  \u00a0\u00a0\u00a0 <\/strong>if<\/strong><\/span> (<\/span>db)<\/span> \/\/save a new cell value in the local data store<\/em><\/span><\/p>\n<\/li>\n

                7. \n

                  \u00a0\u00a0\u00a0 db.execute<\/span>(<\/span>“update photodata set “<\/span>+columns[<\/span>ind]<\/span>+“=?, updated=1 where pkID=?”<\/span>,[<\/span>value,id]<\/span>)<\/span>;<\/p>\n<\/li>\n

                8. \n

                  \u00a0}<\/span><\/p>\n<\/li>\n

                9. \n

                  \u00a0<\/strong>return<\/strong><\/span> true<\/strong><\/span>;<\/p>\n<\/li>\n

                10. \n

                  }<\/span>)<\/span><\/p>\n<\/li>\n

                11. \n

                   <\/p>\n<\/li>\n<\/ol>\n

                  The result is available here.<\/p>\n

                  If GoogleGears is not installed – everything continues to work as it was with the previous examples.
                  \nIf GoogleGears is installed, everything gets rather interesting: edit the cell and press F5. When the page is reloaded, new edited data will be presented in grid. You might just as well close the browser window and visit the same page using some other browser – edited data will still be there. Whatever the software and the network connection troubles are, there’s no way to lose your data!<\/p>\n

                  Step Five – Slight Improvements<\/strong><\/p>\n

                  One thing left in order to finish up with the practice – to spruce up.<\/p>\n

                  Let’s start with adding a visual mark for edited lines. The field “Updated” has already been set in such a way that we need only to introduce slight changes into the data loading code to make changed data from the local data store look like newly edited one.<\/p>\n

                  Code (javascript)
                  <\/p>\n

                    \n

                  1. <\/li>\n
                  2. \n

                    \u00a0<\/em>\/\/style is used to mark already edited lines<\/em><\/span><\/p>\n<\/li>\n

                  3. \n

                    \u00a0data.push<\/span>(<\/span>{<\/span><\/p>\n<\/li>\n

                  4. \n

                    \u00a0 id:rs.field<\/span>(<\/span>0<\/span>)<\/span>,<\/p>\n<\/li>\n

                  5. \n

                    \u00a0\u00a0 style:rs.field<\/span>(<\/span>16<\/span>)<\/span>?\u2018font-weight:bold;\u2019<\/span>:\u201d<\/span>,<\/p>\n<\/li>\n

                  6. \n

                    \u00a0\u00a0 data:[<\/span>rs.field<\/span>(<\/span>1<\/span>)<\/span>,rs.field<\/span>(<\/span>2<\/span>)<\/span>,rs.field<\/span>(<\/span>3<\/span>)<\/span>,rs.field<\/span>(<\/span>4<\/span>)<\/span>,rs.field<\/span>(<\/span>5
                    \n<\/span>)<\/span>,rs.field<\/span>(<\/span>6<\/span>)<\/span>,rs.field<\/span>(<\/span>7<\/span>)<\/span>,rs.field<\/span>(<\/span>8<\/span>)<\/span>,rs.field<\/span>(<\/span>9<\/span>)<\/span>,rs.field<\/span>(<\/span>10
                    \n<\/span>)<\/span>,rs.field<\/span>(<\/span>11<\/span>)<\/span>,rs.field<\/span>(<\/span>12<\/span>)<\/span>,rs.field<\/span>(<\/span>13<\/span>)<\/span>,rs.field<\/span>(<\/span>14<\/span>)<\/span>,rs.field<\/span>(<\/span>15<\/span>)<\/span>]<\/span>}<\/span>)<\/span><\/li>\n

                  7. \n

                     <\/p>\n<\/li>\n<\/ol>\n

                    This point turned out to be quite time consuming in spite of all its simplicity. As it turned out, the basic version of grid can’t load styles from json data. This was healed with the help of a patch found at the support forum. But the whole affair left a bitter taste in my mouth.<\/p><\/blockquote>\n

                    When the grid is saved in the database, it would be a good thing to clear the data store.<\/p>\n

                    Code (javascript)<\/p>\n

                      \n
                    1. \n

                       <\/p>\n<\/li>\n

                    2. \n

                      function<\/strong><\/span> save_data(<\/span>)<\/span>{<\/span><\/p>\n<\/li>\n

                    3. \n

                      \u00a0<\/em>\/\/if there is Google Gears<\/em><\/span><\/p>\n<\/li>\n

                    4. \n

                      \u00a0 <\/strong>if<\/strong><\/span> (<\/span>db)<\/span><\/p>\n<\/li>\n

                    5. \n

                      \u00a0\u00a0 <\/em>\/\/clear the table we used – a disputable method, but in this case it’s effective<\/em><\/span><\/p>\n<\/li>\n

                    6. \n

                      \u00a0\u00a0 db.execute<\/span>(<\/span>\u2018drop table photodata\u2019<\/span>)<\/span><\/p>\n<\/li>\n

                    7. \n

                      \u00a0 document.forms<\/span>[<\/span>0<\/span>]<\/span>.data<\/span>.value<\/span>=grid.serializeToCSV<\/span>(<\/span>)<\/span>;<\/p>\n<\/li>\n

                    8. \n

                      \u00a0 document.forms<\/span>[<\/span>0<\/span>]<\/span>.submit<\/span>(<\/span>)<\/span>;<\/p>\n<\/li>\n

                    9. \n

                      }<\/span><\/p>\n<\/li>\n<\/ol>\n

                      You can see the result here.<\/p>\n

                      Edited lines still remain visually different when the page is reloaded, thus it’s easy to notice the changes.
                      \nFull page reloading and data store clearing take place while the page is being saved.
                      \nEverything works from the technical point of view. As the last step we can add some free useful things such as sorting and filtering. Both the possibilities are standard for grid and don’t require any voodoo programming.<\/p>\n

                      Code (javascript)

                      <\/p>\n

                        \n
                      1. \n

                         <\/p>\n<\/li>\n

                      2. \n

                        grid.setColSorting<\/span>(<\/span>“str,str,str,int,int,int,str,str,int,int,int,int,int,
                        \nstr,na”<\/span>)<\/span>;<\/li>\n

                      3. \n

                        grid.attachHeader<\/span>(<\/span>“#rspan,#select_filter,#select_filter,#rspan,
                        \n#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,
                        \n#rspan,#rspan,#rspan”<\/span>)<\/span>;<\/li>\n

                      4. \n

                         <\/p>\n<\/li>\n<\/ol>\n

                        The final result is available here.<\/p>\n

                        The Step Not Present, or What Can Be Improved<\/strong><\/p>\n

                        The client side code works pretty well. Of course, we could make local data store origination more universal, add input data validation based on the current grid structure, etc. But it can be left as it is so far.<\/p>\n

                        The server code is terribly simple. Choosing a single-piece CSV as the type of data transfer and saving may result in the ultimate simplification of operations, but the price for that is loss of flexibility. In theory it is possible to replace the current saving scheme with something more elegant, allowing to use simultaneous access to data and smarter synchronization (since Gears was meant to be used in such scripts). But this will result in loss of code simplicity. So, maybe next time.<\/p>\n

                        The usage of local data store significantly improved usability with a relatively small amount of code needed. Taking into account the fact that most browsers are advertised as powered with local data stores, such a solution might be implemented without any outside plugin in the offing.<\/p>\n","protected":false},"excerpt":{"rendered":"

                        Translated from original posted on www.monoxrom.net I’ve been trying to have a look at Google Gears in action, but always had some other fish to fry. You can hardly …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,1],"tags":[33,6,14],"class_list":["post-50","post","type-post","status-publish","format-standard","hentry","category-general","category-uncategorized","tag-all-posts","tag-dhtmlxgrid","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":5,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":10852,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/50\/revisions\/10852"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}