Fully editable datagrid

[Peter Walburn]

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

 

[Saravana]

Check out this article,
http://www.microsoft.com/india/msdn/articles/SolutionstoTopFourQuestions.asp
x

 

[Peter Walburn]

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

 

[Saravana]

You can access the footer item in datagrid using its controls collection. to
know more about controls collection of datagrid, refer this article.
http://www.extremeexperts.com/Net/CodeSnippets/ToolTipForDataGridHeader.aspx

I dont have sample application available as download. If you want i will
send it to you.

 

[Peter Walburn]

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

 

[Lewis Wang [MSFT]]

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 <[email protected]>
| References: <[email protected]>
| 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: <[email protected]>
| 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!
|
|

 

[Peter Walburn]

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

 

[Lewis Wang [MSFT]]

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 <[email protected]>
| References: <[email protected]>
| 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: <#[email protected]>
| 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!
|

 

[Peter Walburn]

Thanks for that.

I will try it out later.

Peter Walburn

 

[sk]

hi
chk this link . u might get some useful code.

http://www.dotnetjohn.com/articles/articleid83.aspx