Support for checkboxes?

[James Davies]

Congratulations on your work!

Is there any built-in support for displaying one checkbox per grid row, so that a user can select rows and server-side code can act on the selected items?  I.e. a typical approach where there are many data rows, and the user needs to work on a selection of them.

Many thanks,
Jim

[Atanas Korchev]

Hello James Davies,

You can check this following forum thread.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James Davies]

Many thanks, I can almost get what I want now.

At the moment I can't use AJAX Binding (problems with circular references!).

When I use Server Binding, the grid OnRowDataBound and OnDataBinding events don't fire - are they only for AJAX?  Without the OnRowDataBound event, I don't see how to set the checkbox attributes from data - or is there another way?

    Regards,
    Jim

[Atanas Korchev]

Hi James Davies,

You can use ViewModel objects to avoid circular references. This blog post shows how.

Client events fire only during client-side databinding (ajax or webservice). This is the reason your code is not executed during server binding.

For server side checkboxes you can use the following code:

columns.Add(p =>
            {
                %>
                <%= Html.CheckBox("checkbox", p.Checked) %>
                <%
            });

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James Davies]

Many thanks for the swift respnse Atanas - always impressive!

For the benefit of anyone interested, I'm so far using the following code for Server Binding (based on Atanas' demo for the previous post mentioned above).  This sets the 'value' attribute of each checkbox, so that in the POST one can get the Customer IDs for the checked checkboxes.

The 'checkedRows' argument to the POST contains one entry for every checkbox, either 'false' for unchecked ones or the Customer ID value for checked ones.

Jim

.Columns(columns =>

{

columns.Add(c =>

{

%>

<%

= Html.CheckBox("checkedRows", c.Bool ?? false, new { value = c.CustomerID })%>

 

<%

})

.Width(4)

.Title(

"Select");

 

columns.Add(c => c.CustomerID);

columns.Add(c => c.ContactName);

})

[Pierre-Olivier Grangaud]

Hi,

I'm testing the Grid and I was trying to apply James Davies solution to the Atanas demo but it don't works.

Got a compilation exception :

Error 1 Invalid expression term ')'  165668_mvcapplication3\MvcApplication3\Views\Home\Index.aspx 20 MvcApplication3

Error 2 ) expected 165668_mvcapplication3\MvcApplication3\Views\Home\Index.aspx 30 MvcApplication3

Here is the code :

        Html.Telerik().Grid<MvcApplication3.Models.Customer>(Model)
        .Name("Grid")
        .Pageable()
        .Columns(columns =>
        {
            columns.Add(c => c.CustomerID);
            columns.Add(c => c.ContactName);
            columns.Add(c =>
                {
                %>
                <%= Html.CheckBox("checkedRows", c.Bool ?? false, new { value = c.CustomerID })%>
                <%
                })
            .Width(4)
            .Title("Select");

        })
        .Sortable()
        .PrefixUrlParameters(false);

Probably missed something.

Could you tell me what's wrong ?

Best regards,

Cedric

[James Davies]

Hi Cedric,

