?
Solved

Logic needed for Javascript funtion in ASP.NET

Posted on 2013-01-15
10
Medium Priority
?
276 Views
Last Modified: 2013-01-16
Hello Experts,

I have a Gridview on a ASPX page, and textboxes(default readonly & disabled) whose values are populated on any cell click using  Jquery style Gridview.click event.My first column is a "Edit" on gridview row databound I'm showing this "Edit" linkbutton if my condition matches.The  linkbutton onClientClick I'm calling a JS function(change() function) to enable those texboxes and populate the data from Gridview.So far everything works as expected.

When I click "Edit" button, I'm calling a JS function to enable controls and also setting a Hiddenfield value.The reason for this is ,if it's in edit mode I shouldn't populate other row data on any gridview cell click.Below is the code:
 $(document).ready(function () {
 $("#<%=gvResults.ClientID%> tr:has(td)").click(function (e) {
 var selectedRow = $(this)
if ($("input[id$=hdnEdit]").val() != "CHANGE") [b]//This is set from JS function change()[/b]
{                      
$("input[id$=txtType]").val(selectedRow.children(0)[1].innerText)
$("input[id$=txtEff").val(selectedRow.children(0)[2].innerText)

Open in new window


The problem I'm having is when I click any cell for instance row#4 not "EDIT"button, then click "Edit" on row#2 for the above function I can view row#4 data,since I already set the hiddenvalue to "CHANGE". Where the hiddenfield only gets reset on cancel button.When I click "Edit" without clicking any cell other than current row, it works perfect.
Sample Gridview:

EDIT      ID      DATETIME
-----        ---     -------------------
EDIT       1        01/01/2013
EDIT       2       02/01/2012
               3        01/01/2012
EDIT        4       01/05/2012


If you notice above, row#3 doesn't have cell[0] I'm making linkbutton invisible on gridview row databound, but still I can view(NOT EDITABLE) on any cell click for row#3.For instance if I click row#2 cell[2] , the textboxes populated with ID#4 and later if I click "EDIT" on row#2, the data is of row#4 not row#2,since I already set the value of hidden field and I cannot get the selected row values in textboxe's.

My logic needs to be fixed,please help.
0
Comment
Question by:ASPDEV
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 41

Expert Comment

by:guru_sami
ID: 38779686
Just trying to get the picture here... Why do you need the Hidden field with CHANGE value?
When you click the Edit link, won't you already know which row you want to change?
0
 

Author Comment

by:ASPDEV
ID: 38779738
The reason for setting hidden field is once I click "Edit", the current row data populated in textboxe's cannot be changed i.e no need to populate new data on any gridview cell click when it's on Edit mode.

Yes, I know the current data when I was checking condition it fails.I hope I was clear, please see the issue I'm having now.

EDIT      ID      DATETIME
-----        ---     -------------------
EDIT       1        01/01/2013
EDIT       2       02/01/2012
               3        01/01/2012
EDIT        4       01/05/2012


"For instance if I click row#4 cell[2] , the textboxes populated with ID#4 and later if I click "EDIT" on row#2, the data is of row#4 not row#2,since I already set the value of hidden field and I cannot get the selected row values in textboxe's."
0
 
LVL 41

Accepted Solution

by:
guru_sami earned 1500 total points
ID: 38779794
Try setting the hiddenfield to a unique rowid value instead of just generic "CHANGE".

So say when you click a cell in row4 set the hiddenvalue to "4", now in the edit check it against that value. So if you click Edit in row4 see if it 4, if it is 4 then do reload data as it is already in edit mode.

Now say you click Edit in row2 with row4 selected before. So check if the hiddenvalue is 2 (it won;t be as you have set it to 4 when you clicked the cell in 4) if not get the correct values for 2 and populate the textboxes. You should also reset the hiddenfield to 2.

Hope that is making sense..
0
Setting up LaraDock for Laravel

Learn how to set up LaraDock in a Laravel project - LaraDock gives us an easy way to run a Laravel application using Docker in a single command.

 

Author Comment

by:ASPDEV
ID: 38779863
guru_sami,

Your logic make sense though, but when I click "Edit", it first fires the OnCLientClick Event which enables textboxe's and then GridiviewClick.If it's vice-versa, then your logic is good.
0
 
LVL 41

Expert Comment

by:guru_sami
ID: 38779889
Can you try to pass the rowid to the Onclientclick  function and do something there?
0
 

Author Comment

by:ASPDEV
ID: 38780553
guru_sami,

I tried what you said, but I think your missing a point here, I get the values whenever I click any cell on gridview.But problem is when I click any cell, it's values are populated and if I click just "Edit" button of above or below rows the value's are not populated.The reason is because of the hidden value being set from JS function, which is being cheked before populating textboxes.
This condition
if ($("input[id$=hdnEdit]").val() != "CHANGE")

Open in new window

I want to pass by this condition and populate the row data of selected row.
0
 
LVL 41

Expert Comment

by:guru_sami
ID: 38780586
So is anything being done on ServerSide when you click the Edit or all the stuff is done clientside?

Will it be possible to create a sample page with grid and your code that I can use to test it out by simply switching the data source on my machine?
0
 

Author Comment

by:ASPDEV
ID: 38780620
All the things are done at ClientSide,unfortunately I cannot produce code.The sample grid I did  is actually resembles my scenario.
0
 
LVL 41

Expert Comment

by:guru_sami
ID: 38780691
I don't have any other ideas for now. As I said if I can see sample code, it would give some more ideas. It doesn't have to be any complex of your code, just a dummy page with a grid and your javascript logic.

e.g of some dummy code below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
            SelectCommand="SELECT [ProductID], [ProductName], [CategoryName] FROM [Alphabetical list of products]"></asp:SqlDataSource>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
            AutoGenerateColumns="False" DataKeyNames="ProductID" 
            DataSourceID="SqlDataSource1" EnableModelValidation="True" ShowFooter="True">
            <Columns>
            <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" OnClientClick='<%# Eval("ProductID", "return edit(\"EDIT\",{0});") %>' runat="server">Edit</asp:LinkButton>
            </ItemTemplate>
            </asp:TemplateField>
                <asp:BoundField DataField="ProductID" HeaderText="ProductID" 
                    InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />
                <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
                    SortExpression="ProductName" />
                <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" 
                    SortExpression="CategoryName" />
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:ASPDEV
ID: 38784867
Thanks guru!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question