This is a migrated thread and some comments may be shown as answers.

Enable/Disable Grid scrolling

7 Answers 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Kaleem Khan
Top achievements
Rank 1
Kaleem Khan asked on 04 Jan 2010, 09:43 PM
I have a jQuery contextMenu in my Grid upon right click. When right clicked on a row and menu displayed, I want to disable Grid scrolling and enable when Menu is gone. Is there any client side function to diable scrolling?

Further, it would be nice to have a link to any client side API documentation for MVC controls.

7 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 05 Jan 2010, 08:27 AM
Hi Kaleem Khan,

There is currently no public API for enabling and disabling grid scrolling. However it is easy to achieve the same using the following JavaScript code:

<script type="text/javascript">
function notScrollable() {
     var $grid = $('#Grid');
      
     $grid.find('.t-grid-content')
             .css({overflow:'visible', height:'auto'})
          .end()
          .find('.t-grid-header')
             .css('paddingRight', 0)
             .find('th:last')
                 .removeClass('t-last-header')
             .end()
          .end()
          .find('table')
             .css('borderStyle', 'none');
}
 
function scrollable() {
     var $grid = $('#Grid');
      
     $grid.find('.t-grid-content')
             .css({overflow:'auto', height:'200px'})
          .end()
          .find('.t-grid-header')
             .css('paddingRight', '18px')
             .find('th:last')
                 .addClass('t-last-header')
             .end()
          .end()
          .find('table')
             .css('borderStyle', 'solid');
}
</script>

Replace '#Grid' with the Name of your grid (don't forget the # at the beginning).

The Client API is listed in a section with the same name e.g.:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api.html

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Kaleem Khan
Top achievements
Rank 1
answered on 05 Jan 2010, 05:08 PM
Hi Atanas,

I tried these function but didn't change anything. Is it because my Grid is binding server side?

Thanks.
0
Georgi Krustev
Telerik team
answered on 07 Jan 2010, 02:03 PM
Hi Kaleem Khan,

Could you please post your current implementation? Thus we will observe it and advice you further.

Kind regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Kaleem Khan
Top achievements
Rank 1
answered on 07 Jan 2010, 02:46 PM
Hi, Here is the Grid code:

 <%Html.Telerik().TabStrip()  
           .Name("TabStrip")  
           .HtmlAttributes(new { style = "width:700px; float:right;" })  
           .Items(tabstrip => 
               {  
                   tabstrip.Add()  
                       .Text("Categories")  
                       .Content(() => Html.Telerik().Grid<Core.Domain.Category>(Model)                                                      
                                                    .Name("Grid")                                                      
                                                    .HtmlAttributes(new { style = "width:100%; font-size:8pt"id = "commGrid" })  
                                                    .RowAction(row => { row.HtmlAttributes.Add("class", "communityRow");   
                                                                        row.HtmlAttributes.Add("id", row.DataItem.ID );                                                           
                                                                      }  
                                                              )                                                      
                                                    .Columns(columns =>   
                                                                      {     
                                                                          columns.Add(c => 
                                                                                              {%><img src="<%=Url.Content("../../../Content/Images/folder_closed.png") %>/> 
                                                                                             <%=Html.ActionLink(c.Description, "Index", "Home", new { id = c.ID }, null)%> 
                                                                                           <% }  
                                                                                          ).Width(200)  
                                                                                          .Title("Description");                                                                            
                                                                          columns.Add(c => 
                                                                                          {%><img src="<%=Url.Content("../../../Content/Images/feed-icon.gif") %>"/> 
                                                                                           <%   
}  
                                                                                      )  
                                                                                       .Title("Feed");  
                                                                          columns.Add(c => c.CategoryStatistics.TopicCount).Title("Topics");  
                                                                          columns.Add(c => c.CategoryStatistics.LastMessageDate).Title("Last Post");  
                                                                      }  
                                                            )  
                                                    .ClientEvents(events => events.OnLoad("onLoad"))  
                                                    .Sortable()  
                            .Scrollable(scrolling => scrolling.Height(250))   
                            .Pageable()  
                            .Render()  
                                           );  
                   tabstrip.Add()  
                       .Text("Recent Content")  
                       .Content(() => Html.Telerik().Grid<Core.Domain.Category>(Model)  
                              .Name("Grid2")  
                                      .HtmlAttributes(new { style = "width:100%; font-size:8pt" })  
                              .Columns(columns => 
                                      {  
                                          columns.Add(c => 
                                          {%><img src="<%=Url.Content("../../../Content/Images/folder_closed.png") %>/> 
                                           <%=Html.ActionLink(c.Description, "Index", "Home", new { id = c.ID }, null)%> 
                                           <% }).Width(200)  
                                       .Title("Description");  
                                          columns.Add(c => 
                                          {%><img src="<%=Url.Content("../../../Content/Images/feed-icon.gif")%>/> 
                                           <% }).Title("Feed");  
                                       columns.Add(c => c.CategoryStatistics.TopicCount).Title("Topics");  
                                       columns.Add(c => c.CategoryStatistics.LastMessageDate).Title("Last Post");  
                                      }).Sortable()  
                            .Scrollable(scrolling => scrolling.Height(200))  
                            .Pageable()  
                            .Render());  
                   tabstrip.Add()  
                       .Text("Your Recent Content")  
                       .Content(() => {%> 
                          
                    <% });  
 
               }  
        ).SelectedIndex(0)  
         .Render(); %> 
0
Atanas Korchev
Telerik team
answered on 07 Jan 2010, 02:56 PM
Hi Kaleem Khan,

The two JavaScript functions need to be executed to make the grid scrollable or not. I don't see in your code when you are invoking them. For your convenience I have attached a sample application showing how to enable/disable scrolling.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Andrew
Top achievements
Rank 1
answered on 26 Apr 2012, 06:48 PM
could you provide the same "scrollable" and "nonScrollable" javascript functions for doing the same in a RadTreeView?
0
Dimo
Telerik team
answered on 27 Apr 2012, 09:04 AM
Hi Andrew,

In the case of the MVC TreeView (it is not called RadTreeView), the approach is a lot simpler, because there is no unique HTML output required for the scrollable and non-scrollable mode. You can simply apply or remove the width/height of the component's wrapper (div.t-treeview). An overflow:auto style needs to be applied when dimensions are set, but you can also leave it for both cases.

All the best,
Dimo
the Telerik team
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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
Tags
Grid
Asked by
Kaleem Khan
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Kaleem Khan
Top achievements
Rank 1
Georgi Krustev
Telerik team
Andrew
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or