I haven't got much time now - here's some similar code which compiles fine:

    <% using (Html.BeginForm()) {%>

        <% Html.Telerik().Grid<XXX.Models.Contact>(Model)
            .Name("Grid")
            .Pageable()
            .Filterable()
            .Columns(columns =>
            {
                columns.Add(c => { %> <%= Html.CheckBox("checkedRows", c.Selected, new { value = c.ContactID })%> <% })
                    .Title("Select");
                columns.Add(c =>
                    {%>
                        <%= Html.IconActionLink(Icons.EDIT, "Edit Contact", "Edit", "Contacts", new { id = c.ContactID })%>
                        <%= Html.IconActionLink(Icons.DETAILS, "Contact Details", "Details", "Contacts", new { id = c.ContactID })%>
                        <%= Html.IconActionLink(Icons.DELETE, "Delete Contact", "Delete", "Contacts", new { id = c.ContactID })%>
                    <%})
                    .Title("Actions");
                columns.Add(c => c.ContactName).Title("Name");
                %>
                    <% if (User.IsInRole("Administrator")) { %>
                        <%
                            columns.Add(c => c.User.AspNetName).Title("Owner").Filterable(false).Sortable(false);
                        %>
                    <% } %>
                <%
                columns.Add(c => c.ContactMobile1).Title("Mobile1");
                columns.Add(c => c.ContactEmail1).Title("Email1");
                columns.Add(c => c.ContactLandline1).Title("Landline1");
            })
            .Sortable()
            //.PrefixUrlParameters(false)
            .Render();
        %>

        <p>
            <%= Html.ImageGoBack(Icons.BACK, "Back") %>
            <%= Html.ImageActionLink(Icons.CREATE, "Add Contact", "Create", "Contacts", null) %>
            <%= Html.ImageSubmit("AddSelectedToLists", Icons.CONTACT_LIST, "Add Selected Contacts to List(s)")%>
            <%= Html.ImageSubmit("CreateList", Icons.CONTACT_LIST, "Create a List from Selected Contacts") %>
            <%= Html.ImageSubmit("DeleteSelected", Icons.DELETE, "Delete Selected Contacts Completely")%>
            <%= Html.ImageSubmit("RemoveSelected", Icons.REMOVE, "Remove Selected Contacts from List(s)")%>
        </p>

    <% } %>

Does that help?  Hope so...

    Jim

[Pierre-Olivier Grangaud]

Hi James,

Your code was very helpful, thank you for a so quick answer !

I pasted your code and made the modification to adapt to my Model and it worked.

The error was the block including the Telerik grid was started with <%= %> instead of <% %> ...., so stupid mistake :x

Thank you again,

Cedric

[James Davies]

Cedric,

Good to hear it's OK now.

We've all made that mistake with the <%=, more than once in my case...

    BW
    Jim

[Jack Ma]

Hi James,

     I saw your code is quite beautiful, I don't want the buttons occupy wide column in the grid, some small cute icon to indicate the actions is very cool, but I can not leverage your code at my env,  is that Html.IconActionLink your customized html helper class? Could you share some skills on that? Appreciate!

Regards

Jack

[James Davies]

Hi Jack,

Apologies for including the extensions with no explanation.  I guess everybody non-Microsoft should perhaps use a prefix naming convention, e.g. JslIconActionLink in our case (company name abbreviates to JSL).

This code is not something I'm proud of, and I suspect the next person can do it much better!  Anyway the main bits are below.

  Regards,
  Jim

    public static class HtmlHelperExtensions
    {
        private const string PLACEHOLDER = "[[]]";

        public static string IconActionLink(this HtmlHelper html, string filename, string linkText,
            string actionName, string controllerName, object routeValues)
        {
            string imageHtml = html.Image(filename, new { alt = linkText, border = "0", width = "20" });

            string result = html.ActionLink(PLACEHOLDER, actionName, controllerName, routeValues, null).ToString();
            result = result.Replace(PLACEHOLDER, imageHtml) + "  ";

            return result;
        }

        public static string Image(this HtmlHelper html, string filename, string linkText)
        {
            string file = html.GetAbsoluteImageFilename(filename);
            string result = String.Format("<img src=\"{0}\" alt=\"{1}\" />", file, linkText);

            return result;
        }

        public static string GetAbsoluteImageFilename(this HtmlHelper html, string filename)
        {
            string result = FileHelpers.MapPath("~/Content/Images/") + filename;

            return result;
        }

[Jack Ma]

Hi  Jim,

     You're super super! Even unassuming as you expressed, your reply is quite helpful to me such a new bird. Thanks a lot!

Regards

Jack

[James Davies]

Jack,

I'm pleased it was helpful.

I wonder why this post has so many views?

  Jim

[asif]

Hi,

i am  showing data in telerik grid in asp.net mvc.

i want to get check boxes value in controller.

how it is possible without java script??

Please help!