Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
bhushan
170
checking unchecking checkboxes of a row.
posted

hello,

there is a ultraweb grid in which there are few columns having only checkboxes in them. There is a column among them which when checked(in any row) checks all the checkboxes in its row. so its basically a column("select all") containing checkboxes to check or uncheck a whole row of adjacent checkboxes in a row. the columns containing the checkboxes are not fixed like the other columns in the grid i.e they slide on the horizontal scroll.

i want the functionality of checking or unchecking the checkboxes of a row when a particular checkbox in that specific row is checked or unchecked.

i tried the DOM objects and their methods. i tried some of infra CSOM methods like igtbl_getRowByid which gave me the row in an object "row" but rows.cells[ or rows.getCell() did not work on that object

i tried with cellclickhandler clientside event to try to get the row and its column but i couldnt get the cells of the row or their element which are the checkboxes.             

 

  • 28464
    posted

    Hello,

    Indeed, this turned out not so trivial. I tried myself and it took me several different scenarios until I got it right. The idea is to use the AfterCellUpdateHandler client-side event handler of the grid and then CSOM to locate checkbox elements and check/uncheck them. The caveat was the the handler was firing upon each checking / unchecking of checkboxes, ultimately leading to endless recursion / stack overflow.

    I was able to deal with that with a global "insideHandler" flag.

    Here is my approach:

     <script type="text/javascript">


            var insideHandler = false;

            function cellClick(gridID, cellID)
            {           
               
                if (insideHandler)
                    return;
                insideHandler = true;
               
                var cell = igtbl_getCellById(cellID);
                var checkBox = cell.Element.getElementsByTagName("INPUT")[0];
               

                for (var i = 0; i < cell.Row.cells.length; i++) {
                    var childCell = cell.Row.getCell(i);
                    var childCheckBox = childCell.Element.getElementsByTagName("INPUT")[0];

                    childCheckBox.checked = checkBox.checked;
                }

                insideHandler = false; 
               

            }
       
        </script>
       
        <div>
       
        </div>
        <igtbl:UltraWebGrid ID="UltraWebGrid1" runat="server" Height="200px"
            Width="325px">
            <bands>
                <igtbl:UltraGridBand>               
                    <addnewrow view="NotSet" visible="NotSet">
                    </addnewrow>
                </igtbl:UltraGridBand>
            </bands>
            <displaylayout  ClientSideEvents-AfterCellUpdateHandler="cellClick"
           
             protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Check 1", typeof(Boolean));
            dt.Columns.Add("Check 2", typeof(Boolean));
            dt.Columns.Add("Check 3", typeof(Boolean));

            dt.Rows.Add(new object[ { false, false, false });
            dt.Rows.Add(new object[ { false, false, false });
            dt.Rows.Add(new object[ { false, false, false });

            UltraWebGrid1.DataSource = dt;
            UltraWebGrid1.DataBind();
        }

     

    Hope this helps.