Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Grid > Freezing Edit/Update-Cancel in RadGrid

• Deepak Vasudevan Intermediate

  Posted on Feb 18, 2012 (permalink)

  Dear Telerik Team,
  
  I am using RadGrid and a few splitter tricks for display and editing of large amount of data. In Edit mode, when the user keeps tabbing, the SAVE goes out of focus. Now the user has to click the right end of scrollbar to make the the Save appear all over again.
  
  I am looking out to see if I can freeze the column that shows Update/Cancel (similar to the examples/demo shared out in http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-freeze-columns-in-radgrid.aspx)
  
  How to make the column that shows Update/Cancel as Frozen? 

  Reply

• Deepak Vasudevan Intermediate

  Posted on Feb 21, 2012 (permalink)

  Looks like this is a bug in Telerik RadGrid as indicated in the thread http://www.telerik.com/community/forums/aspnet-ajax/grid/frozen-column-is-not-working-for-grid-if-tab-is-use-for-navigate.aspx
  
  Is some one from Telerik team available to comment with a working solution containing the workaround please?

  Reply


• Galin Galin

  Posted on Feb 23, 2012 (permalink)

  Hi Deepak,
  
  There is a workaround of your issue. On the tab event the data container is scrolling with changing the focus of the elements. Therefore, you should add a onScroll handler to this container. Additionally, the observer have to scroll the main scrollBar in the RadGrid.
  
  Use the following JavaScript function
  

  function onGridLoad(sender, args)

  {

      var frozenScroll = $get(sender.get_id() + "_Frozen");

      var allColumns = sender.get_masterTableView().get_columns();

      var scrollLeftOffset=0;

      var allColumnsWidth = new Array;

    

      for (var i = 0; i < allColumns.length; i++)

      {

          allColumnsWidth[i] = allColumns[i].get_element().offsetWidth;

      }

    

      $get(sender.get_id() + "_GridData").onscroll = function(e)

      {

          for (var i = 0; i < allColumns.length; i++)

          {

              if(!allColumns[i].get_visible())

              {

                  scrollLeftOffset += allColumnsWidth[i];

              }

          }

          var thisScrollLeft = this.scrollLeft;

          this.scrollLeft = 0;

          if(thisScrollLeft>0)

              frozenScroll.scrollLeft =  thisScrollLeft + scrollLeftOffset;

          scrollLeftOffset = 0;

      }

  }

  
  
  I have prepared a sample page with this functionality. Please find it in the attached file and let me know how it goes.
  
  Also, please note this is a workaround and still is unsupported scenario. However, our developers are investigating the scenario and they are looking for possible resolution.
  
  
  Greetings,
  Galin
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  Attached files

  • testPage.zip

  Reply

• Deepak Vasudevan Intermediate

  Posted on Feb 23, 2012 (permalink)

  Dear Galin,
  
  The solution seems to be fine with IE 9 and Firefox but gives bizarre errors with IE 8 and 7. Any clues?

  Reply

• Galin Galin

  Posted on Feb 28, 2012 (permalink)

  Hi Deepak,
  
  Could you modify my test project to demonstrate the error and sent it back to me?
  
  Looking forward to your reply.
  
  Regards,
  Galin
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  Reply

• Deepak Vasudevan Intermediate

  Posted on Feb 28, 2012 (permalink)

  Dear Galin,
  
  The test project as-it-is can be tested for that scenario also. Use IE developer toolbar to change browser mode to IE7 to see the result.

  Reply

• Galin Galin

  Posted on Mar 5, 2012 (permalink)

  Hi Deepak,
  
  The issue is replicate on our side. Therefore, I have modified the script by adding a IE7 condition in the JS function
  

  function OnGridCreated(sender, args)

  {

      var frozenScroll = $get(sender.get_id() + "_Frozen");

      var allColumns = sender.get_masterTableView().get_columns();

      var scrollLeftOffset = 0;

      var allColumnsWidth = new Array;

      var grid = sender.get_element();

   

      for(var i = 0; i < allColumns.length; i++)

      {

          allColumnsWidth[i] = allColumns[i].get_element().offsetWidth;

      }

   

      $get(sender.get_id() + "_GridData").onscroll = function (e)

      {

          for(var i = 0; i < allColumns.length; i++)

          {

              console.log(grid.getElementsByTagName("colgroup")[0].getElementsByTagName("col")[0].style.display)

              if(!allColumns[i].get_visible())

              {

                  scrollLeftOffset += allColumnsWidth[i];

              }

              if($telerik.isIE7)

              {

                  var thisColumn = grid.getElementsByTagName("colgroup")[0].getElementsByTagName("col")[i];

                  console.log(thisColumn.style.display);

                  if (thisColumn.style.display == "none")

                  {

                      scrollLeftOffset += parseInt(thisColumn.style.width);

                  }

              }

          }

          var thisScrollLeft = this.scrollLeft;

          if(thisScrollLeft > 0)

              frozenScroll.scrollLeft = thisScrollLeft + scrollLeftOffset + 200;

          this.scrollLeft = 0;

          scrollLeftOffset = 0;

      }

  }

  
  Please check it out and let me know how it goes.
  
  Greetings,
  Galin
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Grid > Freezing Edit/Update-Cancel in RadGrid