This is a migrated thread and some comments may be shown as answers.

[Solved] Binding a Grid with ajax using a Partial View

8 Answers 172 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

paulo larini asked on 30 Jun 2011, 07:06 PM

Hello, this issue seems to be recurrent, but I can't found a good answer for that (Index.cshtml).

I have a page with an ajax form for user to enter filter data:

@using (Ajax.BeginForm(

"Pesquisar",

"Prestador",

new AjaxOptions

{

HttpMethod="POST",

InsertionMode = InsertionMode.Replace,

UpdateTargetId = "gridPesquisa"

}

))

{

<fieldset>

...some fields here..

<input type="submit" value="Pesquisar" />

</fieldset>

}

I have also, a partial view:

@model System.Data.DataTable

@(Html.Telerik().Grid(Model)

.DataBinding(dataBinding => dataBinding.Ajax().Select("_Pesquisar", "Prestador"))

.Name("gridPesquisa")

.DataKeys(keys => keys.Add(c => c["Handle"]))

.HtmlAttributes(new { @class = "grid-padrao" })

.Columns(columns =>

{

columns.Template(

@<span>

@Html.ActionLink(" ", "Details", new { @id = item["Handle"] }, new { @image = "show", @class = "formatacao" })

@Html.ActionLink(" ", "Edit", new { @id = item["Handle"] }, new { @image = "edit", @class = "formatacao" })

@Html.ActionLink(" ", "Delete", new { @id = item["Handle"] }, new { @image = "delete", @class = "formatacao" })

</span>

).Width(76);

columns.Bound("Nome").Title("Nome");

columns.Bound("Logradouro").Title("Endereço");

columns.Bound("Bairro").Title("Bairro");

columns.Bound("Telefone").Title("Telefone");

})

.Pageable()

.Sortable()

)

And finally a controller:

public PartialViewResult Pesquisar(PrestadorFiltro filtro = null)

{

if (filtro == null)

filtro = new PrestadorFiltro { Nome = null, Estado = null };

DataSet prestadores = consultaPrestador.PesquisarPrestadorFiltroCompleto(

Session["token"].ToString(), filtro.Estado, filtro.Municipio != null ? Int32.Parse(filtro.Municipio) : 0, 0, 0, 0, filtro.Nome, null, 0, 0, null);

return PartialView("_GridPesquisa", prestadores.Tables.Count > 0 ? prestadores.Tables[0] : null);

}

[GridAction]

public ActionResult _Pesquisar()

{

PrestadorFiltro filtro = new PrestadorFiltro { Nome = null, Estado = null };

DataSet prestadores = consultaPrestador.PesquisarPrestadorFiltroCompleto(

Session["token"].ToString(), filtro.Estado, filtro.Municipio != null ? Int32.Parse(filtro.Municipio) : 0, 0, 0, 0, filtro.Nome, null, 0, 0, null);

return View(new GridModel(prestadores.Tables.Count > 0 ? prestadores.Tables[0] : null));

}

The problems is:
When I post the form, the "gridPesquisa" element is filled with the correct grid and data.
But, when I sort, page.. in the grid, the data is displayed in a new page, without any style.

Any clues?

8 Answers, 1 is accepted

answered on 30 Jun 2011, 09:48 PM

Appending:

It looks like the problem is the links that was created:

<th class="t-header" scope="col"><a class="t-link" href="/Prestador/Pesquisar?gridPesquisa-orderBy=Nome-asc">Nome</a></th>

here is the generated html table:

<div class="t-widget t-grid grid-padrao" id="gridPesquisa"><table cellspacing="0"><colgroup><col style="width:76px"><col><col><col><col></colgroup><thead class="t-grid-header"><tr><th class="t-header" scope="col"> </th><th class="t-header" scope="col"><a class="t-link" href="/Prestador/Pesquisar?gridPesquisa-orderBy=Nome-asc">Nome</a></th><th class="t-header" scope="col"><a class="t-link" href="/Prestador/Pesquisar?gridPesquisa-orderBy=Logradouro-asc">Endereço</a></th><th class="t-header" scope="col"><a class="t-link" href="/Prestador/Pesquisar?gridPesquisa-orderBy=Bairro-asc">Bairro</a></th><th class="t-header t-last-header" scope="col"><a class="t-link" href="/Prestador/Pesquisar?gridPesquisa-orderBy=Telefone-asc">Telefone</a></th></tr></thead><tbody><tr><td> <span>

<a class="formatacao" href="/Prestador/Details/84" image="show"> </a>