Web Development

.list{display:flex;flex-direction:row;}
.list-item{width:33%;}

<div class="list">
  <div class="list-item">1</div>
  <div class="list-item">2</div>
  <div class="list-item">3</div>
</div>

public class DashboardInfoQueryArgs
{
    public string SearchValue { get; set; }
    public int RowsPerPage { get; set; } = 10;
}

public class DashboardInfoViewModel
{
    public DashboardInfoQueryArgs Query { get; set; }
    public IEnumerable Data { get; set; }
    
    public IEnumerable<SelectListItem> PageSizeOptions
    {
        get
        {
            yield return new SelectListItem { Value = "10", Text = "10", Selected = Query.RowsPerPage == 10 };
            yield return new SelectListItem { Value = "25", Text = "25", Selected = Query.RowsPerPage == 25 };
            yield return new SelectListItem { Value = "50", Text = "50", Selected = Query.RowsPerPage == 50 };
        }
    }
}

public ActionResult Index()
{
    var args = new DashboardInfoQueryArgs();
    return Index(args);
}

[HttpPost]
public ActionResult Index(DashboardInfoQueryArgs args)
{
    var data = _dal.GetDashboardInfos(args);
    var model = new DashboardInfoViewModel { Query = args, Data = data };
    return View(model);
}

@model YourNamespace.DashboardInfoViewModel

@using (@Html.BeginForm("Index", "Home"))
{
    <div class="clearfix">
        <div class="header-label">
            <label>Show</label>
            @Html.DropDownList("RowsPerPage", Model.PageSizeOptions, new { @class = "rows-per-page" })
            <label>rows</label>
        </div>
        <div class="header-label">
            <label>Search</label>
            @Html.TextBox("SearchValue", Model.Query.SearchValue, new { @class = "search-value" })
        </div>
    </div>
    
    <div id="divData">
        @{
            var grid = new WebGrid(Model.Data, rowsPerPage: Model.Query.RowsPerPage, canPage: true, ajaxUpdateContainerId: "divData");
 
            @grid.GetHtml(
                emptyRowCellValue: "No Records Found",
                htmlAttributes: new { id = "web-grid" },
                mode: WebGridPagerModes.All,
                columns: grid.Columns
                (
                    grid.Column("RowId", "Row Id", style: "rowid-column-style", format: @@item.RowId),
                    grid.Column("SiteId", "Site Id", style: "siteid-column-style", format: @@item.SiteId),
                ))
        }
    </div>
}

@section Scripts {
    <script>
    $(function(){
        var reloadGrid = function(){
            var data = {
                SearchValue: $(".search-value").val(),
                RowsPerPage: $(".rows-per-page").val()
            };
            
            $("#divData").load("/Home/Index #web-grid", data);
        };
        
        $(".rows-per-page").on("change", reloadGrid);
        $(".search-value").on("change keydown paste input", reloadGrid);
    });
    </script>
}

.header-label {
    width: 50%;
    float: left;
}
.header-label > label,
.header-label > select,
.header-label > input {
    display: inline-block;
}

/* Only needed if you're not using Bootstrap: */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    /* Hack for IE6/7 support: */
    *zoom: 1;
}

var grid = new WebGrid(Model.Data, rowsPerPage: Model.Query.PageSizeOptions, canPage: true, ajaxUpdateContainerId: "divData");

public IEnumerable<dynamic> Data { get; set; }

public IEnumerable Data { get; set; }

Kevin Marois wrote:

the scary part is I'm starting to understand it

$("#searchField").on('change keydown paste input', function () {
    var searchVal = this.value;
    $("#divData").load("/Home/Search #divData > *", { searchValue: searchVal });
});

[HttpPost]
public ActionResult Search(string searchValue)
{
    var data = GetData(new DashboardInfoQueryArgs(searchValue));
    return View("Index", data);
}

