Grid, Modal Form, Sorting & Filtering Problem.

[Andy McShane]

Hi, I am using the MVC grid, which is working great, thanks. I am using it with sorting, pageing and filtering without problems. Now I need to implement a modal form that pops up when a user selects a record in the grid and clicks 'Edit' or 'View'. Now this works great when the page has first loaded. I can click on 'Edit' or 'View' and my modal form works fine. However, if I then click on a column in the grid to a sort or a filter or any paging, the next time I click 'Edit' or 'View' my modal window no longer loads and instead I am presented the a new page with the contents that should have appeared in the modal window.

I am using jQuery-1.3.2 and jquery.thickbox. It would appear that after doing anything with the grid the connection between the jQuery modal code and the links to click on are lost. Has anyone come across this before? I can provide a sample if needed to demonstrate this behaviour?

[Atanas Korchev]

Hi Andy McShane,

I am taking a blind guess that you are using bind (or click) for hooking up to the links. However after the grid is rebound those links are destroyed and created again as HTML DOM nodes. As a workaround I suggest you use live events instead.

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.

[Andy McShane]

Thanks Atanas but I am unsure what you mean. Could expand on this a little more please. Where should I be looking to do this? On the grid, in jQuery or in the thickbox script?

Many thanks for your help

[Atanas Korchev]

Hello Andy McShane,

Well I was just making a guess. I thought there is some kind of script required to hook up the link and the modal popup. This initialization code should be modified to make it work. Could you paste your code here?
Perhaps this would shed more light on the problem.

All the best,
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.

[Andy McShane]

Well it was a very good guess! :-) Ok, this is the code that I have in my page that has the grid on it

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<PPMSII.Model.Customer>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Customer Index</h2>

    <%
        Html.Telerik().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
                         {
                             columns.Add(o => o.CustomerId).Format(Html.ActionLink("Edit", "Edit", "Customer",
                                                                                   new { id = "{0}", height = 250, width = 600, modal = "true" },
                                                                                   new { @class = "t-link action-edit thickbox" })).Title("").Encoded(false)
                                                                                                                                    .Sortable(false)
                                                                                                                                    .Filterable(false)
                                                                                                                                    .HtmlAttributes(new { @style = "text-align:center" });
                             columns.Add(o => o.CustomerId).Format(Html.ActionLink("View", "Details", "Customer",
                                                                                   new { id = "{0}", height = 250, width = 500, modal = "true" },
                                                                                   new { @class = "t-link action-edit thickbox" })).Title("").Encoded(false)
                                                                                                                                    .Sortable(false)
                                                                                                                                    .Filterable(false)
                                                                                                                                    .HtmlAttributes(new { @style = "text-align:center" });
                             columns.Add(o => o.CustomerId).Title("Customer ID");
                             columns.Add(o => o.CustomerName).Title("Customer");
                             columns.Add(o => o.CustomerStatus).Title("Status");
                             columns.Add(o => o.CustomerContactSurname).Title("Contact Surname");
                             columns.Add(o => o.CustomerContactFirstName).Title("Contact Firstname");
                             columns.Add(o => o.CustomerContactEmail).Title("Email");
                         })
            .Ajax(ajax => ajax.Action("Filtering", "Customer"))
            .Pageable()
            .Sortable()
            .Filterable()
            .Render();
     %>

    <br />

    <p>
        <%= Html.ActionLink("Create New", "Create", new { height = 250, width = 500, modal = "true" }, new { @class = "thickbox" })%>
    </p>

</asp:Content>

As you can see, simply adding the class 'thickbox' to my link automatically wires up the thickbox modal popup. This is the initialization code inside of jQuery-thickbox.js

/*
* Thickbox 3.1 - One Box To Rule Them All.
* By Cody Lindley (http://www.codylindley.com)
* Copyright (c) 2007 cody lindley
* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/

var tb_pathToImage = "/images/loadingAnimation.gif";

/*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/

//on page load call tb_init
$(document).ready(function() {
    tb_init('a.thickbox, area.thickbox, input.thickbox'); //pass where to apply thickbox
    imgLoader = new Image(); // preload image
    imgLoader.src = tb_pathToImage;
});

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk) {
    $(domChunk).click(function() {
        var t = this.title || this.name || null;
        var a = this.href || this.alt;
        var g = this.rel || false;
        tb_show(t, a, g);
        this.blur();
        return false;
    });
}

So I am assuming that I somehow have to be able to rerun the following line of code;

tb_init('a.thickbox, area.thickbox, input.thickbox');

 
Pageing/Sorting/Filtering the grid? How best would this be achieved?

[Atanas Korchev]

Hello Andy McShane,

Try this please :

function tb_init(domChunk) {
    $(domChunk).live('click', function() {
        var t = this.title || this.name || null;
        var a = this.href || this.alt;
        var g = this.rel || false;
        tb_show(t, a, g);
        this.blur();
        return false;
    });
}

Sincerely yours,
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.

[Andy McShane]

Thanks so much Atanas, that works perfectly, great work!!! :-)