Vertical Scroll for Records

[Dirk Hoffmann]

Hi,

I use the ASP.NET GridGroupingControl from the Essential Studio (Version 11.4.0.26) on my page.

How can I show the vertical scrollbar to my users. I've seen an example in the Dashboard (Ajax Grid - Product Showcase - Performance). That grid shows the vertical scrollbar. How can I show it in mine? Do I have to use Ajax for it? (In the Moment, I don't use Ajax).

Please give me an advice.

Thank you!

[Eswari S]

Hi Dirk,

 

Thank you for using Syncfusion products.

 

In normal grid itself ,we having support for scroller. We suggest you to set width to grid. Please refer to the following code snippets:

 

<syncfusion:GridGroupingControl ID="ggc Width="200px">   // set width to Grid

</syncfusion:GridGroupingControl>     

 

Please find sample from the attachment for your convenience.

 

Also , please check online sample link:

 

http://asp.syncfusion.com/demos/ui/gridgrouping/Columns%20and%20Rows/Scrolling/cs/FrozenColsandRows.aspx

 

Let us know if you have any queries.

 

Regards,

Eswari S
Attachment: Basic_Sample_319bc021.zip

[Dirk Hoffmann]

Thank you!

Sometimes it's too Close to see the solution.

It works now.

[Eswari S]

Hi Dirk,

 

Thanks for your update.

 

Happy to hear that your issue has been resolved.

 

Please let us know if you have any queries.

 

Regards,

Eswari S

 

[Dirk Hoffmann]

I have one more thing that came up yesterday.

When I set the height of the GridGroupingControl, the vertical scroll is shown in the whole length of the grid's height, even if there are no records in the ggrid.

The grid looks strange with a long, disabled vertical scrollbar and no records in it. Is there a way to show the scroll bar only when it's required, because of the amount of records?

Thanks again for an advice!

[Eswari S]

Hi Dirk,

 

Sorry for the inconvenience caused.

 

We were unable to reproduce the issue. If the grid height is more than the grid records then the vertical scrollbar will not be created. Could you modify the given sample to reproduce the issue and provide more information about the issue like “any specific browser IE (with version) /Mozilla”?

 

Please check with the screen shots in browsers from attachment:

 

 

IE( v10 – v8)                                                                                                        Mozilla

                                            

 

Please try this and let us know if we misunderstood any of your requirement so that we can analyze based on that and provide you better solution.

 

Regards,

Eswari S

 

Attachment: Basic_Sample_aa05663d.zip

[Eswari S]

Hi Dirk,

 

Please find screenshots attachment from the following link:

 

http://www.syncfusion.com/downloads/support/directtrac/general/ScreenShots-964874752.zip

 

Please let us know if you have any queries.

 

Regards,

Eswari S

[Dirk Hoffmann]

Hi,

I can reproduce the problem in your sample project "Basic_sample".

I tested it with Mozilla Firefox 27.0.1 and IE 11.0.9600.16518.

I just added:

this.ggc.Height = 300;

If you put comments in front of the last several added rows, then you have less rows than the given height.

The vertical scroll is shown, but is disabled of course.

I added two screenshots.

Attachment: Screenshots_7c146b61.zip

[Eswari S]

Hi Dirk,

 

Thanks for your update.

 

As you have mentioned , by setting height as 300 , we were unable to reproduce the issue. Could you please check with the video demonstration of the issue from the attachment.

 

Could you please share the details about your system resolution/ information about the system and provide information about whether you are setting any width to parent element of grid so that we can analyze based on that and provide you better  solution.

 

The information provided would be of great help in resolving the issue.

 

Let us know if you have any queries.

 

Regards,

Eswari S

Attachment: Video_139f1ef5.zip

[Dirk Hoffmann]

Hi,

I have found the reason why the vertical scroll bar is shown.

In my project, I set the FrozenRows property to 3, so that the header rows stay visible to the user, when scrolling down the grid.

this.ggc.FrozenRows = 3;

I have another incident in the direct trac, with trimming of text in cells...

As soon as I set FrozenRows, the width of cells gets smaller an the text is flooding in the cell to the right.

I think the solution to all my problems is the example for Performance with Ajax Grid:

http://asp.syncfusion.com/demos/ui/gridgrouping/Ajax%20Grid/Product%20Showcase/Performance/cs/Performace.aspx

In that example, the vertical scrollbar starts under the header row. It is only shown on the right of the data records, so I won't need to set frozenRows.

How can I get that kind of vertical scrollbar in my non Ajax grid?

[Eswari S]

Hi Dirk,

 

Thanks for your update.

 

Scroll bar in normal grid will be displayed from Header as per behaviour. We suggest you to use Ajax Grid to achieve your requirement. Please refer to the following code snippets:

 

[aspx]

 

<syncfusion:GridGroupingControl ID="ggc" BorderCollapse="Separate" AjaxActionMode="Server"

           EnableAjaxMode="true" AjaxAutoformat="Marble">

</syncfusion:GridGroupingControl>

 

[CSS]

 

.RowCell

 {

     text-overflow: ellipsis;  // set text-overflow for trimming cells

 }

       

 .Syncfusion-Grid-Core .ScrollOn

 {

     overflow-y: auto ! important;

 }

 

Please find sample for your convenience from the attachment.

 

Please try this and let us know if you have any other queries.

 

Regards,

Eswari S

