How to change index When row is selected In listview

i’m beginner in Asp.net. I have this listview control which is populated by MSSQL database. Now i want to change listview index when listview row is selected.
Below is coding for listview

<asp:ListView ID="ListViewTask" runat="server" OnSelectedIndexChanged="ListViewTask_SelectedIndexChanged" OnSelectedIndexChanging="ListViewTask_SelectedIndexChanging">
   <ItemTemplate>
      <div class="row">
         <div class="col-md-1">
            <asp:CheckBox ID="ChkTaskDone" runat="server" Checked='<%#Eval("is_task_done")%>' CommandName="Select" OnCheckedChanged="ChkTaskDone_OnCheckedChanged" AutoPostBack="True" />
         </div>
         <div class="col-md-7">
            <asp:Label ID="llbTaskId" runat="server" Text='<%#Eval("task_id")%>' Visible="false"></asp:Label>
            <asp:LinkButton ID="lnkbtnTaskName" Style="width: auto" runat="server" Text='<%#Eval("task_name")%>' CommandName="Select"></asp:LinkButton>
         </div>
         <div class="col-md-2">
            <asp:Label class="badge badge-pill badge-dark float-right" ID="llbProjectName" runat="server" Text='<%#Eval("project_name")%>'></asp:Label>
         </div>
         <div class="col-md-2">
            <asp:LinkButton Class="float-right" ID="lnkbtnDueDate" runat="server" Text='<%#Eval("due_date","{0:d MMM}")%>' align="left"></asp:LinkButton>
         </div>
      </div>
      <hr />
   </ItemTemplate>
</asp:ListView>

i can change listview index by simply add select command on asp:Button but i want to do it on row

gave up as I looked at posts and searched google for examples and none fit my situation
Can you please help me identify where am I going wrong and what should be done to achieve the goal.

Any help is highly appreciated.

Thanks

UPDATE :

Albert D. Kallal‘s Answer work well for me. This is my code below in page_load event in C# language

protected void Page_Load(object sender, EventArgs e)
{
    if (Request["__EVENTTARGET"] == "RowJump")
    {

        string ix = Request["__EVENTARGUMENT"];


        ListViewItem item = ListViewTask.Items[Convert.ToInt32(ix)];
        Label getTaskId = (Label)item.FindControl("llbTaskId");

        //then use
        string TaskId = getTaskId.Text; // you get the value or the text of the Label 
        // Do something with TaskId
    }
}

In my case i retrieve selectedIndex of Row and then get the value of TaskId lable which is ‘visible = false’ in html and then do some Sql Operation from that task Id

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Ok, so if you have a link button, or even a check box on that row, then as noted I “assume” that you have no problem.

But we want a simple click anywhere on the row to select (do something based on that row click).

The simple approach is to add a click event to the row and do this with some JavaScript.
(unfortanlty you don’t have a asp.net row click event – you just do not). So its either you click on your check box, or the linkbutton – but no row click without a button.

However, the markup is very minimal code, and this approach means/allows you to click anywhere on the row.

So, on your table row, you can do this:

<tr ondblclick="MyRowClick('<%# Container.DisplayIndex %>')" >

So, I have (table row) in my list view.
However, I don’t see a table row in your listview?
(looks like you removed that from the template. I suggest you put it back in)
You have a div of class row, but that’s just a div? Calling some “div” is NOT a table row in web land.

You MIGHT be able to use the above click event if you wrap your existing markup by placing the WHOLE part you have now with

<tr>

 all your stuff here
</tr>

You should stick to the standard layout that the listview generates. For sure, it tends to nest TWO tables – and you can remove that extra stuff.

But, you do want to keep in your markup the concept of a table, and at least a concept of a row defined. You have neither!!!

As you note: you have a link button, and that will fire and you can get/grab the current row. And same goes for your check box code.

But, for a click “anywhere” on the row? Well you need the concept of a “tr” (table row) in your layout to at least exist.

You need/want/should have a row type and row define here.

<tr ondblclick="MyRowClick('<%# Container.DisplayIndex %>')" class="myRowHov" >

   <td>
        <asp:CheckBox ID="ChkTaskDone" runat="server" etc.
   </td>

   <td>
       <asp:Label ID="llbTaskId" runat="server" 
             Text='<%#Eval("task_id")%>' Visible="false"></asp:Label>
   </td>
</tr>  <--- end of table row

And so on. So, is your row, and then
So, each thing should be a actual “td” (table data). To be fair “td” means a standard table “cell”.

And that Visible=”false” is also not good. if you need that hidden you want Style=”display:none” since with visible = false, the control is NOT rendered and sent to the browser, and your code thus can’t use that column anymore.

Anyway, you might just be able to wrap your existing “divs” with a single .. your stuff . You have to try that – I dont’ know if it will work. If not, then you need to add the for each column around the that you have.

So, lets assume the tr idea does work. (so very little change to what you have).

Now the ondblclick() event is CLIENT side (browser code). I used double click, since you have a check box, and a button already (a single click will interfere with those actions and controls you have already). And we adding the even to the FULL row. You could I suppose add a click() event to each EXCEPT for the ones you have with check box or link button.

It is a simple matter to then put this code (say right after the listview end tab) in your markup as this:

<script>
  function MyRowClick(qID) {

        // passed value is row clicked on index - starts at 0
        __doPostBack('RowJump', qID);
    }
</script>

So, we do a post back in above. Really no different then what a asp.net button click would do. However, we pass in the post back a “name” called RowJump. You can make up any name for that, and then we pass the index of the grid click (qID)>

So, in the forms code behind, we are now back to vb.net or C#.

So typical on-load event code will look like:

If Request("__EVENTTARGET") = "RowJump" Then

    Dim ix As Long = Request("__EVENTARGUMENT")
    Dim MyListViewData As ListViewDataItem = ListView1.Items(ix)
    Dim MyLable As Label = MyListViewData.FindControl("QuoteNumLabel")
    Debug.Print("Value of row QuoteNumber = " & MyLable.Text)

End If

I’m still a bit weak in C#, but above will become
{
long ix = Request("__EVENTARGUMENT");
ListViewDataItem MyListViewData = ListView1.Items(ix);
Label MyLable = MyListViewData.FindControl("QuoteNumLabel");
Debug.Print("Value of row QuoteNumber = " + MyLable.Text);
}

So, for a full row click? There is no built in “event” for a row click. The row index event will trigger for say your linkbutton, but for a general “click” anywhere to select the row, get the index and then do whatever? Well its either a button, or you use a wee bit of JavaScript as per above.

The above works quite well. And is only 2-3 lines of JavaScript that you have to add.

I do however suggest when you drop a list view onto a form, you build the grid using the wizard (choose data source for listview). Then you can remove the datasource that is placed in the form (if you using code to build the datatable/dataset).
You then start to edit and play with the layout. As noted, you want at least something that represents a table and then at least a “tr”.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x