[Solved] Grid in Ajax.beginform layout bug

[Henrique Potter]

I am returning the grid using ajax but it is losing its highlight effects on mouse over and other layouts issues.

here i have the ascx that holdes the popup with the grid inside being populated with ajax.

001.<div id="divIniciarPesq" class="bt_busca">
002.</div>
003.<div id="divPesqCliente" style="">
004.    <%Html.Telerik().Window()
005.            .Name("PopUpPesquisa")
006.            .Title("Pesquisa de Clientes/Contatos")
007.            .Draggable(true)
008.            .Resizable(resizing => resizing.Enabled(true))
009.            .Modal(true)
010.            .Animation(true)
011.            .Visible(false)
012.            .Buttons(b => b.Maximize().Close())
013.            .Width(650)
014.            .Height(500)
015.            .ClientEvents(events =>
016.                events.OnClose("onClose")
017.            )
018.            .Content(() =>
019.            {%>
020.    <%Html.EnableClientValidation(); %>
021.    <% using (Ajax.BeginForm("GetPesquisa", "Atendimento", new AjaxOptions { UpdateTargetId = "GridPesquisa" }))
022.       {%>
023.    <div style="padding-top: 15px; width: auto; padding-left: 8px; padding-right: 8px">
024.        <fieldset style="width: auto">
025.            <legend>Campos</legend>
026.            <div>
027.                <table>
028.                    <tr>
029.                        <td>
030.                            <%:Html.Label("Procurar por: ") %>
031.                        </td>
032.                        <td>
033.                            <%:Html.RadioButton("rdClienteContato", "Cliente", true)%>
034.                        </td>
035.                        <td style="width: 80px">
036.                            <%:Html.Label("Cliente")%>
037.                        </td>
038.                        <td>
039.                            <%:Html.RadioButton("rdClienteContato", "Contato")%>
040.                        </td>
041.                        <td>
042.                            <%:Html.Label("Contato") %>
043.                        </td>
044.                    </tr>
045.                </table>
046.            </div>
047.
048.            <span id="showtime"></span>
049.
050.            <div id="divFiltroFields">
051.                <table cellpadding="0" cellspacing="0">
052.                    <tr>
053.                        <td>
054.                            <label for="FiltroCliente_NomeCliente">
055.                                Nome:
056.                            </label>
057.                        </td>
058.                        <td>
059.                            <%: Html.TextBoxFor(Model => Model.FiltroClienteContato.NomeClienteContato, new { maxLength = "50", style = "width:150px" })%>
060.                            <%: Html.ValidationMessageFor(Model => Model.FiltroClienteContato.NomeClienteContato)%>
061.                        </td>
062.                        <td>
063.                            <label for="FiltroCliente_CPF">
064.                                CPF:</label>
065.                        </td>
066.                        <td>
067.                            <%: Html.TextBoxFor(Model => Model.FiltroClienteContato.CPF, new { style = "width:90px" })%>
068.                            <%: Html.ValidationMessageFor(Model => Model.FiltroClienteContato.CPF)%>
069.                        </td>
070.                        <td>
071.                            <label for="FiltroCliente_CNPJ">
072.                                CNPJ:</label>
073.                        </td>
074.                        <td>
075.                            <%: Html.TextBoxFor(Model => Model.FiltroClienteContato.CNPJ, new { style = "width:115px" })%>
076.                            <%: Html.ValidationMessageFor(Model => Model.FiltroClienteContato.CNPJ)%>
077.                        </td>
078.                    </tr>
079.                    <tr>
080.                        <td>
081.                            <label for="FiltroCliente_ProtocoloDeAtendimento">
082.                                Protocolo de Atendimento:</label>
083.                        </td>
084.                        <td>
085.                            <%: Html.TextBoxFor(Model => Model.FiltroClienteContato.ProtocoloDeAtendimento, new { maxLength = "8", style = "width:58px" })%>
086.                            <%: Html.ValidationMessageFor(Model => Model.FiltroClienteContato.ProtocoloDeAtendimento)%>
087.                        </td>
088.                        <td>
089.                            <label for="FiltroCliente_Telefone">
090.                                Telefone:</label>
091.                        </td>
092.                        <td>
093.                            <%: Html.TextBoxFor(Model => Model.FiltroClienteContato.Telefone, new { style = "width:89px" })%>
094.                            <%: Html.ValidationMessageFor(Model => Model.FiltroClienteContato.Telefone)%>
095.                        </td>
096.                    </tr>
097.                </table>
098.                <div style="float: right">
099.                    <input type="submit" value="Procurar" onclick="return validate_form();" />
100.                </div>
101.            </div>
102.        </fieldset>
103.    </div>
104.    <div id="GridPesquisa">
105.    </div>
106.    <%} %>
107.    <%})
108.              .Render();%>
109.</div>

 

