Thursday, May 15, 2014

conditionally hiding checkboxes in a column full of checkboxes in a DevExpress ASPxGridView

Following up on this, I tried to hide checkboxes conditionally the wrong way today...

function hideCheckboxes() {
   var checkBoxesToHide = Array.parse($('#WhichCheckboxesToHide').val());
   var rows = $('#Foo').find('tbody:first').find('tr:first').find('td:first').find('table:first')
         .find('tbody:first').children().toArray();
   var isFirstRow = true;
   var counter = 0;
   rows.forEach(function (row) {
      if (!isFirstRow) {
         var id = row.cells[2].innerHTML;
         checkBoxesToHide.forEach(function(checkbox) {
            if (checkbox == id) {
               var whatnow = $('#Foo').find('tbody:first').find('tr:first').find('td:first').find('table:first')
                     .find('tbody:first').find('tr:eq('+counter+')').find('td:first');
            }
         });
      }
      counter++;
      isFirstRow = false;
   });
}

 
 

I didn't know what to do with the whatnow variable above. It turns out the checkboxes that DevExpress makes are not even checkboxes but are instead span tags which are dressed up to look like checkboxes. The better thing to do is this in C#:

Foo.CommandButtonInitialize += Foo_CommandButtonInitialize;

 
 

...followed by this:

protected void Foo_CommandButtonInitialize(object s,
      ASPxGridViewCommandButtonEventArgs e)
{
   var grid = s as ASPxGridView;
   if (grid.GetRowValues(e.VisibleIndex, "FlattenedErrorList").ToString().Length > 0)
         e.Visible = false;
}

 
 

Alright, now we are doing things the DevExpress way! Here is my redacted JavaScript. You'll notice that I was able to bring in elements of the first mess.

function DoSomethingInJavaScript(s, e) {
   if (Foo.GetVisibleRowsOnPage() == 0)
      return;
   if (!s.GetChecked())
      Foo.UnselectAllRowsOnPage();
   else {
      var topIndex = Foo.GetTopVisibleIndex();
      var bottomIndex = (topIndex + Foo.GetVisibleRowsOnPage());
      var rows = $('#Foo').find('tbody:first').find('tr:first').find('td:first').find('table:first')
            .find('tbody:first').children().toArray();
      for (var i = topIndex; i < bottomIndex ; i++) {
         var row = (i + 1) - topIndex;
         var checkBoxSanityCheck = rows[row].cells[0].innerHTML;
         if (checkBoxSanityCheck != ' ')
            Foo.SelectRowOnPage(i);
      }
   }
   MyCallBackPanel_BeginCallback(null, "refresh");
}

No comments:

Post a Comment