GridGroupingControl - Search Box customizations

[Vijay Jayaraj]

Hi,

Can we have the Search Box in the left side of the GridGroupingControl(ASP.Net)? Currently when i set the value ShowSearchBox="true", it is displayed at the top right of the grid control.

I would like to place it at the left side so that users
need not scroll the grid to find the search box.

Pls let me know the solution.

Thanks,
Vijay

[Ranjithkumar R G]

Hi Vijay,

Thanks for using Syncfusion products.

Your requirement to define search box in left side of the grid after postback can be achieved by using Sys.Application.add_load event in the client side and also change the direction in the css. Please refer the below code snippet.

[Javascript]

Sys.Application.add_load(function () {
var searchTR = $('.GridOffice2007BlueGroupCaption').find('tbody:first').children('tr:first');
var searchTD = $(searchTR).children('td:last');
var clone = $(searchTD).clone();
$(searchTD).remove();
$(searchTR).prepend(clone);
});

[CSS]

.GridOffice2007BlueGroupCaption > table > tbody > tr > td
{
direction:ltr;
}

.GridOffice2007BlueGroupCaption
{
direction:rtl;
}

Please refer to the below link to download the sample application.

http://www.syncfusion.com/downloads/Support/DirectTrac/89456/GridSearchBox1861688851.zip

Please let me know if any concern.

Regards,
Ranjithkumar

[Ranjithkumar R G]

Hi Vijay,

Please ignore the previous update.


Your requirement to define search box can be achieved by changing the direction in the css. Please refer the below code snippet.


[CSS]

.GridOffice2007BlueGroupCaption > table > tbody > tr > td
{
direction:ltr;
}

.GridOffice2007BlueGroupCaption
{
direction:rtl;
}

Please refer to the below link to download the sample application.

http://www.syncfusion.com/downloads/Support/DirectTrac/89456/GridSearchBox1861688851.zip

Please let me know if any concern.

Regards,
Ranjithkumar

[Vijay Jayaraj]

Thanks Ranjith, that worked however the caption text was not properly visible.

[Ranjithkumar R G]

Hi Vijay,

Thanks for your update.

We are sorry for inconvenience caused. We are unable to reproduce the issue. We have prepared a simple sample and screenshot of the output and the same can be downloaded from the following links.

Sample link:
http://www.syncfusion.com/downloads/Support/DirectTrac/84774/GridSearchBox1138613261.zip

Screenshot link:
http://www.syncfusion.com/downloads/Support/DirectTrac/84774/Caption-2008219776.zip

Could you please try the above sample and get back to us whether you are able to reproduce the issue? If not, could you please give more information or by reproducing the issue in the above sample so that we could sort out the issue and provide you with solution. The information provided would be of great help in resolving the issue.

Please let us know if any concerns.

Regards,
Ranjithkumar

[Vijay Jayaraj]

Hello Ranjith,

See the images attached. If we do group by then the group by titles are right aligned in the grid. This is because of the css, which is applied to bring the searchtextbox on to left side.

Appreciate your quick response. We should have only the search textbox on the left side but not any of the group by or filter text or caption text.

- Vijay



GroupBY_71bcda23.zip

[Vijay Jayaraj]

Hi Ranjith,

Group by titles and search text box should be left aligned.
No changes except the search text box on left side.

When i apply the css then i can see the search text box on left side however the group by titles are right aligned.
Group by titles should be in left side only, also if the grid width is large or if it is having more columns then the caption text is aligned right because of the css change.

Caption Text should be just next to the search text box on the left side.


In your sample if you can add more columns to the grid and test the css solution then you can clearly observe the problem.

Thanks for your support.



- Vijay

[Yogeshwaran]

Hi Vijay,

We regret for the inconvenience caused.

Query #1: Group by titles and search text box should be left aligned.

Your requirement to align the search box and group by title without interference can be achieved by using id selectors in css. Please refer the following code snippets.
[CSS]

  tr[id *="GTR~-1"] .GridOffice2007BlueGroupCaption > table > tbody > tr > td
     {
         direction:ltr;
     }
     
    tr[id *="GTR~-1"] .GridOffice2007BlueGroupCaption 
     {
         direction:rtl;
     }

Query #2: Caption Text should be just next to the search text box on the left side.

This can be achieved by using “TableLayoutMode” as fixed in grid grouping control and set width to every column . please refer the following code snippet.

    
    . . . . . . . . . 
     
      
      
      
      
      
      
     
    . . . . . . . . . 
    

For your convenience we have created the sample and the same can be downloaded from below link.

GridSearchBox112706238.zip

Please let us know if you have any concerns.

Regards,
Yogesh R