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

select, insert, update, delete on datatable.

Expand Messages
  • John Haig
    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
    Message 1 of 4 , Jun 1, 2007
    • 0 Attachment
      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
    • ilyas_khan_oib
      Hi, I am new to the data table. Can you post your sample source code please? Cheers ... complete ... selecting ... results! ... to ... too.
      Message 2 of 4 , Jun 1, 2007
      • 0 Attachment
        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
        >
      • 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 3 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 4 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.