[Solved] DataGrid and DataBinding with Ajax not working

[Lionel]

Hello,

I am working on a MVC 3 .NET web application and I am trying to use the Telerik Datagrid control to display results in a standard search view.

Here is the view code:

<h1>@ViewData("Message")</h1>

<script src="@Creancier.Links.Content.javascript.jquery_validate_js" type="text/javascript"></script>
<script src="@Creancier.Links.Content.javascript.jquery_1_5_1_min_js" type="text/javascript"></script>
<script src="@Creancier.Links.Content.javascript.jquery_validate_unobtrusive_js" type="text/javascript"></script>

@Using Html.BeginForm("Rechercher", "Creancier", FormMethod.Get, New With {Key .id = "form-rechercher"})
    @Html.ValidationSummary(True)
    @<fieldset>
        <legend>Creancier</legend>

               <div class="editor-label">
            @Html.LabelFor(Function(model) model.Type)
        </div>
        <div class="editor-field">
            @Html.EditorFor(Function(model) model.Type)
            @Html.ValidationMessageFor(Function(model) model.Type)
        </div>

        <p>

       
            <input type="submit" value=@Resources.Traduction.BtnRechercher />
            <a href="#" id="recherche-telerik">Rechercher par Telerik</a>

        </p>
    </fieldset>
End Using

 
    @Html.Telerik().Grid(Of Dgag.Affaire.Creancier.Models.Creancier)().Name("Grid").Columns(Function(c)
                                                                                                c.Bound(Function(x) x.Nom).Title("Nom")
                                                                                                c.Bound(Function(x) x.Ville).Title("Ville")
                                                                                                c.Bound(Function(x) x.Adresse).Title("Adresse")
                                                                                                c.Bound(Function(x) x.NoTransit).Title("Transit #")
                                                                                                c.Bound(Function(x) x.NoInstitution).Title("Institution #")
                                                                                                '  c.Command(Function(x) x.Select()).Title("Select")
                                                                                              
                                                                                                c.Bound(Function(x) x.NoTransit).Title("").ClientTemplate("<a href=""" + Url.Content("/Creancier/Selection") + "/<#=NoInstitution#>"" ><#=NoTransit#> <#=NoInstitution#>Select</a>")
                                                                                            End Function).DataBinding(Function(d) d.Server.Select("RechercherTelerik", "Creancier")).Sortable.Pageable(Function(p) p.PageSize(10)).Filterable.NoRecordsTemplate("Aucun résultats")

 

 <h2>@Resources.Traduction.ResultatRecherche</h2>

  <div id="resultats">
 
 
      @If ViewBag.Creanciers.Count = 0 Then
     
     @:<p class="empty"> @Resources.Traduction.AucunResultat

    @:</p>
 
      Else
   @*    @:<ul>      
        For Each cl In ViewBag.Creanciers
            @<li>   @cl.nom  @cl.Prenom  </li>
            @:<ul>
       
          For Each tel In cl.Telephones
              @<li>
                @tel
               </li>
          
          Next
            @:</ul>          
        Next
       
     @:</ul>*@
 
      End If
 
  </div>

<script type="text/x-jquery-tmpl" id="creancierTmpl">
<li>
    ${Prenom} ${Nom}
    <ul>
    {{each Telephones}}
        <li>${$value}</li>
    {{/each}}
    </ul>
</li>
</script>

<script type="text/javascript">
    var strings = {
        noResults: "@Resources.Traduction.AucunResultat"
    };

    $(function () {
        //        $('#form-rechercher').submit(function () {
        //            $.ajax({
        //                url: '/Creancier/Rechercher?' + $(this).serialize(),
        //                dataType: 'json',
        //                type: 'GET',
        //                //success: creancierReceived
        //            });
        //            alert("apres chercher submit(")
        //            return false;
        //        });

        //Recherche Telerik
        $('#recherche-telerik').click(function () {
            var grid = $('#Grid').data('tGrid');
            var rechercheModel = {
                Nom: $('#Nom').val(),
                Prenom: $('#Prenom').val(),
                Telephone: $('#Telephone').val(),
                Nouvelle: true
            };
            grid.rebind(rechercheModel, true);
            return false;
        });

    });

    function creancierReceived(creanciers) {
        alert("dans creancier Reseived")
        $('#resultats').slideUp(function () {
            alert("davant lenght >0")
            if (creanciers.length > 0) {
                alert("apres lenght >0")
                var $creanciers = creancierListHtml(creanciers);
                $(this).html($creanciers);
            } else {
                $(this).html('<p class="empty">' + strings.noResults + '</p>');
            }
            $(this).slideDown();
        });
    }

    function creancierListHtml(creanciers) {
        var $ul = $('<ul/>').attr('id', 'creanciers');
        $('#creancierTmpl').tmpl(creanciers).appendTo($ul);
        return $ul;
    }
</script>

The problem is the controller Creancier and action RechercherTelerik are not even called when I click on link "Rechercher par Telerik". Nothing happens.

However, when I replace the DataBinding(...) part with

 

BindTo(DirectCast(ViewBag.Creanciers, IEnumerable(Of Creancier)))

Then it works perfectly fine.

Does anybody have an idea about what is wrong in my view?

Thanks in advance for your answers.