0

Im trying to get a WebGrid view to work using razor, and so far i have managed to style mostly everything apart from the paging icons of the footer.

I've searched a lot of places to see how i can modify the CURRENT SELECTED PAGE (text) of the footer but to no avail.

It seems like the footer generates tags for any pages thats not currently selected with the a tags, but nothing is generated for the current page.

I am trying to make each paging button to have a border around it and this is what it currently looks like:

(i cant post images here so linking to imgur)

https://i.stack.imgur.com/lRT5G.jpg (bottom image)

I have modified all the elements apart from the current selected page - which i also want to have a border and change the colour of (so that it looks different from the rest).

Looking at the dev tools i see that the html looks like this:

(top image from the previous link)

It seems like theres an article which shows this being done using regex, but someone commented saying it should be done using webgrid itself.

The said article is on the link below:

http://weblogs.asp.net/imranbaloch/highlighting-the-current-page-of-webgrid

Is there any way to get the current page - whether using jQuery or WebGrid itself and not regex?

2 Answers 2

0

Alright so i've found a solution to my problem which I have achieved using javascript.

Not sure if this is the best solution but given that using the method as described in the asp.net blog didn't let me style the footers as easily as my current method (of defining the CSS in the webgrid constructor), this was the best approach - and I hope no one in this day and age has javascripts turned off which would prevent this from running.

So basically what I did was

var gridFooterHTML = $("td")[0].innerHTML;
var gridFooterText = $("td")[0].innerText;

var gridArrayText = gridFooterText.split(" ");

for (var i = 0; i < gridArrayText.length; i++) {

    var checkPosition = gridFooterHTML.indexOf(gridArrayText[i] + " ");

    if (checkPosition != -1) {
        var x = gridFooterHTML.replace(gridArrayText[i], "<a id=\"currentPage\">" + gridArrayText[i] + "</a>");
        $("td")[0].innerHTML = x;
    }

}

I don't have any other tables for my project so i'm just accessing it using the $("td") tags.

I first get the innertext and split them when theres a blank space.

For each of the elements from the innertext, I check to see where the positioning of it is with a blank space character added to it from the innerHTML.

If it returns a value other than -1, i've found the position that I need, so I replace the HTML text (which is currently just a number) to have an id.

Now that this number has an ID, I can target it using CSS and apply the same formatting as the other page links have.

Hope this helps others who may have used webgrids.

0

I think you can also look in to this http://forums.asp.net/t/1777459.aspx?How+to+highlight+the+current+page+number+in+MVC+WebGrid+just+like+the+number+in+this+forum+ link too for this purpose

<style>
.selected
{
    background: none repeat scroll 0 0 #267CB2;
    color: #FFFFFF;
    margin: 5px;
}
</style>
@functions{
public class Employee
{
    public Employee()
    {
        ContactNumbers = new List<string>();
    }
    public string Name { get; set; }
    public Address Address { get; set; }
    public List<string> ContactNumbers { get; set; }
    public Address NotNullableAddress
    {
        get
        {
            return Address ?? new Address();
        }
    }
    public string Contacts
    {
        get
        {
            return string.Join("; ", ContactNumbers);
        }
    }
}
public class Address
{
    public string City { get; set; }
}
}
@{
var list = new List<Employee>();
for (int i = 0; i < 20; i++)
{
    list.Add(new Employee
            {
                Name = "A" + i,
                Address = new Address { City = "AA" + i },
                ContactNumbers = new List<string> { "021-216452" + i, "9231425651" + i }
            });
}
var grid = new WebGrid(source: list);
var pager = grid.Pager().ToString();
var newPager = System.Text.RegularExpressions.Regex.Replace(pager, "(\\d+) ", "<span class='selected'>$1</span>");
var gridHtml = grid.GetHtml(columns: grid.Columns(
    grid.Column("NotNullableAddress.City", header: "City"),
    grid.Column("Name"),
    grid.Column("Contacts"))).ToString();
gridHtml = System.Text.RegularExpressions.Regex.Replace(gridHtml, "<tfoot>  ([^<]*|<[^/]*|</[^t]*)*</tfoot>", "");

 }
 @(new HtmlString(gridHtml))
 @(new HtmlString(newPager))
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.