Loading ...
Sorry, an error occurred while loading the content.

Re: select, insert, update, delete on datatable.

Expand Messages
  • John Haig
    Sure, here s my html. You should be able to find the yui stuff and plop it on your server. The data Im showing coming from just a plain text file, but in my
    Message 1 of 4 , Jun 1, 2007
    • 0 Attachment
      Sure,

      here's my html. You should be able to find the yui stuff and plop it
      on your server. The data Im' showing coming from just a plain text
      file, but in my situation, I'm using hibernate and json classes to
      generate that same string from a database. One thing I seem to have
      learned is make sure that string is all you send. No whitespace, no
      headers, nada.

      But back to my thread, how would I alter this code to allow for adding
      and deleting rows from this table. Then extra points if you can help
      me send the changed data in json format back up to the server.

      Thanks.

      <html>
      <head>
      <title>Editor Grid Example</title>
      <meta http-equiv="Content-Type" content="text/html;
      charset=iso-8859-1" />
      <!--- YUI JAvA Scripts --->
      <script type="text/javascript" src="/javascript/yui/yahoo.js"></script>
      <script type="text/javascript" src="/javascript/yui/event.js" ></script>
      <script type="text/javascript" src="/javascript/yui/dom.js" ></script>
      <script type="text/javascript"
      src="/javascript/yui/container_core.js"></script>

      <script type="text/javascript" src="/javascript/yui/menu.js"></script>
      <script type="text/javascript" src="/javascript/yui/logger.js"></script>
      <script type="text/javascript"
      src="/javascript/yui/datasource-beta-debug.js"></script>
      <script type="text/javascript"
      src="/javascript/yui/datatable-beta-debug.js"></script>
      <script type="text/javascript" src="/javascript/yui/data.js"></script>
      <script type="text/javascript"
      src="/javascript/yui/connection.js"></script>

      <!--- YUI STylesheEETs. --->
      <link type="text/css" rel="stylesheet" href="/stylesheets/yui/reset.css">
      <link type="text/css" rel="stylesheet" href="/stylesheets/yui/fonts.css">

      <link type="text/css" rel="stylesheet" href="/stylesheets/yui/logger.css">
      <link type="text/css" rel="stylesheet"
      href="/stylesheets/yui/datatable.css">
      <link type="text/css" rel="stylesheet"
      href="/stylesheets/yui/dpSyntaxHighlighter.css">


      <style type="text/css" xml:space="preserve"> /* custom css*/#json
      {margin:1em;}#json table {border-collapse:collapse;}#json th, #json td
      {padding:.5em;border:1px solid #000;}#json th
      {background-color:#696969;color:#fff;}/*dark gray*/#json .yui-dt-odd
      {background-color:#eee;} /*light gray*/ </style>
      </head>
      <body>

      <p>Grid Example</p>
      <div id="bd">
      <div id="json"></div>
      </div>
      <script type="text/javascript" language="JavaScript">
      var myColumnHeaders = [
      {key:"fiscalYear"},
      {key:"structure"},
      {key:"region"},
      {key:"description"},
      {key:"localStatus"},
      {key:"acctStatusCode"}];
      var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
      var myDataSource = new YAHOO.util.DataSource("./data-plain.jsp");
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
      myDataSource.responseSchema = {
      resultsList: "ResultSet.Result",
      fields: ["fiscalYear", "structure", "region", "description",
      "localStatus", "acctStatusCode"]
      };
      var myDataTable = new YAHOO.widget.DataTable("json",
      myColumnSet, myDataSource);
      </script>
      </body>
      </html>


      The data.txt file looks like this:
      {"ResultSet":{"Result":[{"localStatus":"C","description":"BALANCE","region":"1","acctStatusCode":"N","fiscalYear":"2007","structure":"xxxx"},{"localStatus":"C","description":"yyyy","region":"1","acctStatusCode":"3","fiscalYear":"2007","structure":"zzzz"},{"localStatus":"C","description":"1111","region":"1","acctStatusCode":"3","fiscalYear":"2007","structure":"222222"},{"localStatus":"C","description":"333333","region":"1","acctStatusCode":"1","fiscalYear":"2007","structure":"44444"}],"totalResultsAvailable":4}}




      --- In ydn-javascript@yahoogroups.com, "ilyas_khan_oib"
      <ilyas_khan_oib@...> wrote:
      >
      > Hi,
      > I am new to the data table. Can you post your sample source code
      > please?
      > Cheers
      >
      > --- In ydn-javascript@yahoogroups.com, "John Haig" <jhaig@> wrote:
      > >
      > >
      > > Hi,
      > >
      > > I'm toying with the YUI datatable stuff.
      > >
      > > I'm wondering if there are any code samples out there for the
      > complete
      > > suite of database interactions. I've finally succeeded with
      > selecting
      > > data from a database and getting it into json format and onto a yui
      > > datatable! Yay.
      > >
      > > Now I'm onto the others. How do you add a row to a datatable?
      > >
      > > A google search for 'YUI datatable "insert row"' returned no
      > results!
      > >
      > > How do you delete one?
      > >
      > > I'm hoping I'll be able to hack thru the 'onCellEdited' type events
      > to
      > > send some json back to my server for the updates, etc, but if anyone
      > > has a working example of this, it might could save me loads of time.
      > > I'm working in JSP, but something in another language might help
      > too.
      > >
      > > Thanks,
      > >
      > > Bagus
      > >
      >
    • Ted Husted
      The YUI context menu example demonstrates deleting * http://developer.yahoo.com/yui/examples/datatable/contextmenu.html You could do inserting the same way.
      Message 2 of 4 , Jun 1, 2007
      • 0 Attachment
        The YUI context menu example demonstrates deleting

        * http://developer.yahoo.com/yui/examples/datatable/contextmenu.html

        You could do inserting the same way. When client right-clicks and
        chooses insert, create a blank record and insert it into the table.
        Then they can edit the blank fields normally. (Assuming that your
        database will accept blank records!) The trick with inserting is that
        you have to do it twice, once for the recordset and again for the
        datatable.

        Though, the problem with doing all this editing inline is that it's
        easy to get out of synch with the database, and there's little room to
        do validation and other niceties. The inline click can be nice for
        quick edits, but for anything substantial, a full-sized form seems better.

        As an alternative, we created a "DataForm" widget that can share a
        recordset with a companion DataTable. For editing, we flip to the
        horizontal DataForm. On submit, we can send the asynch request to the
        database, and on the call back, we can switch back to the DataList. If
        the database update fails, the form is still open.

        There's an example that uses static data here

        * http://yazaar.org/examples/dataform/tutorial-tabview.html

        It also uses select and checkbox controls, as well as unobtrusive
        validation. (Dates are next!)

        Now that its feature-complete, we're now starting to use it in our
        intranet application that uses a database. The code has hooks for
        methods that we can override to do the insert, update, and deletes.

        HTH, Ted.


        --- In ydn-javascript@yahoogroups.com, "John Haig" <jhaig@...> wrote:
        >
        >
        > Sure,
        >
        > here's my html. You should be able to find the yui stuff and plop it
        > on your server. The data Im' showing coming from just a plain text
        > file, but in my situation, I'm using hibernate and json classes to
        > generate that same string from a database. One thing I seem to have
        > learned is make sure that string is all you send. No whitespace, no
        > headers, nada.
        >
        > But back to my thread, how would I alter this code to allow for adding
        > and deleting rows from this table. Then extra points if you can help
        > me send the changed data in json format back up to the server.
        >
        > Thanks.
      Your message has been successfully submitted and would be delivered to recipients shortly.