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

[Solved] Grid Checkboxes Batch editing javascript error

2 Answers 100 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.
Jordan
Top achievements
Rank 1
Jordan asked on 05 May 2011, 03:59 AM
Currently I am using a Telerik Grid control with paging, sorting, and filtering enabled that renders a grid for attendance and displays checkboxes to mark people as attended.
   
  
<%
   Html.Telerik().Grid(Model)
   .Name("Grid")
   .Pageable(paging => paging.PageSize(20).Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom))
   .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
   .Filterable()
   .ToolBar(commands =>
    {
       commands.SubmitChanges();
    })
   .DataKeys(keys => keys.Add(o => o.RegistrationID))
    .Columns(columns =>
    {
  columns.Bound(m => m.Attended).Format("<input type='checkbox' name='checkedRows' />").Encoded(false);
       //other columns bound here
    })
    .DataBinding(dataBinding =>
    {
        dataBinding.Ajax()
            .Select("_Attendance", "Home").Enabled(true)
            .Update("_SaveAttendance", "Home").Enabled(true);
    })
    .ClientEvents(events =>
    {
        events.OnDataBinding("Grid_onDataBinding").OnError("Grid_onError").OnRowDataBound("onRowDataBound");
    })
   .Editable(editing => editing.Mode(GridEditMode.InCell))
    .Scrollable(scrolling => scrolling.Enabled(true).Height(600))
    .Render();
   %>

      
I am also using the following code to check them off
   function onRowDataBound(e) {
       var row = e.row;      
       var dataItem = e.dataItem;
        $("input[type='checkbox']", row)
            .attr({
               'value': dataItem.Attended
            });
        if (dataItem.Attended) {
            $("input[type='checkbox']", row)
           .attr({
                'checked': dataItem.AttendedCheckHTML //gets "checked" from setter in partial entity
            });
        }
    }
events.OnDataBinding("Grid_onDataBinding").OnError("Grid_onError").OnRowDataBound("onRowDataBound");
    })


I am pasing in a IQueryable of my view in the database. Everything works fine, except when I click the checkboxes, and it fires a javascript error and I have to click them again to make the change. And when I lose focus, all that displays is a tiny red tick that the field has changed, the checkbox loses it's checkmark
The updates are pushed to the database properly as well.

In addition, when I try to use

  
columns.Template(o =>
            {
            %>
                    <input name="Attended" type="checkbox" value="<%= o.Attended %>"
                    <% if (o.Attended) {<br>                      
                        %> checked="checked" <%<br>                      } %>
                   />
                <%
            }).Title("").Width(50).ClientTemplate("<input type='checkbox' name='Attended' value='<#= Attended #>' />").Title("").Width(50);


the grid no longer recognizes that as changed and never posts anything back to the database.

I need a grid that can edit a list of attendance with checkboxes. I can either fix the javascript error or figure out how to get the other one to post to the db. On the latter, however, it loses it's ability to sort and filter by attended or not, so I would need to have that functionality as well.

The error that occurs is
  
a is null
(function(a,b){function cg(a){return d...a+"px")}}),a.jQuery=a.$=d})(window)

and is somewhere in jQuery or Telerik itself, not something I coded.

I am using Telerik MVC extensions Q1.3.15 and unable to update to Q1.4.14 (not in my list of available downloads - possibly unreleased to free users?) but if this update solves the problem I can find a way to download that update.

Just to re-iterate:
Here's what it needs to do:
  • Display information about a user's registration
  • Allow the user (an admin) to mark them as attended (default: not attended) in the checkbox - this causes the javascript error
  • Filter by user information, or attended
  • Allow paging and sorting by user information, or attended

2 Answers, 1 is accepted

Sort by
0
alex
Top achievements
Rank 1
answered on 06 Feb 2012, 01:51 PM

Hi. I got same error. Did you fix that issue?

Thanks

0
Jordan
Top achievements
Rank 1
answered on 06 Feb 2012, 06:52 PM
Please don't resurrect dead threads :)

This may or may not be fixed in a newer version of Telerik. How we fixed it is we disabled all grid editing and used jQuery to grab the selected checkboxes as an array of values and the relevant primary key is stored in the checkbox as the checkbox value, using a client a server template. We then use a jQuery.post to pass these up to an MVC controlled, and in my opinion, is much cleaner than using Telerik to handle something like batch deletion.
Tags
Grid
Asked by
Jordan
Top achievements
Rank 1
Answers by
alex
Top achievements
Rank 1
Jordan
Top achievements
Rank 1
Share this question
or