944,202 Members | Top Members by Rank

Ad:
  • C# Discussion Thread
  • Unsolved
  • Views: 28966
  • C# RSS
You are currently viewing page 1 of this multi-page discussion thread
Jul 20th, 2006
0

How to update a Datagrid cell in Javascript

Expand Post »
Hi,

I am not new to ASP and c# but fairly new to Javascript. I have a Datagrid with a button column and a text column. The button is linked to a Javascript which when pressed prompts the user to enter a number. Upon entering a number and clicking 'OK', I want the number to be added to whatever number is present in the Text column.

I have been able to get the number correctly. The part that I have not been able to figure out is 'How to access the current row/column from the Javascript so I can take the number and add it to the TextBox cell'. I tried passing the current cell object to the Javascript but it gives me an error.

Here's my C# code
private void dgTest_ItemCreated(object sender, DataGridItemEventArgs e)
{
            if(e.Item.ItemIndex >= 0)    
            {
                Button btn = (Button)e.Item.Cells[3].Controls[1];                
//Does not work; Browser does not like the parameter
                btn.Attributes.Add("onclick","disp_prompt(<%= e.Item.Cells[4] %>)"); 
           }
}
Here's my Javascript
C# Syntax (Toggle Plain Text)
  1. function disp_prompt(tablecell)
  2. {
  3. var number=prompt("Enter number","")
  4. if (number!=null && number!="")
  5. {
  6. tablecell.value += number;
  7. }
  8. }

I have scoured several Javascript websites but couldn't find much help with Datagrids. Any help would be greatly appreciated.

Thanks
ktum
Last edited by ktum; Jul 20th, 2006 at 10:59 am.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ktum is offline Offline
5 posts
since Jul 2006
Jul 21st, 2006
0

Re: How to update a Datagrid cell in Javascript

A datagrid id rendered to the client as an HTML table
<table><tr><td>... blah de blah

So thats what javascript is seeing, javascript will never know diddley squat about what the hell a datagrid is

Also you are using the ItemCreated event this happens before the ItemDataBound event so at that point e.Item.Cells[4] is empty anyway and is a reference to the cell value not the cell itself.

I would use the 'this' property as the argument to your client function disp_prompt();

C# Syntax (Toggle Plain Text)
  1. btn.Attributes.Add("onclick","disp_prompt(this)");

That will pass a reference to the button itself, or use the W3C DOM 'event' in your javascript which will be a reference to the element that raised the last event (eg the clicked button in the DOM), you can use knowledge of the DOM to find cell number four because cell number four and the clicked button share the same parent element (a table row)

so in your javascript function you can have something like:

C# Syntax (Toggle Plain Text)
  1. function disp_prompt(button)
  2. {
  3. var number=prompt("Enter number","")
  4. if (number!=null && number!="")
  5. {
  6. var row = button.parentElement;
  7. var cell = row.cells[3];
  8. var num = cell.innerHTML;
  9. cell.innerHTML = (num+number);
  10. }
  11. }

You might need to check my javascript I havn't time to check the exact syntax but it shouldn;t be too disimilar to what I have posted.
Reputation Points: 262
Solved Threads: 68
Veteran Poster
hollystyles is offline Offline
1,181 posts
since Feb 2005
Jul 24th, 2006
0

Re: How to update a Datagrid cell in Javascript

Thanks for your response. I tried several variations of the code that you suggested but none of them gave me access to the 'current row'. I even tried

var row = button.parentElement;
row.rowIndex;

Also, it just doesn't seem to like row.cells[4] at all. Is there another way to get the row and column index of an item?

Any help would be very much appreciated. I've spent way too much time on this.

Thanks!
Last edited by ktum; Jul 24th, 2006 at 2:10 pm.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ktum is offline Offline
5 posts
since Jul 2006
Jul 24th, 2006
0

Re: How to update a Datagrid cell in Javascript

Hi,

Even if you manage to alter the data w/ JScript on the client side grid you see in the browser, this will not affect the datagrid object and the bound dataset on the server. If you don't like the postbacks for each button click and want to use AJAX style code you should try ATLAS.Net from MS but it is still tricky to alter databound grid style webform controls this way.

Loren Soth
Reputation Points: 28
Solved Threads: 4
Posting Whiz in Training
Lord Soth is offline Offline
233 posts
since Mar 2006
Jul 25th, 2006
0

