current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am using Asp.net MVC4 . I have Razor Index View with HTML5 Table.

Now asked to add dynamic (user) grouping functionality to the existing table. Please suggest me / refer me how can I implement with Jquery and HTML5 plain.

So I can't use any jqgrid , datatable or any other frameworks.

Example : Allow User to Group by any column -> Department / JobType or both

CSHTML

@model IEnumerable<EmployeeViewModel>

@{
    ViewBag.Title = "Employees";
}

<h2>Employees</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
 <tr>
    <th>
        @Html.DisplayNameFor(model => model.FirstName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.MiddleName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.LastName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.FullName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.EmployeeNumber)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Department)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.JobType)
        </th>
    <th></th>
</tr>

@foreach(var item in Model)
{
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.MiddleName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FullName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.EmployeeNumber)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Department)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.JobType)
        </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
        @Html.ActionLink("Details", "Details", new { id = item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.Id })
    </td>
</tr>
}

View Model

public class EmployeeViewModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }

    public string MiddleName { get; set; }
    public string LastName { get; set; }

    public string JobType { get; set; }
    public string Department { get; set; }

    public string FullName
    {
        get
        {
            if (string.IsNullOrEmpty(MiddleName))
            {
                return FirstName + " " + LastName;
            }
            return FirstName + " " + MiddleName + " " + LastName;
        }
    }

    public string EmployeeNumber { get; set; }
}

Thanks,

ineffable

share|improve this question
1  
can u describe what functionality you need for this "grouping"? do u have any pic or axample? –  Homam Jul 13 '13 at 6:30

1 Answer 1

up vote 0 down vote

Why not search by everything:

<input id="Search" value="Start typing">

<table class="table">
 <tr>
    <th>
        @Html.DisplayNameFor(model => model.FirstName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.MiddleName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.LastName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.FullName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.EmployeeNumber)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Department)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.JobType)
        </th>
    <th></th>
</tr>

<script>
var searchInput = $("#Search");

searchInput.keyup(function () {
    var data = this.value.split(" ");
    var rows = $(".table").find("tr");

    if (this.value == "") {
        rows.show();
        return;
    }

    rows.hide();

    rows.filter(function (i, v) {
        var $t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if ($t.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    }).show();
});

searchInput.focus(function () {
    this.value = "";
    $(this).css({
        "color": "black"
    });
    $(this).unbind('focus');
});

searchInput.css({
    "color": "#C0C0C0"
});
</script>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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