Filter window on document center

2 posts, 0 answers
  1. Yohan
    Yohan avatar
    32 posts
    Member since:
    Jan 2014

    Posted 17 Feb 2014 Link to this post


    I've noticed that pivot grid filter window displays relative to the pivot grid. I want to set the filter window on the center of the browser window. I've tried set_left,set_top client side functions with filter window OnClientShow event but it didn't work. Provide me with a code sample to achieve this. 

    Thanks and Regards,
  2. Venelin
    Venelin avatar
    352 posts

    Posted 20 Feb 2014 Link to this post

    Hello Yohan,

    Here I created an example implementation of the desired functionality.

    1. Subscribe to the OnPivotGridCreated client-side event:

    <ClientEvents OnPivotGridCreated="onPivotCreated"/>

    2. Define the event handler as follows:

    function onPivotCreated(sender, args) {
        setTimeout(function () {
            var pivotFilterWindow = $telerik.getElementByClassName(window, 'PivotGridWindow');
            if (pivotFilterWindow) {
       = 50 + '%';
       = -1 * pivotFilterWindow.offsetWidth/2 + 'px';
        if (sender.get_filterWindow()) {
            sender.get_filterWindow().add_dragStart(function () {
                $telerik.getElementByClassName(window, 'PivotGridWindow').style.marginLeft = 0;

    The handler consists two parts, in the first, in the timeOut we retrieve the DOM element of the widow and set its left and margin-left properties accordingly. The second where I attach a dragStart handler to the RadWindow control removes the negative margin on drag start in order to prevent the control from "jumping" while dragging.

    That's it, I also attach a test project, that you can review for further reference.

    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.
Back to Top