Help with paging on client side

[Romel]

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

[Romel]

Anyone out there willing to lend a hand?

[Nikolay Rusev]

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

 

 

[Romel]

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