CODEWITHSUNDEEP
jqueryasp.net-mvcmvccontribmvccontrib-grid
Anushank Anand
Anushank Anand

Reputation: 1

Highlight Selected row in MvcContrib Grid using JQuery

I am new to MVC and jQuery. I have a MvcContrib Grid. I have a select link that selects the row to bring data so I already have a function on that click. Can I add a selected row highlight to the same function. Here's a snippet of how my code looks like.

@Html.Grid(Model).Columns(column =>
{
  column.Custom(@<a href='#@item.ID' onclick='getContactDetails(@item.ID); 
  return false;'>Select</a>);
  column.For(x => Html.ActionLink("Edit", "Edit", "Contact", new { id = x.ID, 
  socialcommunityid = x.SocialCommunityID },new { @class = "openDialog", data_dialog_id 
  = "editContactDialog", data_dialog_title = "Contact Details" }) 
  ).Named("").Sortable(false);
})


//This is the function that is already present
function getContactDetails(communityContactID)
{
  //Some code to fetch data
}

Can someone help me to highlight the selected row?

Upvotes: 0

Views: 1868

Answers (1)

ShankarSangoli
ShankarSangoli

Reputation: 69905

You can create a new css class with required styles in it. Add this class to the currnet row inside click handler. Pass another parameter this to getContactDetails which will help us to get the corresponding row. Try this.

Css

.selected{
    background: "someColor";
}

Js

function getContactDetails(communityContactID, obj)
{
    //This will remove selected class from previous selection
    $(this).closest('table').find('tr').removeClass('selected');

    //This will add the selected class to current row
    $(this).closest('tr').addClass('selected');

    //Some code to fetch data
}

Upvotes: 1

Related Questions