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

Ajax Binding with Filtering and Column Template issues

3 Answers 76 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.
King Wilder
Top achievements
Rank 2
King Wilder asked on 01 Jun 2011, 01:58 AM
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.

3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 01 Jun 2011, 06:03 AM
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
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
King Wilder
Top achievements
Rank 2
answered on 17 Oct 2011, 09:18 PM
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
0
King Wilder
Top achievements
Rank 2
answered on 17 Oct 2011, 10:23 PM
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.
Tags
Grid
Asked by
King Wilder
Top achievements
Rank 2
Answers by
Atanas Korchev
Telerik team
King Wilder
Top achievements
Rank 2
Share this question
or