you can select a row in a table and then the row is selected but after I edit the row and save the data from it, then it returns to Index.cshtml, but the row is not anymore selected. I have this javascript:
$(document).ready(function () {
var table = $('#example');
$('#example tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
});
and this is part of view:
<table class="table table-striped table-bordered dataTable sfs-selectable sfs-col1-right-aligned" id="example">
<thead>
<tr>
<th>
@Html.RouteLink(Html.DisplayNameFor(model => firstItem.Id).ToString(), "Sort-Product", new { sortColumn = "id", sortOrder = (ViewBag.sortColumn == "id" && ViewBag.sortOrder != "desc") ? "desc" : "", searchString = ViewBag.SearchString, filter = ViewBag.Filter })
@ViewHelper.GetSortIndicator("id", ViewBag.sortColumn, ViewBag.sortOrder)
</th>
<th>
@Html.RouteLink(Html.DisplayNameFor(model => firstItem.Name).ToString(), "Sort-Product", new { sortColumn = "name", sortOrder = (ViewBag.sortColumn == "name" && ViewBag.sortOrder != "desc") ? "desc" : "", searchString = ViewBag.SearchString, filter = ViewBag.Filter })
@ViewHelper.GetSortIndicator("name", ViewBag.sortColumn, ViewBag.sortOrder)
</th>
<th>
@Html.RouteLink(Html.DisplayNameFor(model => firstItem.IsEnabled).ToString(), "Sort-Product", new { sortColumn = "enabled", sortOrder = (ViewBag.sortColumn == "enabled" && ViewBag.sortOrder != "desc") ? "desc" : "", searchString = ViewBag.SearchString, filter = ViewBag.Filter })
@ViewHelper.GetSortIndicator("enabled", ViewBag.sortColumn, ViewBag.sortOrder)
</th>
<th>
@Html.RouteLink(Html.DisplayNameFor(model => firstItem.FormName).ToString(), "Sort-Product", new { sortColumn = "formname", sortOrder = (ViewBag.sortColumn == "formname" && ViewBag.sortOrder != "desc") ? "desc" : "", searchString = ViewBag.SearchString, filter = ViewBag.Filter })
@ViewHelper.GetSortIndicator("formname", ViewBag.sortColumn, ViewBag.sortOrder)
</th>
<th>
@Html.RouteLink(Html.DisplayNameFor(model => firstItem.TemplateName).ToString(), "Sort-Product", new { sortColumn = "design", sortOrder = (ViewBag.sortColumn == "design" && ViewBag.sortOrder != "desc") ? "desc" : "", searchString = ViewBag.SearchString, filter = ViewBag.Filter })
@ViewHelper.GetSortIndicator("design", ViewBag.sortColumn, ViewBag.sortOrder)
</th>
<th>
@Html.RouteLink(Resources.Entity.Product.PublicUrl, "Sort-Product", new { sortColumn = "urlname", sortOrder = (ViewBag.sortColumn == "urlname" && ViewBag.sortOrder != "desc") ? "desc" : "", searchString = ViewBag.SearchString, filter = ViewBag.Filter })
@ViewHelper.GetSortIndicator("urlname", ViewBag.sortColumn, ViewBag.sortOrder)
</th>
<th>
@Html.DisplayNameFor(model => firstItem.SubmittedForms)
</th>
<th>
@Html.RouteLink(Html.DisplayNameFor(model => firstItem.ModificationDate).ToString(), "Sort-Product", new { sortColumn = "modified", sortOrder = (ViewBag.sortColumn == "modified" && ViewBag.sortOrder != "desc") ? "desc" : "", searchString = ViewBag.SearchString })
@ViewHelper.GetSortIndicator("modified", ViewBag.sortColumn, ViewBag.sortOrder)
</th>
<th class="hidden"></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.IsEnabled)
</td>
<td>
@{
bool viewLink = item.IsEnabled;
if (!String.IsNullOrEmpty(item.FormName)) {
var form = item.FormLibraryEntry;
if (form == null) {
viewLink = false;
@Html.DisplayFor(modelItem => item.FormName)
<em>(@Resources.Entity.Environment.Removed)</em>
}
else {
@Html.DisplayFor(modelItem => form.Name)
<a href="@Url.Action("Details", "FormLibrary", new { id = item.FormName })"><i class="fa fa-fw fa-external-link-square text-info"></i></a>
}
}
}
</td>
<td>
@{
if (!String.IsNullOrEmpty(item.TemplateName)) {
var template = item.TemplateLibraryEntry;
if (template == null) {
viewLink = false;
@Html.DisplayFor(modelItem => item.TemplateName)
<em>(@Resources.Entity.Environment.Removed)</em>
}
else {
@Html.DisplayFor(modelItem => template.Name)
<a href="@Url.Action("Details", "DesignTemplate", new { id = item.TemplateName })"><i class="fa fa-fw fa-external-link-square text-info"></i></a>
}
}
}
</td>
<td>
@if (!String.IsNullOrEmpty(item.UrlName)) {
var defaultProductUri = CustomerConfig.ToHostUri(Request.Url.Scheme, defaultHostHeader, Request.Url.Port, (isProduction ? "" : "TEST/") + item.UrlName);
if (viewLink) {
@item.UrlName
<a href="@defaultProductUri.ToString()" title="@Resources.Entity.Product.ViewProduct" target="_blank"><i class="fa fa-fw fa-external-link-square text-info"></i></a>
}
else {
@item.UrlName
}
}
</td>
<td>
@{
int cnt = item.SubmittedForms.Where(prod => prod.Order.IsProduction == isProduction).Count();
@(cnt.ToString() + " ")
if (cnt > 0) {
<a href="@Url.Action("Index", "SubmittedForms", new { filter = item.Id })">
<i class="fa fa-fw fa-external-link-square text-info"></i>
</a>
}
}
</td>
<td class="text-nowrap">
@item.ModificationDate.ToString("G")
</td>
<td class="hidden">
<span>
@if (!String.IsNullOrEmpty(item.UrlName) && !String.IsNullOrEmpty(item.FormName)) {
@Html.RouteLink(Resources.Action.Navigation.Preview, "ProductPreview", new { productUrl = item.UrlName, customerSchema = custSchema }, new { target = "_blank" })
}
else { @(Resources.Action.Navigation.Preview) }
| @Html.ActionLink(Resources.Action.Navigation.Details, "Details", new { id = item.Id })
| @Html.ActionLink(Resources.Action.Navigation.Edit, "Edit", new { id = item.Id })
</span>
</td>
</tr>
}
</tbody>
</table>
but If I debug the javascript it doesnt hit this:
$('#example tbody').on('click', 'tr', function () {
this is my Edit method;
[HttpGet]
public ActionResult Edit(int? id)
{
var page = Session["page"];
Session["page"] = page;
Session["id"] = id;
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Product product = db.Products.Find(id);
if (product == null)
{
throw new HttpException((int) HttpStatusCode.NotFound, null);
}
SetCreateEditProductLists(product, customerSchema);
EditProductModel editModel = new EditProductModel();
editModel.Product = product;
editModel.Db = db;
DeserializeAuthenticationSettings(editModel);
DeserializePaymentSettings(editModel);
DeserializeConnectors(editModel);
DeserializePrefillMappings(editModel);
ViewBag.Model = editModel;
return View(editModel);
}
Thank you
I have this:
TempData["editedId"] = id;
and in javascript this:
alert('@TempData["editedId"]');
but it returns the exact value not the id
I have in my Edit(get) now this:
Session["id"] = id;
and in my Edit.cshtml:this:
$(document).ready(function () {
var id = '@Session["id"]';
var element = $("#" + id);
alert(element);
$('#example tbody').on('click', 'tr', function () {
if ($(this).hasClass('dataTable sfs-selectable')) {
$(this).removeClass('dataTable sfs-selectable');
}
else {
element.$('tr.selected').removeClass('dataTable sfs-selectable');
$(this).addClass('dataTable sfs-selectable');
}
});
});
I get the id in this: var id = '@Session["id"]';
but how to get the selected row now?
Thank you
After you edit the page, the grid page do not have any information about, which row was selected.
One suggestion could be that inside your Edit method, set the the Id in some temp data like -
TempData["editedId"] = id;
and then in you grid view page, you can retrieve this value in your jQuery block as suggested here and here.
You can then use this value to find that particular row in the table and apply the required styling.
Hope that helps.