$("#searchField").on('change keydown paste input', function () {

function debounce(fn, delay) {
    var timeout;

    return function () {
        var context = this,
            args = arguments;

        clearTimeout(timeout);
        timeout = setTimeout(function () {
            fn.apply(context, args);
        }, delay || 250);
    };
}
...
$("#searchField").on('change keydown paste input', debounce(function () { 
    ... 
}));

• Beginners Guide for Creating GridView in ASP.NET MVC 5[^]
• GridView with Server Side Filtering, Sorting and Paging in ASP.NET MVC 5[^]
• Grid with Server Side Advanced Search using JQuery DataTables in ASP.NET MVC 5[^]

table.tBodies[0].appendChild(new_row);

Richard Deeming wrote:

Is it just the new rows that aren't appearing?

proxy.on('notifyAllClientsOfChanges', function (model) {

console.log("notifyAllClientsOfChanges called");

var $row = $(".webgrid-table").find("span[x-RowId='" + model.RowId + "']").closest("tr");

console.log(model.RowId);

if (!$row.length) {

    var table = document.getElementById('MyGrid');
    console.log("TABLE");
    console.log(table);

    var len = table.rows.length;
    console.log("len = " + len);

    var new_row = table.rows[1].cloneNode(true);
    console.log("new_row");
    console.log(new_row);

    new_row = table.tBodies[0].appendChild(new_row);
    console.log("new_row");
    console.log(new_row);

    $row = $(new_row);
    $row.find("span[x-RowId]").data("rowId", model.RowId).text(model.RowId);
}

console.log("SETTING ROW VALUES");

$row.find(".x-RowId").text(model.RowId);
$row.find(".x-SiteId").text(model.SiteId);
$row.find(".x-InstrumentId").text(model.InstrumentId);
$row.find(".x-TowerLocation").text(model.TowerLocation);
$row.find(".x-BayLocation").text(model.BayLocation);
$row.find(".x-BaySerialNo").text(model.BaySerialNo);
$row.find(".x-BayStatus").text(model.BayStatus);
$row.find(".x-AccessionId").text(model.AccessionId);
$row.find(".x-Result").text(model.Result);
$row.find(".x-AssayName").text(model.AssayName);
$row.find(".x-Started").text(model.Started);
$row.find(".x-Completed").text(model.Completed);
$row.find(".x-TestSummary").text(model.TestSummary);

console.log("DONE");

Kevin Marois wrote:

.find("span[x-RowId='" + model.RowId + "']")
...
$row.find("span[x-RowId]").data("rowId", model.RowId)

proxy.on('notifyAllClientsOfChanges', function (model) {
    
    console.log("notifyAllClientsOfChanges called");
    
    var $row = $(".webgrid-table").find("span[data-row-id='" + model.RowId + "']").closest("tr");
    console.log(model.RowId, $row);
    
    if (!$row.length) {
    
        var table = document.getElementById('MyGrid');
        console.log("TABLE", table);
        
        var len = table.rows.length;
        console.log("len = ", len);
        
        var new_row = table.rows[1].cloneNode(true);
        console.log("new_row", new_row);
        
        new_row = table.tBodies[0].appendChild(new_row);
        console.log("new_row", new_row);
        
        $row = $(new_row);
        $row.find("span[data-row-id]").data("rowId", model.RowId).text(model.RowId);
    }
    
    console.log("SETTING ROW VALUES");
    
    $row.find(".x-SiteId").text(model.SiteId);
    $row.find(".x-InstrumentId").text(model.InstrumentId);
    $row.find(".x-TowerLocation").text(model.TowerLocation);
    $row.find(".x-BayLocation").text(model.BayLocation);
    $row.find(".x-BaySerialNo").text(model.BaySerialNo);
    $row.find(".x-BayStatus").text(model.BayStatus);
    $row.find(".x-AccessionId").text(model.AccessionId);
    $row.find(".x-Result").text(model.Result);
    $row.find(".x-AssayName").text(model.AssayName);
    $row.find(".x-Started").text(model.Started);
    $row.find(".x-Completed").text(model.Completed);
    $row.find(".x-TestSummary").text(model.TestSummary);
    
    console.log("DONE");
}

var new_row = table.rows[1].cloneNode(true);
console.log("new_row", new_row);

var before_row = null;
var before_value = null;

$(".webgrid-table tr").each(function(){
    var value = $(this).find(".x-Started").text();
    
    // TODO: Convert the value to an appropriate type for sorting if necessary:
    if (value < model.Started) {
        if (!before_row || before_value < value) {
            before_row = this;
            before_value = value;
        }
    }
});

if (before_row) {
    new_row = table.tBodies[0].insertBefore(new_row, before_row);
}
else {
    new_row = table.tBodies[0].appendChild(new_row);
}

console.log("new_row", new_row);

Richard Deeming wrote:

That's a bit confusing - you're looking for an attribute called x-RowId, but you're updating the data-row-id attribute. It would probably be better to stick with the data-row-id attribute, since that's the standard way of associating extra data with an element.

Richard Deeming wrote:

The appendChild method will always insert the element at the end of the specified parent. If you want to insert it at a specific position, you'll need to find the row that should immediately follow it, and use insertBefore[^] to add the node.