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

Help with paging on client side

3 Answers 39 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Romel
Top achievements
Rank 1
Romel asked on 12 May 2014, 07:44 PM

Hi all, once again I have hit a brick wall and hopefully someone can provide some guidance. I have a grid on my page and some of the columns contain links which should "pop-up" or open a jquery dialog. I pass the data on click of the link to a partial view and the partial view is then opened in a jquery dialog. Everything seem to work flawlessly, but when I page the grid after page 1 (every page after page 1), the dialog no longer appears. I find it strange because all the data is still being passed to the partial view and all I get is a plain white page with my data on it. Here's my code for the grid, which contains one of the columns that has a link that should open a dialog as mentioned above:

@(Html.Kendo().Grid<DMSTestMVC.Models.ViewModels.DocVM>(Model.Docs)
    .Name("grid1")
    .Pageable()
    .Sortable()
    .Groupable()
                   
                   
    .DataSource(d => d
                .Ajax()
                .PageSize(15)
                .ServerOperation(false)
                )

    .Columns(columns =>
    {

 

        columns.Bound(d => d.DocumentTypeName).ClientTemplate(
            "# if (DocumentInsertDt != null) { #" +

            "<a style='font-weight:bold; color:blue' href='" + Url.Action("ViewDocument", "Home") + "/#= Id #'" + ">" + "#= DocumentTypeName #" + "</a>" +
            "<a style='text-decoration: none;' class='doctype' href='" + Url.Action("ChangeDocType", "AssignDocType") + "/#= Id #'" + "> <img src='" + Url.Content("~/Images/Pencil-icon (1).png") + "' alt='' style='border:none;' /> </a>" +
            "# } else { #" +
            "#: DocumentTypeName #" +
            "# } #").Title("Document").HeaderHtmlAttributes(new { style = "text-align: center" }).HtmlAttributes(new { style = "text-align: center" }).Width(300);


On the same page, I have a <div> for rendering the jquery dialog:
<div id="changedoctype" title="Change Document Type"></div>

Here's how my JavaScript code looks like:
script type="text/javascript">

    $(function () {
$('#changedoctype').dialog({
            autoOpen: false,
            width: 530,
            resizable: false,
            show: "scale",
            hide: "scale"
        });

 $('.doctype').click(function () {
            $('#changedoctype').load(this.href, function () {
                $(this).dialog('open');
            });
            return false;
        });

});
</script>

Here's how my controller looks like:
public ActionResult ChangeDocType(string id)
        {
            RecordViewModel rvm = new RecordViewModel(id.ToString());

            return PartialView("_ChangeDocType", rvm);
        }

finally, here's how the partial view looks like, which is the one getting rendered inside the jquery dialog
@model DMSTestMVC.Models.ViewModels.RecordViewModel

@using (Html.BeginForm("SubmitChangeDocType", "AssignDocType", Model, FormMethod.Post))
{
    <div style="width:100%; text-align:center;">
        <br />
        <b>Select a Document Type:</b>
        <br />
        @Html.DropDownListFor(x => x.DocumentType, new SelectList(Model.DocumentNames, "DocumentType", "DocumentName1"))
        <br />
        <br />
        <input type="submit" value="Submit" class="k-button" style="width:120px" />
    </div>
}

As mentioned, everything is working like charm on page 1 of the grid. However, as soon as I page through the grid, I no longer get the dialog. All I get is an ugly empty page but with all the correct data on it. It seems like I am simply missing something, but can not figure out what it could be. Thanks and I look forward to the response(s).

Romel



3 Answers, 1 is accepted

Sort by
0
Romel
Top achievements
Rank 1
answered on 13 May 2014, 09:47 PM
Anyone out there willing to lend a hand?
0
Nikolay Rusev
Telerik team
answered on 14 May 2014, 07:42 AM
Hello Romel,

This behavior that you observe is pretty normal to happen. Here is what happens:
 - the page is loaded
 - Grid widget is initialized
 - the $('.doctype').click handler is initialized only for the currently available elements on the page, because the handler is inside `$(function () { })` block which is evaluated only on first page load. 

Now when the user changes the current page of grid, the items in the widget (DOM elements) are recreated with the new data, but the handler above is referring to the old DOM elements.

What to do?
 - attach the handler to an element which will not change during changing pages of the grid (for example grid wrapper element) and add filter for elements with this class name. Here is how the click handler should be:
$("#grid1").on("click", ".doctype", function () {
            $('#changedoctype').load(this.href, function () {
                $(this).dialog('open');
            });
            return false;
        });
});


Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Romel
Top achievements
Rank 1
answered on 14 May 2014, 08:01 PM
Hi Nikolay,

As you can probably tell, JavaScript/JQuery is not my strongest language.... =)  Thanks so much for the help and your solution worked out great. Take care.

Romel
Tags
Grid
Asked by
Romel
Top achievements
Rank 1
Answers by
Romel
Top achievements
Rank 1
Nikolay Rusev
Telerik team
Share this question
or