Ajax Binding with Filtering and Column Template issues

[King Wilder]

I want to have Ajax-binding on the Grid and Filterable from a TextBox while using column templates.  I know that was a mouthful, the issue I'm having is when I page through the records, all the columns that have Templates are not rendered.  The other columns are rendered properly.

Is this a known issue?

Thanks.

[Atanas Korchev]

Hello King Wilder,

 I am afraid I do not understand what the problem is. Could you please clarify? Sending some code or a screenshot would help.

Regards,
Atanas Korchev
the Telerik team

[King Wilder]

Hi, I know it's been a while, but I've been busy on other projects. 

I have some screenshots of the issue, a before and after.  They show that all the links appear as they should if I'm not doing any filtering.

But when I page after attaching the Ajax databinding, then the result after paging is the "after" image.  The columns that are template columns in the Grid, do not display.

Here's my Razor code for the grid.

<div>
    @using (Html.BeginForm())
    {
    <p>
        <select id="filterBy" name="filterBy">
            <option value="Login">Login Name</option>
            <option value="WebSiteName">Website Name</option>
            <option value="Url">Url</option>
        </select> Starts with:
        @Html.TextBox("searchTerm") <button id="search-button">Search</button>
    </p>
    }
</div>


<div class="results">



@(Html.Telerik().Grid(Model).Name("PasswordGrid")
    .DataKeys(keys => keys.Add("Id"))
    .Columns(column =>
    {

        column.Template(
            @<text>
                @Html.ActionLink("Edit", "Edit", "Password", new { id = item.Id }, new { @class = "edit", style = "color: Blue; text-decoration: underline;" })
            </text>
            ).Width(50).HtmlAttributes(new { align = "center" });
        column.Bound(c => c.Login);
        column.Template(
            @<text>
                @Html.ActionLink("View", "Details", "Password", new { id = item.Id }, new { style = "color: Green; text-decoration: underline;" })
            </text>
            ).Title("Password").Width(75).HtmlAttributes(new { align = "center" });
        column.Bound(c => c.WebSiteName).Title("Website Name");

        @*column.Template(
            @<text>
                @item.Url.Chop(35)
            </text>).Title("Url").Width(335);*@

        column.Bound(c => c.Url).Title("URL").Width(335).Template(
            @<text>
                @item.Url.Chop(35)
            </text>);

        if(User.IsInRole("Administrators")){
            column.Bound(c => c.UserIdentity).Title("User").Width(75).HtmlAttributes(new { align = "center" });
        }
        column.Template(
            @<text>
                @Html.ActionLink("Delete", "Delete", "Password", new { id = item.Id }, new { @class = "delete", style = "color: Red; text-decoration: underline;" })
            </text>
            ).HtmlAttributes(new { align = "center" }).Width(50);
    })
    .DataBinding(binding => binding.Ajax().Select("_Search", "Password"))
                            .Filterable(filtering => filtering
                                .Filters(filters =>
                                {
                                    filters.Add(o => o.Login).StartsWith(ViewBag.Login);
                                    filters.Add(o => o.WebSiteName).StartsWith(ViewBag.WebSiteName);
                                    filters.Add(o => o.Url).StartsWith(ViewBag.Url);
                                }))
    .Sortable()
    .Pageable()

    )

Here's my controller code for both the Index action and a _Search action for the Ajax call.

public ViewResult Index(string filterBy, string searchTerm)
{
    List<Password> list = null;


    if (!string.IsNullOrEmpty(searchTerm))
    {
        if (filterBy == "Login")
        {
            ViewBag.Login = searchTerm;
            ViewBag.WebsiteName = "";
            ViewBag.Url = "";
        }
        if (filterBy == "WebsiteName")
        {
            ViewBag.Login = "";
            ViewBag.WebsiteName = searchTerm;
            ViewBag.Url = "";
        }
        if (filterBy == "Url")
        {
            ViewBag.Login = "";
            ViewBag.WebsiteName = "";
            ViewBag.Url = searchTerm;
        }
    }
    else
    {
        ViewBag.Login = "";
        ViewBag.WebsiteName = "";
        ViewBag.Url = "";
    }


    if (User.IsInRole("Administrators"))
    {
        list = db.Passwords.ToList();
    }
    else
    {
        list = db.Passwords.Where(u => u.UserIdentity == User.Identity.Name).ToList();
    }

    return View(list);
}

