Fully editable datagrid

Discussion in 'ASP .Net Datagrid Control' started by Peter Walburn, Sep 3, 2003.

  1. Hi,

    I need to have a fully editable datagrid control for my webforms.

    I have managed to get the control so that I have one edit button at
    the bottom of the form and pressing this button allows editing of any
    existing row in the grid. I then press an Update button and write all
    of the changes back to the database.

    However, I would like there to be a blank row at the end of the grid,
    where I can add a new record. Also, I would like it if, when I start
    typing in the empty row, a new empty row is appended to the bottom of
    the grid. In this way I can keep on adding records to the grid and
    then just press Update when I have finished and this would Update any
    existing row and Insert any new rows.

    Any help is appreciated.

    Pete
     
    Peter Walburn, Sep 3, 2003
    #1
    1. Advertisements

  2. Peter Walburn

    Saravana Guest

    Saravana, Sep 3, 2003
    #2
    1. Advertisements

  3. Hi

    Thanks for that.

    I have already looked at this solution, and I'm afraid I must be missing
    something, because I cannot get it to work how I need it.

    I have got the application to have the grid editable, but there is not a
    blank row at the bottom. I can manage to get a blank row, by shwoing the
    footer of the grid, but then in my code I need to get access to the
    controls of the new record. I am having great trouble doing this.

    Is there a download of your application that has this grid on it? I
    like the idea of having a column on each row to specify if the row is
    dirty, but I don't know hoe to add a hidden column (other than one that
    is in the database).

    Peter Walburn
     
    Peter Walburn, Sep 3, 2003
    #3
  4. Peter Walburn

    Saravana Guest

    Saravana, Sep 3, 2003
    #4
  5. Thanks,

    Using the code shown in that URL, I have managed to get the grid to do
    what I need. I simply loop through each item in the grid, and if it's
    the Footer I get the values in each of the textboxes in the footer.
    Then if the first one is not empty then I add a new record.

    Peter Walburn
     
    Peter Walburn, Sep 4, 2003
    #5
  6. Hi Peter,

    Do you want to add this new editable row after the page is posted back or
    do you want to add this new editable row using client side script?

    You can catch the event if something was entered into a textbox using a
    client side script. It would look something like this:

    In code behind:

    TextBox1.Attributes .Add ("onkeydown","keydown()");
    Or in *aspx:
    <asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 32px; POSITION:
    absolute; TOP: 80px" runat="server"onkeydown="keydown()"></asp:TextBox>

    The following code snippet is a client script for catching the event and
    posting back the web page.

    <script language="javascript">
    function keydown()
    {
    . . .
    document.Form1.hide.value ="newrow";
    alert(document.Form1.hide.value);
    document.Form1.submit ();
    . . .
    }
    </script>

    We may add a hidden html control to store a value in *.aspx. Then, we can
    check this value in the code behind to know if we should add a new row.

    In *.aspx:
    <INPUT type="hidden" id="hide" name="hide">

    In the code behind:

    if(Request.Form["hide"]!=null && Request.Form["hide"].ToString()=="newrow")
    {
    //add a new row
    }

    You may modify these code snippets to meet your requirements.

    Please let me know if you need more information.

    Best regards,
    Lewis
    This posting is provided "AS IS" with no warranties, and confers no rights.

    --------------------
    | From: Peter Walburn <>
    | References: <>
    | X-Newsreader: AspNNTP 1.50 (ActionJackson.com)
    | Subject: Re: Fully editable datagrid
    | Mime-Version: 1.0
    | Content-Type: multipart/mixed; boundary="----=_NextPart_000_26574866"
    | Message-ID: <>
    | Newsgroups: microsoft.public.dotnet.framework.aspnet.datagridcontrol
    | Date: Thu, 04 Sep 2003 02:03:08 -0700
    | NNTP-Posting-Host: actionjackson133.dsl.frii.net 216.17.147.133
    | Lines: 1
    | Path: cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!tk2msftngp13.phx.gbl
    | Xref: cpmsftngxa06.phx.gbl
    microsoft.public.dotnet.framework.aspnet.datagridcontrol:6496
    | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.datagridcontrol
    |
    | Hi
    |
    | I have managed to get my grid to be editable, with the ability to add a
    | new record, and just have Edit, Save and Cancel buttons at the bottom of
    | the grid.
    |
    | However, I would like it if when I started typing in any textbox in the
    | last row (which is the grid footer) a new row was added to the grid. I
    | need to somehow catch the fact that there has been something entered
    | into a textbox on the last row and then to add ew new row to the grid.
    |
    | Any ideas on how to do this?
    |
    |
    | Peter Walburn
    |
    |
    | Don't just participate in USENET...get rewarded for it!
    |
    |
     
    Lewis Wang [MSFT], Sep 5, 2003
    #6
  7. Hi

    Thanks. I am sure that this will work. I have added the javascript
    fnction KeyDown to the HTML and this does get called whn I type in the
    textbox of the new row.

    Where do I put the code that will actually add a new row to the grid. I
    must admit to being new to developing web applications and am still
    learning a lot. If you have any sample applcation that has a grid that
    adds a new row at the end whenever the user enters something in the last
    row, that would be fantastic.

    I think that is needs to be done using client side script, as I intend
    to have Edit, Save and Cancel buttons and the use could press Cancel
    after having entered lots of row, and this would put the grid back to
    how it was before Edit was pressed.

    Peter Walburn
     
    Peter Walburn, Sep 8, 2003
    #7
  8. Hi Peter,

    I wrote a code snippet to add a new row using client side script, you can
    test it and modify it to meet your requirements.

    <script language="javascript">
    var rowNum = 3;
    function addrow()
    {
    rowNum = rowNum + 1;
    tabBody = document.getElementById('Table1').firstChild;
    lastrow=tabBody.lastChild;
    newRow = tabBody.appendChild(tabBody.firstChild.cloneNode(true));
    for(i=0;i<newRow.cells.length;i++)
    {
    lastrow.cells.innerHTML= "<INPUT type=text name=TB"+(rowNum-1)+i+">";
    newRow.cells.innerHTML = "<INPUT type=text name=TB"+rowNum+i+"
    onkeydown =addrow()>";
    }
    }
    </script>

    . .
    <form id="Form1" method="post" runat="server">
    <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute;
    TOP: 72px" cellSpacing="1"
    cellPadding="1" width="300" border="1">
    <TR>
    <TD>2</TD>
    <TD>2</TD>
    <TD>3</TD>
    </TR>
    <TR>
    <TD style="HEIGHT: 2px">1</TD>
    <TD style="HEIGHT: 2px">1</TD>
    <TD style="HEIGHT: 2px">1</TD>
    </TR>
    <TR>
    <TD>1</TD>
    <TD>1</TD>
    <TD>1</TD>
    </TR>
    </TABLE>
    <INPUT type="button" value="Button" onclick="addrow();">
    . .
    </form>

    When we post back the web form, we can get the values of the test boxes in
    the dynamically added rows by "Request.Form["TextBoxName"].ToString();" in
    the code behind.

    Hope this helps.

    Best regards,
    Lewis
    This posting is provided "AS IS" with no warranties, and confers no rights.

    --------------------
    | From: Peter Walburn <>
    | References: <>
    | X-Newsreader: AspNNTP 1.50 (ActionJackson.com)
    | Subject: Re: Fully editable datagrid
    | Mime-Version: 1.0
    | Content-Type: text/plain; charset="us-ascii"
    | Content-Transfer-Encoding: 7bit
    | Message-ID: <#>
    | Newsgroups: microsoft.public.dotnet.framework.aspnet.datagridcontrol
    | Date: Mon, 08 Sep 2003 00:42:56 -0700
    | NNTP-Posting-Host: actionjackson133.dsl.frii.net 216.17.147.133
    | Lines: 1
    | Path: cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!TK2MSFTNGP11.phx.gbl
    | Xref: cpmsftngxa06.phx.gbl
    microsoft.public.dotnet.framework.aspnet.datagridcontrol:6546
    | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.datagridcontrol
    |
    | Hi
    |
    | Thanks. I am sure that this will work. I have added the javascript
    | fnction KeyDown to the HTML and this does get called whn I type in the
    | textbox of the new row.
    |
    | Where do I put the code that will actually add a new row to the grid. I
    | must admit to being new to developing web applications and am still
    | learning a lot. If you have any sample applcation that has a grid that
    | adds a new row at the end whenever the user enters something in the last
    | row, that would be fantastic.
    |
    | I think that is needs to be done using client side script, as I intend
    | to have Edit, Save and Cancel buttons and the use could press Cancel
    | after having entered lots of row, and this would put the grid back to
    | how it was before Edit was pressed.
    |
    | Peter Walburn
    |
    |
    | Don't just participate in USENET...get rewarded for it!
    |
     
    Lewis Wang [MSFT], Sep 9, 2003
    #8
  9. Thanks for that.

    I will try it out later.

    Peter Walburn
     
    Peter Walburn, Sep 12, 2003
    #9
  10. Peter Walburn

    sk Guest

    sk, Dec 12, 2003
    #10
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.