locked
Hide icons in DataView in all rows - using JavaScript RRS feed

  • Question

  • I have WebPart with DataView (Multiple Item View). I added Delete icon (Data View Properties->Editing Tab ->Show delete item view).

    Now, I'm trying to use some JavaScript to hide that icons, depending on some conditions. The problem is, that when I use such script:

     

    <script type=text/javascript>
    function hide()
    {
    document.getElementById('IconID').style.visibility="hidden"; 
    }
    </script>

     

    only icon from first row dissapear :/ I tried to iterate it using jQuery, but result was the same:

     

    <script type=text/javascript>
      $('#IconID').children().each(
    
     function(){
          $('#IconID').css('visibility','hidden');    
        }
    );
    </script>
    
    Any idea?

    • Edited by simon17 Tuesday, September 6, 2011 2:33 PM
    Tuesday, September 6, 2011 2:32 PM

Answers

  • Couple of ideas here:

    1) in your DVWP xsl source view add a class to the cells with the delete icon. Then your JavaScript or jQuery could affect that class to show or hide the icons. 

    2) Look at using jQuery to hide the entire column of the table (a quick Bing search should bring up examples)

    Your above approach would not work because you are using the ID.  ID's are unique and would only ever return one element. 

    Hope this helps!

    Mark

     

     


    The SharePoint Hillbilly
    Fewer Big Words... More Pretty Pictures... http://www.SharePointHillbilly.com
    • Marked as answer by simon17 Tuesday, September 6, 2011 3:04 PM
    Tuesday, September 6, 2011 2:47 PM
  • Problem solved :) I change the css class from ms-vb to ms-vb1 and

    $(".ms-vb1").each(
    function(){
     $(this).css('visibility','hidden');  
    });
    

    and it works. Thanks Mark!

    • Marked as answer by simon17 Tuesday, September 6, 2011 3:04 PM
    Tuesday, September 6, 2011 3:04 PM

All replies

  • Couple of ideas here:

    1) in your DVWP xsl source view add a class to the cells with the delete icon. Then your JavaScript or jQuery could affect that class to show or hide the icons. 

    2) Look at using jQuery to hide the entire column of the table (a quick Bing search should bring up examples)

    Your above approach would not work because you are using the ID.  ID's are unique and would only ever return one element. 

    Hope this helps!

    Mark

     

     


    The SharePoint Hillbilly
    Fewer Big Words... More Pretty Pictures... http://www.SharePointHillbilly.com
    • Marked as answer by simon17 Tuesday, September 6, 2011 3:04 PM
    Tuesday, September 6, 2011 2:47 PM
  • Problem solved :) I change the css class from ms-vb to ms-vb1 and

    $(".ms-vb1").each(
    function(){
     $(this).css('visibility','hidden');  
    });
    

    and it works. Thanks Mark!

    • Marked as answer by simon17 Tuesday, September 6, 2011 3:04 PM
    Tuesday, September 6, 2011 3:04 PM