Horizontal Highliting of columns

14 posts, 1 answers
  1. Kartikey
    Kartikey avatar
    11 posts
    Member since:
    Dec 2013

    Posted 06 Jan 2014 Link to this post

    In my Project I'm using a RadSchedular where currently highlighting  of vertical columns is only poosible.
    The requirement is of highlighting of horizontal column as well along with the vertical one when the the cursor is placed on particular cell.

    Attached is the display of  the Image from part of the Schedular in browser. Suppose now if the cursor is placed on 52 CW only particular row is highlighted ,the requirement is of highlighting of columns as well paralleled.

    Below is the code snippet for the RadSchedular 
    <telerik:RadPane ID="RadPane2" runat="server" OnClientResized="PaneResized" Height="100%"
          Scrolling="None" MinWidth="200" OnClientCollapsing="CollapseToMinWidth" OnClientBeforeExpand="ExpandFromMinWidth">
          <telerik:RadScheduler ID="SPScheduler" runat="server" SelectedView="TimelineView"
              FirstDayOfWeek="Monday" LastDayOfWeek="Friday" OverflowBehavior="Scroll" OnClientAppointmentMoveEnd="OnAppoinmentMoveEnd"
              OnClientAppointmentResizeStart="OnAppoinmentResizeStart" OnClientAppointmentInserting="OnAppointmentInserting"
              DataEndField="End" DataKeyField="ID" OnClientFormCreated="OnFormCreated" DataStartField="Start"
              DataSubjectField="Phase" CustomAttributeNames="Iteration,Servers,DBType" StartEditingInAdvancedForm="True"
              StartInsertingInAdvancedForm="True" OnAppointmentDelete="SPScheduler_AppointmentDelete"
              OnAppointmentInsert="SPScheduler_AppointmentInsert" OnAppointmentUpdate="SPScheduler_AppointmentUpdate"
              OnAppointmentDataBound="SPScheduler_AppointmentDataBound" OnAppointmentCommand="SPScheduler_AppointmentCommand"
              OnNavigationCommand="SPScheduler_NavigationCommand" OnTimeSlotCreated="SPScheduler_TimeSlotCreated"
              OnFormCreated="SPScheduler_FormCreated" ShowResourceHeaders="False" OnPreRender="SPScheduler_PreRender"
              OnNavigationComplete="SPScheduler_NavigationComplete" Height="100%" MinimumInlineFormHeight="500"
              MinimumInlineFormWidth="200" Skin="Simple">
              <DayView UserSelectable="false" />
              <WeekView UserSelectable="false" />
              <MonthView UserSelectable="false" />
              <TimelineView NumberOfSlots="35" SlotDuration="7.00:00:00" GroupingDirection="Vertical"
                  GroupBy="Order" ShowInsertArea="false" /,


      
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Jan 2014 Link to this post

    Hello,

    As far as I understand you have implemented a logic that highlights a row of cells when user hovers a specific time slot cell and you want to implement vertical highlighting. If this is not the functionality you are trying to achieve please explain what exactly you want to happen when a user hovers a specific time slot cell.


    Regards,
    Boyan Dimitrov
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kartikey
    Kartikey avatar
    11 posts
    Member since:
    Dec 2013

    Posted 09 Jan 2014 Link to this post

    Yes Boyan I want both the highlighting together when cursor is above a particular cell
  5. Kartikey
    Kartikey avatar
    11 posts
    Member since:
    Dec 2013

    Posted 09 Jan 2014 Link to this post

    Yes Boyan I want both the highlighting together when cursor is above a particular cell
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 13 Jan 2014 Link to this post

    Hello,

    Please find attached a sample project that shows such functionality.

    //JavaScript
    function pageLoad() {
     
        $telerik.$(".rsAllDayTable td").hover(function () {
            //gets the time slot object from the dom element where the cursor is and get the time slot object index
            var rawIndex = ($find("RadScheduler1").get_activeModel().getTimeSlotFromDomElement(this).get_index());
            //some parsing functionality in order to determine the column index of the timeslot
            var index = rawIndex.indexOf(":");
            var currentColumntIndex = rawIndex.substring(index + 1);
            var adf = parseInt(currentColumntIndex) + 1;
            //color all cells in the column in red color for testing purposes
            $telerik.$(".rsAllDayTable tr td:nth-child(" + adf + ")").css("background-color", "red");
            //same logic when user leaves the cell- it color the cells with the default color
        }, function () {
            var rawIndex = ($find("RadScheduler1").get_activeModel().getTimeSlotFromDomElement(this).get_index());
            var index = rawIndex.indexOf(":");
            var currentColumntIndex = rawIndex.substring(index + 1);
            var adf = parseInt(currentColumntIndex) + 1;
            $telerik.$(".rsAllDayTable tr td:nth-child(" + adf + ")").css("background-color", "#EEEEEE");
        });
        
    }


    Regards,
    Boyan Dimitrov
    Telerik
    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 the blog feed now.
  7. Kartikey
    Kartikey avatar
    11 posts
    Member since:
    Dec 2013

    Posted 21 Jan 2014 Link to this post

    Hello Boyan,

    The mentioned script is not working , the script which is responsible for highlighting of vertical columns is 

    $(".rsAllDayRow").on("mouseenter", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "LightBlue");
        $(gridRow).children().css("background-image", "none");
    })
    $(".rsAllDayRow").on("mouseleave", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "inherit");
        $(gridRow).children().css("background-image", "inherit");
    })
    $(".rgRow").on("mouseenter", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "LightBlue");
        $(gridRow).children().css("background-image", "none");
    })
    $(".rgRow").on("mouseleave", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "inherit");
        $(gridRow).children().css("background-image", "inherit");
    })


    Also, the highlighting of headers is not working in the demo provided, kindly let me know if there's a solution where relevant headers columns are also getting highlighted.

    Thanks in Advance
  8. Kartikey
    Kartikey avatar
    11 posts
    Member since:
    Dec 2013

    Posted 23 Jan 2014 Link to this post

    Also If I'm clubbing both the scripts the moved out cells in horizontal columns are fading back to #EEEEEE, whereas the requirement is of Lightblue to be implemented in both sides and the selected cell should be higlighted

    This is the snippet of script

    $telerik.$(".rsAllDayTable  td").hover(function () {
        //gets the time slot object from the dom element where the cursor is and get the time slot object index
        var rawIndex = ($find('<%=SPScheduler.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
        //some parsing functionality in order to determine the column index of the timeslot
        var index = rawIndex.indexOf(":");
        var currentColumntIndex = rawIndex.substring(index + 1);
        var adf = parseInt(currentColumntIndex) + 1;
        //color all cells in the column in red color for testing purposes
        $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").css("background-color", "LightBlue");
        //same logic when user leaves the cell- it color the cells with the default color
    }, function () {
        var rawIndex = ($find('<%=SPScheduler.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
        var index = rawIndex.indexOf(":");
        var currentColumntIndex = rawIndex.substring(index + 1);
        var adf = parseInt(currentColumntIndex) + 1;
        $telerik.$(".rsAllDayTable tr td:nth-child(" + adf + ")").css("background-color", "#EEEEEE");
     });
     
     
    $(".rsAllDayRow").on("mouseenter", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "LightBlue");
    })
    $(".rsAllDayRow").on("mouseleave", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "#EEEEEE");
    })
    $(".rgRow").on("mouseenter", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "LightBlue");
    })
    $(".rgRow").on("mouseleave", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "#EEEEEE");
    })

    In the given screenshot I Placed my cursor on CW10 and moved to 5 , as visible in the image the Cells from 5 to 10 changed back to white, whereas the requirement is that of them to remain LightBlue only. 

    Thanks in advance
  9. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 24 Jan 2014 Link to this post

    Hello,

    Please try the following suggestion in order to color the vertical and horizontal table cells and the header cell as well:

    //JavaScript
    function pageLoad() {
         $telerik.$(".rsAllDayTable  td").hover(function () {
             //gets the time slot object from the dom element where the cursor is and get the time slot object index
             var rawIndex = ($find('<%=RadScheduler1.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
             //some parsing functionality in order to determine the column index of the timeslot
             var index = rawIndex.indexOf(":");
             var currentColumntIndex = rawIndex.substring(index + 1);
             var adf = parseInt(currentColumntIndex) + 1;
             //color all cells in the column in light blue color for testing purposes ( the customClass does have background color set to light blue)
             $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").addClass("customClass");
             //this colors the entire row in light blue color
             $telerik.$(this.parentElement).css("background-color", "LightBlue");
             //color the header cell in light blue color as well
             $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "LightBlue");
     
         }, function () {
             var rawIndex = ($find('<%=RadScheduler1.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
             var index = rawIndex.indexOf(":");
             var currentColumntIndex = rawIndex.substring(index + 1);
             var adf = parseInt(currentColumntIndex) + 1;
             $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").removeClass("customClass")
             $telerik.$(this.parentElement).css("background-color", "#EEEEEE");
             $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "#ECECEC");
         });
     }

    //css
    <style type="text/css">
           .customClass {
               background-color:lightblue;
           }
       </style>

    Please find attached a sample page that implements this approach.



    Regards,
    Boyan Dimitrov
    Telerik
    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 the blog feed now.
  10. Kartikey
    Kartikey avatar
    11 posts
    Member since:
    Dec 2013

    Posted 24 Jan 2014 Link to this post

    Hello Boyan,

    The given script is working fine but there's a small problem when user plans a event and hovers the mouse over that. 
    What happens the highlighting jumps to the first column of the schedular to the left
  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Jan 2014 Link to this post

    Hello,

    I would like to clarify that your observations are correct. Please add the highlighted code in yellow in order to avoid this behavior:
    //JavaScript
    $telerik.$(".rsAllDayTable td").hover(function () {
             if (($telerik.$(this).find(".rsAptContent").length) != 0) {       
                 return false;
             }
    ........



    Regards,
    Boyan Dimitrov
    Telerik
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  12. Kartikey
    Kartikey avatar
    11 posts
    Member since:
    Dec 2013

    Posted 30 Jan 2014 in reply to Boyan Dimitrov Link to this post

    Sorry Boyan the given change is not working, the only thing which it's able to do is to stop cursor to jump to the first, but still the highlighting is getting invisible when the mouse is hovered over the planned cell.

    I tried with the demo project also provided by you , but the same thing is reiterating over there.
    Below is the snippet of the entire script for better clarity.

    $(".rsAllDayRow").on("mouseenter", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "LightBlue");
        $(gridRow).children().css("background-image", "none");
    })
    $(".rsAllDayRow").on("mouseleave", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "inherit");
        $(gridRow).children().css("background-image", "inherit");
    })
     
    $(".rgRow").on("mouseenter", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "LightBlue");
        $(gridRow).children().css("background-image", "none");
    })
    $(".rgRow").on("mouseleave", function myfunction() {
        var gridRow = "tr[uniqueID='" + $(this).attr("uniqueID") + "']";
        $(gridRow).children().css("background-color", "inherit");
        $(gridRow).children().css("background-image", "inherit");
    })
     
    $telerik.$(".rsAllDayTable  td").hover(function () {
        //gets the time slot object from the dom element where the cursor is and get the time slot object index
        var rawIndex = ($find('<%=SPScheduler.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
        //some parsing functionality in order to determine the column index of the timeslot
        var index = rawIndex.indexOf(":");
        var currentColumntIndex = rawIndex.substring(index + 1);
        var adf = parseInt(currentColumntIndex) + 1;
        if (($telerik.$(this).find(".rsAptContent").length) != 0) {
            return false;
             
         }
        //color all cells in the column in light blue color for testing purposes ( the customClass does have background color set to light blue)
        $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").addClass("SchedulerHoveredStyle");
        //color the header cell in light blue color as well
        $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "LightBlue");
     }, function () {
        var rawIndex = ($find('<%=SPScheduler.ClientID %>').get_activeModel().getTimeSlotFromDomElement(this).get_index());
        var index = rawIndex.indexOf(":");
        var currentColumntIndex = rawIndex.substring(index + 1);
        var adf = parseInt(currentColumntIndex) + 1;
        $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").removeClass("SchedulerHoveredStyle")
        $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "rgb(228, 228, 228)");
    });
  13. Kartikey
    Kartikey avatar
    11 posts
    Member since:
    Dec 2013

    Posted 30 Jan 2014 in reply to Kartikey Link to this post

    The requirement is of highlighting to be continued in the same manner if either the mouse is hovered over an empty cell or a filled cell
  14. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 31 Jan 2014 Link to this post

    Hello,

    I would like to clarify that this custom highlight functionality could not be achieved when user hovers on an appointment (filled cell). This is due to some appointment rendering and nesting of the DOM elements specifics of the Timeline view does. I am afraid that the only solution to this requirement is to highlight the rows and columns of the hovered time slot (cell), but not an appointment

    Regards,
    Boyan Dimitrov
    Telerik
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  15. Farjana
    Farjana avatar
    1 posts
    Member since:
    May 2013

    Posted 19 Mar 2014 Link to this post

    Hi Boyan,

    I have been working on the above mentioned issue. After analysis, I have found that whenever you call the hover function of "td", getTimeSlotFromDomElement returns correct index only if it is an empty slot. When there is an appointment inside a time slot,
    $find("RadScheduler1").get_activeModel().getTimeSlotFromDomElement(this).get_index()
    method always returns "0:0", thats why always the first column is getting highlighted.

    To avoid this, there is another method, getTimeSlotForAppointment,
    which can be called on each appointment hover as follows,

    scheduler.get_appointments().forEach(function (app) {
                    app.get_element().onmouseover = function () {
                        var rawIndex = scheduler.get_activeModel().getTimeSlotForAppointment(app).get_index();
                        var index = rawIndex.indexOf(":");
                        var currentColumntIndex = rawIndex.substring(index + 1);
                        var adf = parseInt(currentColumntIndex) + 1;
                        //remove previous highlighting if retained
                        $telerik.$(".rsAllDayTable  tr td:nth-child(" + parseInt(currentColumntIndex) + ")").css("background-color", "#EEEEEE");
                        $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + parseInt(currentColumntIndex) + ") div").css("background-color", "rgb(228, 228, 228)");
     
                        //color all cells in the column in light blue color for testing purposes ( the customClass does have background color set to light blue)
                        $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").addClass("SchedulerHoveredStyle");
                        //this colors the entire row in light blue color
                        $telerik.$(((this.parentElement).parentElement).parentElement).css("background-color", "LightBlue");                   
                        //color the header cell in light blue color as well
                        $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "LightBlue");
     
                        appHover = true;
                    };
                    app.get_element().onmouseout = function () {
                        appHover = false;
                        var rawIndex = scheduler.get_activeModel().getTimeSlotForAppointment(app).get_index();
                        var index = rawIndex.indexOf(":");
                        var currentColumntIndex = rawIndex.substring(index + 1);
                        var adf = parseInt(currentColumntIndex) + 1;
                        $telerik.$(".rsAllDayTable  tr td:nth-child(" + adf + ")").removeClass("SchedulerHoveredStyle");
                        $telerik.$(((this.parentElement).parentElement).parentElement).css("background-color", "#EEEEEE");                   
                        $telerik.$(".rsHorizontalHeaderTable th:nth-child(" + adf + ") div").css("background-color", "rgb(228, 228, 228)");
                    };
                });

    this helps to highlight the column even if you hover over appointment.  See attached screenshot
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017