Attachment: Basic_Sample_(3)_682ecced.zip

[Dirk Hoffmann]

Ok, I have now changed to AJAX Grid.

The Scrollbar is shown when supposed to an also the text in the cells are displayed correctly.

But now I have other problems.

Without AJAX I was able to select a record in the grid an get a PostBack to the aspx-Page. I Need that because a second Grid on the same Page needs to have the ID from the selected record in the first grid to select child-records.

Now, I use AJAX Grid with UpdatePanel, but I'm not getting Events to my aspx-Page anymore.

I checkd the examples and the Forum for a solution, but I didn't find one.

How can I solve my Problem?

Thanks for an advice!

[Eswari S]

Hi Dirk,

 

Thanks for your update.

 

Your requirement can be achieved by sending __dopostback with selected records in ClientSideRecordClick event.

 

[aspx]

 

<syncfusion:GridGroupingControl ID="ggc" AjaxActionMode="Server"

            ClientSideOnRecordClick="clientclk">

        </syncfusion:GridGroupingControl>

 

[JavaScript]

 

function clientclk(sender, args) {

            __doPostBack("Selection", args.record.ID);

        }    

 

[CS]

 

protected void Page_Load(object sender, EventArgs e)

    {.  . .

        if (Request["__EVENTTARGET"] == "Selection")

        {

            int pKey = Convert.ToInt32(Request["__EVENTARGUMENT"]);

            var dataRows = GetData().Select("ID Like '" + pKey + " '");   // filter values using selected record ID value

            this.Selection(dataRows);

        }

    }

 

 

public void Selection(DataRow[] rows)

    {

        DataTable cloneTable = GetData().Clone();                 

 

        foreach(DataRow row in rows)

        {

            cloneTable.ImportRow(row);

        }

        this.GridGroupingControl1.DataSource = cloneTable;   // setting datasource to 2^nd grid

    }

   

For your convenience , please find sample from the attachment.

 

Please try this and let us know if you have any queries.

 

Regards,

Eswari S

Attachment: Basic_Sample_f8ef26c5.zip

[Dirk Hoffmann]

Thank you very much! The example works for me.

But there is still one more thing.

I tried to keep the selected record that initialized the postback, so that it is still selected after postback.

In my code behind, I have declared the SelectedRecordsChanged Event, an this method gets called, but when I set the CurrentRecord of the grid, it seems to be ignored.

Here is my code from the Event:

For i As Integer = 0 To Me.Grid.Table.Records.Count-1

If selectedID = Me.Grid.Table.Records(i).Item("ID") Then

Me.Grid.Table.CurrentRecord = Grid.Table.Records(i)

End If

Next

Is this the way, this can be handled or am I on the wrong path. Can you give me another example, how to do that?

Thanks!

[Dirk Hoffmann]

I have changed my code today, because I think that my requirements are not clearly described.

My detail or child GridGroupingControl is now nested in an UpdatePanel. My plan is to only update the child GridGroupingControl when a record of the master GridGroupingControl is selected. Then, only the child GridGroupingControl gets refreshed and I won't have my problem with the selected record in the master GridGroupingControl anymore.

In the UpdatePanel I placed a AsyncPostBackTrigger and set the ControlID to my master GridGroupingControl and the EventName to OnSelectedRecordsChanged.

I registered the master GridGroupingControl at the ScriptManager in my Page_Load.

When I call the Page I get an error that the Event named OnSelectedRecordsChanged was not found in the master GridGroupingControl.

I just want to select a record in my master GridGroupingControl and the update my child GridGroupingControl in the UpdatePanel by the selected ID of the master record that is selected.

Thanks for an advice!

[Eswari S]

Hi Dirk,

 

Thanks for your update.

 

We don’t have support for “OnSelectedRecordsChanged” event in Ajax Mode Grid. So we suggest you to use “ClientSideOnRecordClick” event. To maintain record selection while updating datasource of Second grid , we suggest you to use Ajax grid Json Mode to update the data source. Please refer to the following code snippets:

 

[JavaScript]

 

function clientclk(sender, args) {

            var jsonArr = [];

            var selectedCusID = sender.jsonModeMgr.get_dataSource()[args.row.rowIndex].CustomerID;  // get selected record CustomerID” value using rowIndex

            $("#hidFel").val = args.row.rowIndex;

            var data = sender.jsonModeMgr.get_dataSource();  // use jsonModeMgr.get_dataSource() method to get datasource of first grid

            data.filter(function (val, index) {

                if (val.CustomerID == selectedCusID)  //add json record by checking selected record value

                    jsonArr.push(val);

            });

            $find("GridGroupingControl2").jsonModeMgr.set_dataSource(jsonArr); // use jsonModeMgr.set_dataSource to set datasource of second grid

        }

 

[Aspx]

 

Set AjaxActionMode as Json  and Define JsonActionMapper for post action.

 

<syncfusion:GridGroupingControl ID="GridGroupingControl1"

AjaxActionMode="Json" JsonActionMapper="JsonPaging">

            </syncfusion:GridGroupingControl>

 

 

Also ,we request you check the following UG for Ajax Json Mode:

 

http://help.syncfusion.com/ug/asp.net/grid/default.htm#!documents/jsonmode1.htm

 

Please find sample from the attachment.

 

Please try this and let us know if you have any queries.

 

Regards,

Eswari S

 

Attachment: Sample_a7141a7e.zip