here its the grid

01.<fieldset>
02.    <legend>Resultados da Pesquisa</legend>
03.    <div style="padding-top:15px">
04.        <%if (Convert.ToBoolean(ViewData["PesquisaClienteContatoCount"]))
05.            { %>
06.
07.            <%=Html.Telerik().Grid(Model)
08.                            .Name("Clientes_Contatos")
09.                            .DataKeys(dataKeys =>
10.                            {
11.                                dataKeys.Add(c => c.IdClienteContato).RouteKey("IdClienteContato");
12.                                dataKeys.Add(c => c.TipoCliente).RouteKey("TipoCliente");
13.                            })
14.                            .Columns(colums =>
15.                            {
16.                                colums.Bound(u => u.IdClienteContato).Title("Id").Width(40);
17.                                colums.Bound(u => u.NomeClienteContato).Title("Nome");
18.                                colums.Bound(u => u.CPFFormatado).Title("CPF").Width(130);
19.                                colums.Bound(u => u.TelefoneFormatado).Title("Telefone").Width(110);
20.                                colums.Command(commands => commands.Select()).Width(30);
21.                            })
22.                            .DataBinding(dataBinding => dataBinding.Server().Select("IniciarAtendimentoReceptivo", "Atendimento"))
23.                            .Pageable()
24.                            .Sortable()
25.
26.            %>
27.
28.        <%}
29.            else
30.            {%>
31.
32.            <div style="width:650px;padding-top:15px;"><%:ViewData["ProcuraStatus"]%></div>
33.            <br />
34.            <div style="width:100%">Deseja cadastrar um novo Contato/Cliente ?</div>
35.            <br />
36.            <div style="float:left ">
37.                <input type="button" value="Cadastrar Contato" onclick="location.href='<%: Url.Action("CadastrarClienteContato", "Atendimento",new{varClienteContato="Contato"},null)%>'" />
38.            </div>
39.            <div >
40.                <input type="button" value="Cadastrar Cliente" onclick="location.href='<%: Url.Action("CadastrarClienteContato", "Atendimento",new{varClienteContato="Cliente"},null) %>'" />
41.            </div>
42.
43.        <%} %>
44.        <br />
45.    </div>
46.
47.</fieldset>

[Henrique Potter]

I just solved part of the problems manualy registering some telerik scripts nevertheless i still did not fixed the grid layout.

the footer of the GRID is broken what could it be?

[Georgi Krustev]

Hi Henrique Potter,

MS Ajax does not evaluate javascript files and CSS. That is why you need to add them by hand. Chech these help topics on the same matter:
http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-required-javascript-files.html

Kind regards,
Georgi Krustev
the Telerik team

[Henrique Potter]

Yes, i´ve figured that out but that was not what was the grid issue layout issue.

Nevetheless i figured out, it is some of my own CSS file that is causing the issue since it is fixed when i remove it.

I dont know yet which class or property is causing it.

[Henrique Potter]

Well just found out, i dont know if it is documented but here is the problem

It is this css global definition.

/*dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margin-bottom: 10px; }*/

Try it out once you use this it will mess up the grid footer layout. Just removed it and the 
grid is perfect. Maybe a if it is defined in the grid css the correct property it will
 overhide any global definition.