This is the _Search action for the Ajax call.

[GridAction]
public ActionResult _Search(string filterBy, string searchTerm)
{
    List<Password> list = null;



    if (User.IsInRole("Administrators"))
    {
        list = db.Passwords.ToList();
    }
    else
    {
        list = db.Passwords.Where(u => u.UserIdentity == User.Identity.Name).ToList();
    }

    return View(new GridModel<Password>
    {
        Data = list
    });
}

Is there something I'm missing to make this work with Template columns?

Thanks,

King Wilder

[King Wilder]

I found the solution!

Thomas had it at http://www.telerik.com/community/forums/aspnet-mvc/grid/grid-template-ajax.aspx.

The ClientTemplate() method is also needed to display data when Ajax is used.

So my Razor code now looks like this:

<div>
    @using (Html.BeginForm())
    {
    <p>
        <select id="filterBy" name="filterBy">
            <option value="Login">Login Name</option>
            <option value="WebSiteName">Website Name</option>
            <option value="Url">Url</option>
        </select> Starts with:
        @Html.TextBox("searchTerm") <button id="search-button">Search</button>
    </p>
    }
</div>


<div class="results">



@(Html.Telerik().Grid(Model).Name("PasswordGrid")
    .DataKeys(keys => keys.Add("Id"))
    .Columns(column =>
    {

        column.Bound(c => c.Id).Template(
            @<text>
                @Html.ActionLink("Edit", "Edit", "Password", new { id = item.Id }, new { @class = "edit", style = "color: Blue; text-decoration: underline;" })
            </text>
            )
            .ClientTemplate(
                @"<a href=""/Password/Edit/<#= Id #>"">Edit</a>"
            )
            .Width(50).HtmlAttributes(new { align = "center" });
        column.Bound(c => c.Login);
        column.Bound(c => c.Id).Template(
            @<text>
                @Html.ActionLink("View", "Details", "Password", new { id = item.Id }, new { style = "color: Green; text-decoration: underline;" })
            </text>
            )
            .ClientTemplate(
                @"<a href=""/Password/Details/<#= Id #>"">View</a>"
            )
            .Title("Password").Width(75).HtmlAttributes(new { align = "center" });
        column.Bound(c => c.WebSiteName).Title("Website Name");


        column.Bound(c => c.Url).Title("URL").Template(
            @<text>
                @item.Url.Chop(35)
            </text>)
            .ClientTemplate(
                @"<#= Url #>".Chop(35)
            );


        if (User.IsInRole("Administrators"))
        {
            column.Bound(c => c.UserIdentity)
                .Template(
                @<text>
                    @item.UserIdentity
                </text>
                )
            .ClientTemplate(
                @"<#= UserIdentity #>"
            )
                .Title("User").HtmlAttributes(new { align = "center" });
        }
        column.Bound(c => c.Id).Template(
            @<text>
                @Html.ActionLink("Delete", "Delete", "Password", new { id = item.Id }, new { @class = "delete", style = "color: Red; text-decoration: underline;" })
            </text>
            )
            .ClientTemplate(
                @"<a href=""/Password/Delete/<#= Id #>"">Delete</a>"
            )
            .HtmlAttributes(new { align = "center" }).Width(50);
    })
    .DataBinding(binding => binding.Ajax().Select("_Search", "Password"))
    .Filterable(filtering => filtering
        .Filters(filters =>
        {
            filters.Add(o => o.Login).StartsWith(ViewBag.Login);
            filters.Add(o => o.WebSiteName).StartsWith(ViewBag.WebSiteName);
            filters.Add(o => o.Url).StartsWith(ViewBag.Url);
        }))
    .Sortable()
    .Pageable()

    )

Thank you Thomas for the solution.