Click here to Skip to main content
15,884,237 members
Home / Discussions / Web Development
   

Web Development

 
QuestionLayout Elements Horizontally Pin
Kevin Marois9-May-17 12:26
professionalKevin Marois9-May-17 12:26 
AnswerRe: Layout Elements Horizontally Pin
Richard Deeming10-May-17 1:08
mveRichard Deeming10-May-17 1:08 
GeneralRe: Layout Elements Horizontally Pin
Kevin Marois10-May-17 4:57
professionalKevin Marois10-May-17 4:57 
GeneralRe: Layout Elements Horizontally Pin
Richard Deeming10-May-17 5:35
mveRichard Deeming10-May-17 5:35 
GeneralRe: Layout Elements Horizontally Pin
Kevin Marois10-May-17 5:40
professionalKevin Marois10-May-17 5:40 
GeneralRe: Layout Elements Horizontally Pin
MikeSpock2-Jun-17 0:38
professionalMikeSpock2-Jun-17 0:38 
QuestionChange WebGrid RowsPerPage During Runtime Pin
Kevin Marois9-May-17 11:43
professionalKevin Marois9-May-17 11:43 
AnswerRe: Change WebGrid RowsPerPage During Runtime Pin
Richard Deeming10-May-17 1:38
mveRichard Deeming10-May-17 1:38 
You're going to need to post the value back to the server, in the same way that you did with the search value. You'll need to handle the case when both values need to be sent.

Models:
C#
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 };
        }
    }
}

Controller:
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);
}


View:
@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>
}

CSS:
CSS
.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;
}




"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer


GeneralRe: Change WebGrid RowsPerPage During Runtime Pin
Kevin Marois10-May-17 6:27
professionalKevin Marois10-May-17 6:27 
JokeRe: Change WebGrid RowsPerPage During Runtime Pin
Richard Deeming10-May-17 7:04
mveRichard Deeming10-May-17 7:04 
QuestionReload WebGrid From Controller Pin
Kevin Marois9-May-17 11:08
professionalKevin Marois9-May-17 11:08 
AnswerRe: Reload WebGrid From Controller Pin
Richard Deeming10-May-17 1:04
mveRichard Deeming10-May-17 1:04 
GeneralRe: Reload WebGrid From Controller Pin
Kevin Marois10-May-17 5:55
professionalKevin Marois10-May-17 5:55 
GeneralRe: Reload WebGrid From Controller Pin
Richard Deeming10-May-17 6:08
mveRichard Deeming10-May-17 6:08 
QuestionWebGrid Searching and Filtering Pin
Kevin Marois8-May-17 8:25
professionalKevin Marois8-May-17 8:25 
SuggestionRe: WebGrid Searching and Filtering Pin
Richard Deeming8-May-17 8:45
mveRichard Deeming8-May-17 8:45 
GeneralRe: WebGrid Searching and Filtering Pin
Kevin Marois8-May-17 10:41
professionalKevin Marois8-May-17 10:41 
QuestionMy website inner pages are not crawling and indexed? Pin
Bharathi Karampudi6-May-17 0:26
Bharathi Karampudi6-May-17 0:26 
AnswerRe: My website inner pages are not crawling and indexed? Pin
Richard Andrew x646-May-17 5:35
professionalRichard Andrew x646-May-17 5:35 
GeneralRe: My website inner pages are not crawling and indexed? Pin
Bharathi Karampudi7-May-17 18:04
Bharathi Karampudi7-May-17 18:04 
QuestionRefresh WebGrid Pin
Kevin Marois2-May-17 11:39
professionalKevin Marois2-May-17 11:39 
SuggestionRe: Refresh WebGrid Pin
Richard Deeming3-May-17 10:52
mveRichard Deeming3-May-17 10:52 
GeneralRe: Refresh WebGrid Pin
Kevin Marois3-May-17 10:54
professionalKevin Marois3-May-17 10:54 
GeneralRe: Refresh WebGrid Pin
Richard Deeming3-May-17 11:03
mveRichard Deeming3-May-17 11:03 
GeneralRe: Refresh WebGrid Pin
Kevin Marois3-May-17 12:31
professionalKevin Marois3-May-17 12:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.