Problems with gridMvc...help!

Feb 4, 2014 at 12:38 PM
Hello,

I have a project using 2 grids in the same view (Index.cshtml), the first "customerGrid"

displays a list of customers, and the second "accountsGrid" displays the accounts of each customer when a row in "customerGrid" is selected.

Index.cshtml:
<h4>Customer</h4> <div id="customer-table-gridmvc"> @Html.Partial("_CustomerGrid", Model) </div> <h4>Accounts</h4> <div id="account-table-gridmvc"> </div> <script type="text/javascript"> $(function () { pageGrids.customerGrid.onRowSelect(function (e) { $.post("/Customer/GetAccounts?id=" + e.row.CustomerId, function (data) { if (data.Status <= 0) { alert(data.Message); return; } $("#account-table-gridmvc").html(data.ContentChild); }); }); }); </script> _CustomerGrid.cshtml Is a partial view, gridMvc with information on the customer:

@model IEnumerable<CustomerModel>
@using GridMvc.Html
<div> @Html.Grid(Model, GridRenderOptions.Create("customerGrid")).Named("customerGrid").Columns(columns => { columns.Add(cus => cus.CustomerId, true).Titled("Id").SetWidth(5).Sortable(true); columns.Add(cus => cus.CustomerName).Titled("Customer").SetWidth(5).Sortable(true).Filterable(true); columns.Add(cus => cus.Date).Titled("Creation Date").Format("{0:dd/MM/yyyy}").SetWidth(10).Sortable(true).Filterable(true); }).WithPaging(3,3,"grid1-page") </div> In the Customer controller, GetAccounts action:

 [HttpPost]
    public JsonResult GetAccounts(int id)
    {
        CustomerModel customerModel = CustomerModelRepository.FindCustomer(id);

        if (customerModel == null) {
            return this.Json(new { Status = 0, Message = "Not found" });
        }

        return
            this.Json(
                new {
                        Status = 1,
                        Message = "Ok",
                        Content = this.RenderPartialView("_CustomerInfo", customerModel),
                        ContentChild =
                            this.RenderPartialView("_AccountsGrid", CustomerModelRepository.GetAccounts(id))
                    });
    }
_AccountsGrid Is a partial view, gridMvc with the list of accounts for each customer:

@model IEnumerable<AccountModel>
@using GridMvc.Html
<div> @Html.Grid(Model,GridRenderOptions.Create("accountsGrid")).Named("accountsGrid").Columns(columns => { columns.Add(acc => acc.AccountId, true).Titled("Id").SetWidth(5); columns.Add(acc => acc.AccountType).Titled("Account Type").SetWidth(5).Filterable(true); columns.Add(acc => acc.Date).Format("{0:dd/MM/yyyy}").Titled("Creation Date").SetWidth(40).Filterable(true); }).Sortable().Selectable(true).WithPaging(3,3,"grid2-page") </div> I have the following problems:

-Whenever I navigate paging of grids whole page is reloaded, when I need it to recharge only the grid (partial view _AccountsGrid or _CustomerGrid).
-The grid "accountsGrid" can not select rows.
-The filters do not work when they are dated type, and also the dialogue that opens when you click the filter-icon does not appear on column I want to filter.

Someone who can help me?
Thank you!
Coordinator
Feb 5, 2014 at 2:47 AM
Hi,
  • You can implement ajax paging: http://gridmvc.azurewebsites.net/Home/AjaxPaging
  • This problems seems that gridmvc.js script does not work properly. try to see any console errors in developer tools. Try to init grid manually like: $("#yourgridid").gridmvc()