How to update a Datagrid cell in Javascript

[ktum]

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];                
[B]//Does not work; Browser does not like the parameter
                btn.Attributes.Add("onclick","disp_prompt(<%= e.Item.Cells[4] %>)"); 
[/B]           }
}

Here's my Javascript

function disp_prompt(tablecell)
{
    var number=prompt("Enter number","")
    if (number!=null && number!="")
    {
            tablecell.value += number;
    }
}

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

Thanks
ktum

[hollystyles]

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();

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:

function disp_prompt(button)
{
    var number=prompt("Enter number","")
    if (number!=null && number!="")
    {
         var row = button.parentElement;
         var cell = row.cells[3];
         var num = cell.innerHTML;
         cell.innerHTML = (num+number);
    }
}

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.

[ktum]

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!

[Lord Soth]

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

[hollystyles]

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:

var row = button.parentElement.parentElement;

[ktum]

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.

[hollystyles]

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

[ktum]

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.

[hollystyles]

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.

[ktum]

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.

[hollystyles]

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:

Here was the discreet approach, but you totally missed that so I went for the jugular. I see you didn't like that either. Oh well.

[alc6379]

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.

I'd have to weigh in on this one.

Normally, I'm the first one to call someone out for being a "jerk", but I don't see anything wrong with hollystyles's post. Did you read the information in the post, and get past the manner the post was written in? If so I have a feeling you'd be rather enlightened...

[hollystyles]

Thanx for the support Alex

Perhaps I was a little harsh, but like you point out my arguements were valid and pinpoint the areas that need attention. I just get so annoyed when my hard learned craft is devalued by victims of the Microsoft marketing machine trying to make out software is easy and anyone can do it.