[Solved] [VB.NET/Javascript & Databinding] Databinding does not correctly work

[Michiel Peeters]

Dear Telerik Community,

Currently im developing a page with a grid thats also listens to ajax binding requests. This grid contains custom columns where a image is dynamicly loaded. The following code snippits will explain a little bit more.

<script type="text/javascript">
    jQuery.populateSelect = function(selectId, data) {
        $.each(data, function() {
            var option = new Option(this.Text, this.Value);
            var dropdownList = $(selectId)[0];
            if ($.browser.msie) {
                dropdownList.add(option);
            } else {
                dropdownList.add(option, null);
            }
        });
    };

    function initFeedbackDateFiltering() {
        $('#feedbackDate').bind('change', function() {
            loadGridView();
        });
    }

    function loadGridView() {
        var feedbackPoster = $('#feedbackPoster :selected').val();
        var feedbackDate = $('#feedbackDate :selected').val();
        var url = '/Feedback/GetFeedback/' + feedbackPoster + '?feedbackDate=' + feedbackDate;
        var grid = $('#FeedbacksOverview').data('tGrid');

        if (grid != null) {
            $.getJSON(url, function(data, textStatus) {
                grid.dataBind(data);
            });
        }
    }

    function initFeedbackPosterFiltering() {
        $('#feedbackPoster').bind('change', function() {
            var feedbackPoster = $('#feedbackPoster :selected').val();
            $('#feedbackDate').find('option').remove();
            var url = '/Feedback/GetChanges/' + feedbackPoster;

            $.getJSON(url, function(data, textStatus) {
                $.populateSelect('#feedbackDate', data);
                loadGridView();
            });
        });
    }

    $(document).ready(function() {
        initFeedbackPosterFiltering();
        initFeedbackDateFiltering();
    });
</script>

This javascript snippit loads perfectly my grid with new fresh data. but then also the problem occurs. My image does not load but renders only a number. The following code snippit is my grid.

    Dim gridBuilder As Telerik.Web.Mvc.UI.Fluent.GridBuilder(Of Nexwork.ConceptManager.FeedbackController.SimpleFeedback) = Html.Telerik().Grid(Of Nexwork.ConceptManager.FeedbackController.SimpleFeedback)(ViewData("Feedbacks"))

    gridBuilder.Name("FeedbacksOverview")

    gridBuilder.Columns(Function(column) column.Bound(Function(model As Nexwork.ConceptManager.FeedbackController.SimpleFeedback) model.ImageId).Template(Function(model As Nexwork.ConceptManager.FeedbackController.SimpleFeedback) BaseUtilityFunctions.ResponseWriter("<a href=""" & Url.Action("ShowImage", "Image", New With {.id = model.ImageId, .sortImage = "FullImage"}) & """ onclick=""window.open(this.href); return false;"" title=""""><img src=""" & Url.Action("ShowImage", "Image", New With {.id = model.ImageId, .sortImage = "ThumbnailImage"}) & """ alt="""" /></a>")).ClientTemplate("<a href=""Image/ShowImage/<#= ImageId #>?sortImage=FullImage"" onclick=""window.open(this.href); return false;"" title="""">Klik hier<img src=""Image/ShowImage/<#= ImageId #>?sortImage=ThumbnailImage"" alt="" /></a>").Title("Afbeelding").Width(50))
    gridBuilder.Columns(Function(column) column.Bound(Function(model As Nexwork.ConceptManager.FeedbackController.SimpleFeedback) model.PositionInList).Title("Positie").Width(50))
    gridBuilder.Columns(Function(column) column.Bound(Function(model As Nexwork.ConceptManager.FeedbackController.SimpleFeedback) model.Comments).Title("Commentaar").Width(300))

    gridBuilder.Scrollable(Function(scroll) scroll.Enabled(True))

    gridBuilder.Render()

I thought that when i put a hyperlink that this hyperlink will be executed when i need to image, but apperently this does not happen. I have downloaded the version 2010.1.416 and have placed it in my project and works flawlessly. My project is an MVC project that is created in VS2008 with .NET Framework 3.5.

Everything works expect the loading of the image. My question is am i thinking in the right direction or should i change alot of stuff to make this work.

Kind regards,
Michiel Peeters

[Atanas Korchev]

Hello Michiel Peeters,

The code looks ok from first sight which makes it very hard to tell what could have gone wrong. Do you see any JavaScript errors? You can inspect the grid using FireBug or internet explorer developer toolbar to see what's the generated html during databinding.

If this does not help I suggest you send us a sample project.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Michiel Peeters]

Dear Atanas,

I dont see any problems regarding javascript. Like i said everything works fine. Only on the moment when i change my dropdownbox to a different value the grid will be reloaded with new data. Somehow after the load is complete it only shows up the ID of my image instead of my true image :).

Kinds regards,
Michiel Peeters

P.S. i can provide you a sample project but it will be with a password. Can i send you this password in private?

[Michiel Peeters]

Dear Atanas,

Im proud to report that i have solved my problem. There were 2 problems what i did wrong.

1) In the clienttemplate i used "" (double quotes) instead of '' (single quotes) and looks like that your controls trip over that.
2) The second thing is that i forgot the following line:

gridBuilder.DataBinding(

Function(bind) bind.Ajax())

now i also understand why it doesnt work. When i called the databind function in my javascript function it loads only the simple data into the grid because he wasnt aware of my clienttemplate because i didnt say that my grid may accept ajax requests. Now it does :). In the following code snippit is the problem solved:

 

    Dim gridBuilder As Telerik.Web.Mvc.UI.Fluent.GridBuilder(Of Nexwork.ConceptManager.FeedbackController.SimpleFeedback) = Html.Telerik().Grid(Of Nexwork.ConceptManager.FeedbackController.SimpleFeedback)(ViewData("Feedbacks"))
    gridBuilder.DataBinding(Function(bind) bind.Ajax())

    gridBuilder.Name("FeedbacksOverview")

    gridBuilder.Columns(Function(column) column.Bound(Function(model As Nexwork.ConceptManager.FeedbackController.SimpleFeedback) model.ImageId) _
                            .Template(Function(model As Nexwork.ConceptManager.FeedbackController.SimpleFeedback) BaseUtilityFunctions.ResponseWriter("<a href=""" & Url.Action("ShowImage", "Image", New With {.id = model.ImageId, .sortImage = "FullImage"}) & """ onclick=""window.open(this.href); return false;"" title=""""><img src=""" & Url.Action("ShowImage", "Image", New With {.id = model.ImageId, .sortImage = "ThumbnailImage"}) & """ alt="""" /></a>")) _
                            .ClientTemplate("<a href='../../Image/ShowImage/<#=ImageId#>?sortImage=FullImage' onclick='window.open(this.href); return false;' title=''><img src='../../Image/ShowImage/<#=ImageId#>?sortImage=ThumbnailImage' alt='' /></a>").Title("Afbeelding").Width(50))
    gridBuilder.Columns(Function(column) column.Bound(Function(model As Nexwork.ConceptManager.FeedbackController.SimpleFeedback) model.PositionInList).Title("Positie").Width(50))
    gridBuilder.Columns(Function(column) column.Bound(Function(model As Nexwork.ConceptManager.FeedbackController.SimpleFeedback) model.Comments).Title("Commentaar").Width(300))

    gridBuilder.Scrollable(Function(scroll) scroll.Enabled(True))

    gridBuilder.Render()

There is a third point what i really want to fix is the ../../ fix infront of the image action. Somehow the clienttemplate takes the current url + my url when i type it like this: Image/ShowImage/<id>, but ey it works now! :)

Kind regards,
Michiel Peeters