Employee Dashboard using C1GridView

Employee Dashboard is used by the managers to have a quick overview of the employees work routine and details. This demonstration describes how C1GridView can be used here to automate the process further. Let's discuss how a manager can monitor the employees contribution towards the monthly events in a company by using a Dashboard created using C1GridView. The basic requirement for the analysis would be the appropriate represenation of the data. So, we can create two different datatables to represent the data in a specific format to the user. Let's start by creating the first table that displays the role played by each employee on each day of the month on a specific event. The columns in this grid represent the days, hence each row is a record of the employees montly contribution. All you need is to create datatable in the database with the data and bind it an instance of C1GridView. Now, moving on to the second datatable, that shows the event details that was held on each day of the month where in the rows represent the days and hence each row is a record of the event details. As above you can again have a datatable that holds all these details, bound to the second gridview. So, now we have two grids on the same page representing two different aspects of the employee data. The user viewing this page would either need to scroll once in the first grid to reach a specific column for a specific day details and then scroll the second grid to a specific row to reach the event of the day. Here we discuss how the process of scrolling can be automated in such a way that if the user scrolls to a specific column i.e. a day, then the second grid automatically scrolls to the specific row i.e. the event of the day to provide the event details. Here is the code that implements the automation for the synchronized scrolling in two grids. Firstly, we would need to find the left most column index after the user has scrolled horizontally in the first grid. Here is the code for the same:

function scroll(li)  
 {  
   if (li == 13)  
   {  
     $("#C1GridView2").closest(".wijmo-wijsuperpanel").wijsuperpanel("vScrollTo", 0);  
   }  
   else  
   {  
     var position = $($("#C1GridView2").c1gridview()[0].rows[ li - 1 ]).position().top;  
     $("#C1GridView2").closest(".wijmo-wijsuperpanel").wijsuperpanel("vScrollTo", position);  
   }  
 }

Once, we have the index of the left most column, we will scroll the same row index in the second grid. Here is the code:

function getLastVisibleColumnInViewArea(id)  
  {  
    var $grid = $(id),  
    $outer = $grid.closest(".wijmo-wijgrid"),  
    outerWidth = $outer.width(),  
    outerLeft = $outer.offset().left,  
    columns = $grid.c1gridview("columns");  

    for (var i = columns.length - 1; i >= 0; i--)  
    {  
      var element = columns[i].element;  
      if ((element.offset().left - outerLeft + element.width()) > 0)  
      {  
         return i;  
      }  
    }  
  }

So, here we get the employee dashboard with automated scrolling that would simplify the manager's reviewing task: You may refer to the attached sample for complete implementation. Download C# Sample Download VB sample