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.
Further, it would be nice to have a link to any client side API documentation for MVC controls.
7 Answers, 1 is accepted
0
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:
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.
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.
I tried these function but didn't change anything. Is it because my Grid is binding server side?
Thanks.
0
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.
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
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.
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
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
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.