Re: How to update a Datagrid cell in Javascript

Quote ...
Thanks for your response. I tried several variations of the code that you suggested but none of them gave me access to the 'current row'. I even tried

Ah yes actually the parentElement of the button is the cell, so you may need to do:

C# Syntax (Toggle Plain Text)
  1. var row = button.parentElement.parentElement;
Last edited by hollystyles; Jul 25th, 2006 at 5:10 am.
Reputation Points: 262
Solved Threads: 68
Veteran Poster
hollystyles is offline Offline
1,181 posts
since Feb 2005
Jul 25th, 2006
0

Re: How to update a Datagrid cell in Javascript

Thank you Lord Soth and hollystyles. I was able to update the cell but the change lasted only for a second before it disappeared. May be changing a Datagrid control after it is bound to a DataSet is not so straightforward as it seems.

I am curious to know why. After the ASP is sent over to the client's browser isn't it mere HTML? I should be able to change it, right?

Thanks for your help.
Last edited by ktum; Jul 25th, 2006 at 9:55 am.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ktum is offline Offline
5 posts
since Jul 2006
Jul 25th, 2006
0

Re: How to update a Datagrid cell in Javascript

The button is causing a post back, so the page is rebuilt and the datagrid refilled. have you got paging set-up on the datagrid or something?

What are you trying to achieve here? I think you maybe going about this the wrong way.

Once the number is added to the existing number I presume you are going to want to save that back to the database ?

If so you are up the wrong tree I feel.

consider this:

user clicks button,
types a number at the prompt
javascript to put the number in a hidden text control not the datagrid cell
postback occurs
server side identify which button clicked
add the number for that row index + the number in the hidden control
bind the datagrid
back to the client
Reputation Points: 262
Solved Threads: 68
Veteran Poster
hollystyles is offline Offline
1,181 posts
since Feb 2005
Jul 26th, 2006
0

Re: How to update a Datagrid cell in Javascript

I changed my DataGrid design completely. Instead of prompting the user for a number, I have another column in the Datagrid where the user could enter the number and I have a '+' button when clicked will add this number to the Total. This application is for field Biologists to enter species and count.

My datagrid has 4 columns.
Column 1 - Template Dropdown column which is databound.
Column 2 - total
Column 3 - count
Column 4 - + button

My datagrid works now except that as hollystyles mentioned, when the button is clicked, a PostBack happens and all the Dropdown columns get refreshed and it takes a few seconds for the page to reload before the user can proceed.

How can I overcome this problem?

Thanks again for all the help.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ktum is offline Offline
5 posts
since Jul 2006
Jul 26th, 2006
0

Re: How to update a Datagrid cell in Javascript

Did you start this project with a thorough analysis of the problem that produced a apecification ?

You have coded yourself into a bit of a cul-de-sac my friend. I presume the drop down lists have a list of species ? how long is the list and how many drop downs in the datagrid ? and of course the web is a stateless world so you have to re-build them every time, and of course they then lose there selected value. I feel you need to read up on the ASP page life cycle it's fairly obvious this is a gap in your knowledge.

This is a typical "schlemiel the painter" scenario Joel Spolsky is right, these .NET abstractions are great but they don't scale if you don't know what you are doing.

Have ONE drop down list on the page, and ONE textbox and ONE button, below all of those ONE datagrid (no buttons and shit in the datagrid just the results)

Use Case - species count form
(you heard of these? if not read up on software analysis and design)

User counts some species, selects that species from drop down box and types the amount they counted into the text box, and clicks the submit button. The form is POSTED to the server where the value in the textbox is converted to an integer and added to any existing count in the database, the data grid is re-bound and the page sent back to the user ready for the next species count.
Last edited by hollystyles; Jul 26th, 2006 at 10:49 am.
Reputation Points: 262
Solved Threads: 68
Veteran Poster
hollystyles is offline Offline
1,181 posts
since Feb 2005
Jul 26th, 2006
0

Re: How to update a Datagrid cell in Javascript

Thanks for your indiscreet comments and your relentless display of your superior brain. You certainly need a How-not-to-be-a-jerk101 class. I'll take my posting elsewhere.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ktum is offline Offline
5 posts
since Jul 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC