How to customize Grid dropdown and popup

[KINS]

I have an sfgrid control in my web application.I would like to customize below points in grid cell.Please check my comments in below screencast and advise how to do this.

1.Dropdown (refer screencast)

2.Popupmenu (refer screencast)

3.perfect scrollbar in grid (refer https://codepen.io/amugbl4/pen/dyPQNmP )

https://www.screencast.com/t/F8NjPvTuaf4

[Vignesh Natarajan]

Hi KINS,  

 

Thanks for contacting Syncfusion support.  

 

Query: “I have an sfgrid control in my web application.I would like to customize below points in grid cell. .Dropdown && Popupmenu ” 

 

We have achieved your requirement using ColumnTemplate feature of the Grid. Using ColumnTemplate, we can customize the contents to be displayed inside the Grid cell. So we have rachieved your requirement by rendering the DropDownList component with ItemTemplate support and DropDownMenuButton component. Kindly refer the below sample for your reference  

 

Sample: https://www.syncfusion.com/downloads/support/forum/169747/ze/DataGrid_Server-1477867939.zip 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template – to display custom components in Grid column 

https://blazor.syncfusion.com/documentation/dropdown-list/templates#item-template – to show Dropdown with icons 

https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started - to display dropdown menu in column 

 

Query: “perfect scrollbar in grid” 

 

We would like to inform you that, we have used browser scroller to scroll through the Grid contents. So we suggest you to customize the  Grid browser scroller using the below styles.  

 

<style> 

    /*to show icon in dropdown menu*/ 

    .e-settings::before { 

        content: '\e679'; 

    } 

    /*to customize the grid browser scrollbar*/ 

    .e-grid.sf-grid .e-gridcontent .e-content.e-yscroll { 

        overflow: hidden; 

    } 

  

        .e-grid.sf-grid .e-gridcontent .e-content.e-yscroll:hover { 

            overflow-y: scroll !important; 

            overflow-x: scroll; 

        } 

</style> 

 

 

Kindly refer the sample attached in the above query for your reference. Please get back to us if you have further queries.  

 

 

Regards, 

Vignesh Natarajan  

[KINS]

Thanks for reply..

for query 3:-

I need scrollbar in grid in below link fomat

https://ngx-scrollbar-v4.netlify.app/

and also is it possible to show "setting icon" when hover the mouse in grid column ??

https://www.screencast.com/t/OgXLju4e

[KINS]

Please help....

and also I am going to reduce height of grid row.I have tried below css class ,its works fine as per my requirement but when I add template column (as per above code),then its not working.Please check the below css and advise the same.

  .e-grid .e-rowcell {

        border-style: solid;

        border-width: 1px 0 0 0;

        display: table-cell;

        font-size: 10px;

        font-family: Helvetica !important;

        line-height: 18px;

        overflow: hidden;

        padding: 2px 21px;

        vertical-align: middle;

        white-space: nowrap;

        width: auto;

    }

[Jeevakanth Palaniappan]

  

Hi Kins, 

Please find the details of your query below, 

Query 1: I need scrollbar in grid in below link format 

 

We have checked the provided link and found that each container has different types of scrollbar’s. But by default we will render the browser scrollbar only. This is the default behavior. The browser scrollbar can be customized based on your scenario so we suggest you to customize the scrollbar by using the CSS. 

 

Query 2: is it possible to show "setting icon" when hover the mouse in grid column ?? 

 

We have modified your code based on your scenario. Please refer the below code snippet and the sample for your reference. 

 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid_Server1010527919 

 

        <GridColumn TextAlign="TextAlign.Center" Width="50"> 

            <Template> 

                @{ 

                    var ord = context as EmployeeData; 

                                <div class="actionbtn"> 

                                    <SfDropDownButton IconCss="e-icons e-settings"> 

                                        <DropDownMenuItems> 

                                            <DropDownMenuItem Text="Edit"></DropDownMenuItem> 

                                            <DropDownMenuItem Text="Delete"></DropDownMenuItem> 

                                            <DropDownMenuItem Text="Mark as Read"></DropDownMenuItem> 

                                            <DropDownMenuItem Text="Like Message"></DropDownMenuItem> 

                                        </DropDownMenuItems> 

                                    </SfDropDownButton> 

                                </div> 

                } 

            </Template> 

        </GridColumn> 

 

 

 

<style> 

    /*to show icon in dropdown menu*/ 

    .e-settings::before { 

        content: '\e679'; 

    } 

    /*to customize the grid browser scrollbar*/ 

    .e-grid.sf-grid .e-gridcontent .e-content.e-yscroll { 

        overflow: hidden; 

    } 

 

        .e-grid.sf-grid .e-gridcontent .e-content.e-yscroll:hover { 

            overflow-y: scroll !important; 

            overflow-x: scroll; 

        } 

    .actionbtn { 

        display: none; /*initial hidden*/ 

    } 

 

    .e-row:hover .e-rowcell .actionbtn { 

        display: block; /*Showing the action item while hovering*/ 

    } 

</style> 

 

Query3 : I am going to reduce height of grid row.I have tried below css class ,its works fine as per my requirement but when I add template column (as per above code),then its not working 

 

We are currently validating your query and so we will update the further details in two business days. Until then we appreciate your patience. 

 

Regards, 

Jeevakanth SP. 

[KINS]

Thanks

Can u help me query1 and query3 by tomorrow??

Please...help

It's my top priority in my tasks

also please check my comments for hivering in below screencast

https://www.screencast.com/t/4ZsczNeYQ12S

[Vignesh Natarajan]

Hi KINS,  

 

Query: “Can u help me query1 and query3 by tomorrow??” 

 

As mentioned in the previous update, Grid scrollbar uses browsers native scrollbar, so that it can be customized by applying the style to Grid scrollable content. As an example we have customized the Grid scrollbar. Similarly you can customize the Grid scroll handle as per your requirement.  

 

Also while using the different component inside the  Grid column template, we need to customize the component inside the template also to reduce the Grid height. We have modified the sample previous provided sample to change the row height along with template column using media query CSS.  

 

Kindly refer the below sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/169747/ze/DataGrid_Server1204084923.zip 

 

Refer the below screenshot for above sample.  

 

 

   

Query: “also please check my comments for hivering in below screencast” 

 

We have analyzed your query and we would like to inform you that we have achieved your requirement using the row selection CSS applied to that particular row. (i.e.) when a record is selected specific class name will be added to specific row. Using that class name we have displayed the option icon in that row. Kindly refer the sample attached in above query. 

 

Kindly get back to us if you have further queries.    

 

Regards, 

Vignesh Natarajan  

 

[KINS]

Thanks

[KINS]

see the below screencast and for row height issue and attached source code with global css file

https://www.screencast.com/t/bqQ1yMfyDO

Attachment: GridHeight_94b16ec7.rar

[Vignesh Natarajan]

Hi KINS,  

 

Query: “see the below screencast and for row height issue and attached source code with global css file” 

 

We have analyzed the reported issue by preparing a sample using your code example and theme file and we are able to reproduce one issue related to increase in height of record while hovering in it. This is due to setting icon displayed in Grid cell. We have resolved the reported issue by applying the CSS Styles to it.  

 

Refer the below screenshot for your reference 

 

 

 

Kindly refer the below modified sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169747/ze/DataGrid_Server_Cust1288078009.zip 

 

If you are facing further queries, kindly get back to us with more details about the issue.  

 

Regards, 

Vignesh Natarajan  

[KINS]

thanks working fine..

i need scrollbar in grid with color in attached format..

Attachment: scroolbar_9e7538db.zip

[Vignesh Natarajan]

Hi KINS,  

 

Thanks for the update.  

 

Query: “i need scrollbar in grid with color in attached format..” 

 

As mentioned in the previous updates, Native browser scrollbar can be customized using the CSS styles. Kindly refer the below code example and screenshot for your reference 

 

/*to style to browser scrollbar*/ 

   /* width */ 

   .e-grid .e-gridcontent .e-content::-webkit-scrollbar { 

       width: 10px; 

   } 

  

   /* Track */ 

   .e-grid .e-gridcontent .e-content::-webkit-scrollbar-track { 

       box-shadow: inset 0 0 5px grey; 

       border-radius: 10px; 

   } 

  

   /* Handle */ 

   .e-grid .e-gridcontent .e-content::-webkit-scrollbar-thumb { 

       background: grey; 

       border-radius: 10px;         

   } 

 

 

 

 

Kindly get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan