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

Grid, Modal Form, Sorting & Filtering Problem.

6 Answers 86 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.
Andy McShane
Top achievements
Rank 1
Andy McShane asked on 17 Feb 2010, 05:18 PM
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?

6 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 18 Feb 2010, 08:00 AM
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.
0
Andy McShane
Top achievements
Rank 1
answered on 18 Feb 2010, 12:52 PM
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
0
Atanas Korchev
Telerik team
answered on 18 Feb 2010, 01:01 PM
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.
0
Andy McShane
Top achievements
Rank 1
answered on 18 Feb 2010, 01:11 PM
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 = 250width = 600modal = "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 = 250width = 500modal = "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 = 250width = 500modal = "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?





0
Accepted
Atanas Korchev
Telerik team
answered on 18 Feb 2010, 01:54 PM
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.
0
Andy McShane
Top achievements
Rank 1
answered on 18 Feb 2010, 01:59 PM
Thanks so much Atanas, that works perfectly, great work!!! :-)
Tags
Grid
Asked by
Andy McShane
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Andy McShane
Top achievements
Rank 1
Share this question
or