Questions on UI for ASP.NET AJAX Forum

1 answer

90 views

SharePoint Item Level Permission Buttons Issue

Hi Everyone,

I am trying to implement item level security in my application and i have run into an issue wherein i wish to hide a few of the controls in my grid view. Below are the complete details of my scenario,

I have list named as States which contains the following data

Washington - Item Permissions assigned - Adam has Write permissions
New York - Item Permissions assigned - Charles has Read permissions
Texas - No Permissions assigned to both the users

According the SharePoint object model when i try to fetch all the records, i get the data as per my requirement i.e. Adam is only able to view Washington and Charles is only able to view New York.

Now this data is shown in the gridview which has view,edit buttons against it.

i wish to trim these buttons according to the permissions of the user on the list items. Kindly let me know if there is a way to do it.

I was curious to know whether anyone has knowledge of what does SPSecurityTrimmedControl.PermissionContext property do? Does it apply security triming based on the current list item permission, if so how does it do it. please provide a sample

Regards,

Abhijit Narvekar

Sharepoint Integration

answered on 16 Mar 2012

1 answer

81 views

How do I disable commands on treeview

I want to only delete/update/copy/move on the grid side select not on the treeview node select. is there a way to do that?

FileExplorer

answered on 16 Mar 2012

3 answers

321 views

Html encoding of accented characters in file names

Hello,

When someone is using the Rad Editor and tries to add a link to a file whose name includes accented characters, the url gets html encoded.

I used the ASP.NET Editor Demo on your website and used the Upload File dialog of the Rad Editor to upload a PDF whose name included accented characters - çemplatés 2.pdf. I then used the same dialog to add a link to the editor to the file. It came out as this:
<a href="/aspnet-ajax/Editor/Img/UserDir/Marketing/çemplatés 2.pdf" target="_blank">

My question is why is the file name being html encoded? Shouldn't it be url encoded instead or not encoded at all?

And is there a way to prevent it from being html encoded?

Thanks,
Cameron

Editor

answered on 16 Mar 2012

3 answers

117 views

Filter by column

Hello

I have a RadGrid with 3 GridBoundColumn I need to configure the filter of the columns differently.

Ex: column "A" will filter by contain and column "B" will filter by equals.

how to solve it ?. I've tried everything.

thank you

Grid

answered on 16 Mar 2012

2 answers

183 views

RadDatePicker changes value upon postback

I have a RadDatePicker and a regular button to generate a postback on my page.

My RadDatePicker is configured so that the DisplayDateFormat of the DateInput is "MMMM, yyyy" which shows month and year when the control does not have focus - which is key to the problem described below.

First, I select a date via the picker, say "23/01/2009"... the box properly displays "January, 2009"...

Next I click the button which performs a postback.

Now with our 2010.1.519.35 version of the Telerik.Web.UI.dll nothing special happens: the date stays '23/01/2009'.

However, with our 2011.1.315.40 version the date changes to "05/01/2009". It appears that the display text is being parsed upon postback (so 'January, 2009' becomes 05/01/2009 because it uses 05 from the current date 05/03/2012).

Also, when the RadDatePicker is set to AutoPostBack='true' (or when pressing return inside the date field) this does not affect the date like the button does.

I cannot believe this is intended, is it?

Calendar

answered on 16 Mar 2012

1 answer

136 views

Edit button outside grid

Hello everybody, i have one grid, and here's what i want.
I have one Edit button outside the grid, and when i click on this button, i wanna check if any item has updated, if any does, i will update that on my data table, if's not, doesnt change anything.
I tryed everything is possible and nothings helps me, the last tentative, i try to obtain my data in one foreach, e copy to one dataTable, and compare with the old dataTable, if has any changes, update, ifs not, do nothing. but withoutany success.

Someone knows how can i do that 'impossible' task?

<telerik:RadGrid ID="RadGrid2" runat="server" AllowMultiRowSelection="true" Width="300px"

OnNeedDataSource="RadGrid2_NeedDataSource" OnInsertCommand="RadGrid2_InsertCommand"

OnItemCreated="RadGrid2_ItemCreated">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="codigo" CommandItemDisplay="Top"

EditMode="InPlace">

<Columns>

<telerik:GridTemplateColumn>

<ItemTemplate>

<asp:CheckBox runat="server" ID="CheckBox1" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn HeaderText="Código" DataField="codigo" UniqueName="codigo"

ReadOnly="true" Display="true" ColumnEditorID="GridTextBoxColumnEditor1" />

<telerik:GridBoundColumn HeaderText="Descrição" DataField="descricao" UniqueName="descricao"

ColumnEditorID="GridTextBoxColumnEditor1" />

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowDblClick="RowDblClick" />

</ClientSettings>

</telerik:RadGrid>

<telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="180px" />

protected void btnEditar_Click(object sender, EventArgs e)

{

// what should i do here? ...

}

protected void RadGrid2_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridCommandItem)

{

e.Item.FindControl("RefreshButton").Visible = false;

e.Item.FindControl("RebindGridButton").Visible = false;

}

protected void RadGrid2_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

// Atribui dados a grid.

RadGrid2.DataSource = this.GridSource;

this.GridSource.PrimaryKey = new DataColumn[] { this.GridSource.Columns["codigo"] };

}

Grid

answered on 16 Mar 2012

1 answer

109 views

RadContextMenu ClientID in JS

Hi,
I've created a custom control, say,

public class ImageManager : HtmlGenericControl

{

public RadContextMenu ContextMenu { get; set; }

...

}

NO Apsx Form.
I'm trying now to pop this menu. it's been initialized properly
OnLoad shows valid ClientID, but when I'm using that ID as

var menuObjX = document.getElementById("xxxxxxxxxxxx");

there's no show() or showAt() methods they're 'undefined'

why would that be and how could you advise me to go around with ClientID in Client-Side JS without forms (no aspx no <%= %>).

regards,
Max

Menu

answered on 16 Mar 2012

3 answers

186 views

Clear all file inputs for radasync upload control

Hi Telerik Team,

I am trying to clear all the file inputs(all files that are uploaded) that are uploaded for RadAsync Upload control on Button click event,

My button click code is as follows:
<asp:Button ID="btnTest" runat="server" OnClientClick="return resetBatch();" Text="Reset Batch"/>

my javascript code is as follows:

function resetBatch() {
var upload = $find("<%= radBatchAttachment.ClientID %>");
var inputs = upload.getUploadedFiles();
for (i = inputs.length - 1; i >= 0; i--) {
upload.deleteFileInputAt(i);
}
return false;
}

But I am getting a error at line "var inputs = upload.getUploadedFiles();", Please find the error image in attachment "Error.png",
and RadAsyncUpload control is not clearing the files uploaded.

when I use the following approach using the function as follows:

function resetBatch() {
debugger;
var upload = $find("<%= radBatchAttachment.ClientID %>");
var count = upload._uploadedFiles.length;
for (var i = 0; i <= (count - 1); i++) {
upload.deleteFileInputAt(i);
}
return false;
}
I am getting the following error:

that is present in attachment "ResetRadAsyncUpload.png"
Please help me in doing this. I am in big need of this.

Thanks & Regards

--------------------------------------------------------

Aravinda Chary N

Ph: 9700308156

www.manamai.com

AsyncUpload

answered on 16 Mar 2012

1 answer

85 views

Scrolling grid ID does not found whebn used with RadWindow in asp.net

Hi,

I am using grid which has scroll.And according to scrolling grid data is loaded.
Scrolling grid is embeded in RadWindow,and that radwindow is open when click on link buttton.
Now I have problem when I scolling down the grid,at that time grid ID is not found for loading more records,
Below is my code;

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Up1frmIRPage.aspx.cs" Inherits="Dummy"%>

<%

@ Register TagPrefix="Acme" Namespace="Acme" Assembly="App_Web_mytestuc.ascx.cdcab7d2" %>

<%

@ Register Assembly="ContainerControl" Namespace="Tittle.Controls" TagPrefix="Tittle" %>

<%

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

html xmlns="http://www.w3.org/1999/xhtml">

<

head runat="server">

<%

--ForPopUp--%>

<%

-- <link href="css/POPUP/jquery.ui.all.css" rel="stylesheet" type="text/css" />

%>

<%

-- <script src="JQuary/POPUP/ui/jquery.ui.widget.js" type="text/javascript"></script>--%>

$(

function () {

$(

"#accordion").accordion({

collapsible:

true

});

// For POP UP

// $(function () {

// // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!

// $("#dialog:ui-dialog").dialog("destroy");

// var name = $("#name"),

// email = $("#email"),

// password = $("#password"),

// allFields = $([]).add(name).add(email).add(password),

// tips = $(".validateTips");

// function updateTips(t) {

// tips

// .text(t)

// .addClass("ui-state-highlight");

// setTimeout(function () {

// tips.removeClass("ui-state-highlight", 1500);

// }, 500);

// }

// function checkLength(o, n, min, max) {

// if (o.val().length > max || o.val().length < min) {

// o.addClass("ui-state-error");

// updateTips("Length of " + n + " must be between " +

// min + " and " + max + ".");

// return false;

// } else {

// return true;

// }

// function checkRegexp(o, regexp, n) {

// if (!(regexp.test(o.val()))) {

// o.addClass("ui-state-error");

// updateTips(n);

// return false;

// } else {

// return true;

// }

// $("#dialog-form").dialog({

// autoOpen: false,

// height: 300,

// width: 350,

// modal: true,

// buttons: {

// "Create an account": function () {

// var bValid = true;

// allFields.removeClass("ui-state-error");

// bValid = bValid && checkLength(name, "username", 3, 16);

// bValid = bValid && checkLength(email, "email", 6, 80);

// bValid = bValid && checkLength(password, "password", 5, 16);

//bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");

// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/

//bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com");

//bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

// if (bValid) {

// $("#users tbody").append("<tr>" +

// "<td>" + name.val() + "</td>" +

// "<td>" + email.val() + "</td>" +

// "<td>" + password.val() + "</td>" +

// "</tr>");

// $(this).dialog("close");

// }

// },

// Cancel: function () {

// $(this).dialog("close");

// }

// },

// close: function () {

// allFields.val("").removeClass("ui-state-error");

// }

// });

// $("#create-user")

// .button()

// .click(function () {

// $("#dialog-form").dialog("open");

// });

</script>

.style1

{

width: 47%;

}

.RadPanelBar .rpImage

{

height: 19px;

}

.RadPanelBar .rpLevel1 .rpImage

{

height: 16px;

}

</style>

function funSetWidthHeight(id, id2, id3, idV,Img4,RadGrid22,iWidth, iHeight) {

//debugger;

var myWidth = 0;

var myHeight = 0;

if (typeof (window.innerWidth) == 'number') {

//Non-IE

myWidth = window.innerWidth;

myHeight = window.innerHeight;

}

if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {

//IE 6+ in 'standards compliant mode'

myWidth = document.documentElement.clientWidth;

myHeight = document.documentElement.clientHeight;

}

else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {

//IE 4 compatible

myWidth = document.body.clientWidth;

myHeight = document.body.clientHeight;

}

if (myWidth != 0) {

myWidth = document.documentElement.clientWidth;

myHeight = document.documentElement.clientHeight;

}

if (myWidth != 0) {

var vWidth = myWidth - iWidth;

var vHeight = myHeight - iHeight;

if (vWidth < 150)

vWidth = 150;

if (vHeight < 165)

vHeight = 165;

//debugger;

//var tbW=vWidth*(15/100);

document.getElementById(id).style.width = vWidth +

'px';

document.getElementById(id2).style.width = vWidth +

'px';

document.getElementById(id3).style.width = vWidth +

'px';

document.getElementById(idV).style.width = vWidth +

'px';

//document.getElementById(Img4).style.width = vWidth +'px';

//debugger;

var width = vWidth * (20 / 100);

//var upDatedWidht = vWidth - width;

var upDatedWidht = vWidth - 182;

if (navigator.userAgent.toLowerCase().match('chrome'))

{

upDatedWidht = vWidth - 200;

document.getElementById(RadGrid22).style.width = upDatedWidht +

'px';

document.getElementById(

"RadGrid3").style.width = upDatedWidht + 'px';

document.getElementById(

"RadGrid4").style.width = upDatedWidht + 'px';

}

else

{

document.getElementById(RadGrid22).style.width = upDatedWidht +

'px';

document.getElementById(

"RadGrid3").style.width = upDatedWidht + 'px';

document.getElementById(

"RadGrid4").style.width = upDatedWidht + 'px';

}

document.getElementById(

"mainbody").style.width = vWidth + 'px';

}

//debugger;

window.onresize = ControlResize;

function ControlResize()

{

funSetWidthHeight(

'div1', 'tb1', 'tb2', 'tb3', 'Img4', 'RadGrid4', 20, 20);

}

</script>

</

head>

<

body id="mainbody" onload="funSetWidthHeight('div1', 'tb1', 'tb2', 'tb3','Img4','RadGrid1',20, 20);" style="border:1px solid blue;min-width:900px;" > <%--style="border:1px solid blue;width:auto"--%>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<!--

function RadScrollingGridWidth(e) {

var grid = $find("<%=RadGrid2.ClientID %>");

var scrollArea = document.getElementById("<%= RadGrid2.ClientID %>" + "_GridData");

if (IsScrolledToBottom(scrollArea)) {

}

function RadScrollingGridWidth1(e) {

var grid = $find("<%=RadGrid2.ClientID %>");

var scrollArea = document.getElementById("<%= RadGrid3.ClientID %>" + "_GridData");

if (IsScrolledToBottom(scrollArea)) {

}

function RadScrollingGridWidth2(e) {

var grid = $find("<%=RadGrid4.ClientID %>");

var scrollArea = document.getElementById("<%= RadGrid4.ClientID %>" + "_GridData");

if (IsScrolledToBottom(scrollArea)) {

}

function HandleScrolling(e) {

var grid = $find("<%=RadGrid2.ClientID %>");

var scrollArea = document.getElementById("<%= RadGrid2.ClientID %>" + "_GridData");

if (IsScrolledToBottom(scrollArea)) {

var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);

//if the presently visible items are less than the entire source records count

//trigger an ajax request to increase them

if (currentlyDisplayedRecords < 100) {

$find(

"<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords");

}

//this method calculates whether you have reached the bottom when dragging the vertical grid scroll

function IsScrolledToBottom(scrollArea) {

var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;

return currentPosition == scrollArea.scrollHeight;

}

window.onresize = RadScrollingGridWidth;

window.onresize = RadScrollingGridWidth1;

window.onresize = RadScrollingGridWidth2;

window.open= RadScrollingGridWidth;

window.open=RadScrollingGridWidth1;

window.open = RadScrollingGridWidth2;

-->

</script>

</

telerik:RadCodeBlock>

<

telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel2" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<telerik:AjaxUpdatedControl ControlID="RadGrid1"/>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<telerik:AjaxUpdatedControl ControlID="radwindowPopup" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</

telerik:RadAjaxManager>

<tr>

<td align="left" style="width:100%; height: 8%; background-image: url('images/DM-bar.jpg');

background-repeat: repeat-x;vertical-align:top">

<%

--<img id="Img4" runat="server" src="Images/IAC_Logo.jpg" alt="Logo" />--%>

<asp:Image ID="Img4" runat="server" ImageUrl="Images/IAC_Logo.jpg" AlternateText="Logo" Width="100%" />

</td>

</tr>

</table>

<tr>

<td id="sbCont" style="width: 15%; height: 100%; font-size: 7pt;background-color:White;

color: #000000; vertical-align: top"> <%--background-color: Yellow;--%>

<a style="white-space:nowrap;color:white;font-size:1.1em" href="#" >Services</a></h3>

<div>

<p>

<asp:HyperLink ID="lnkDocumentManager" style="white-space:nowrap" runat="server" Font-Underline="false" Text="File Manager" Target="_blank"/>

</p>

</div>

<a href="#" style="white-space:nowrap;;color:white;font-size:1.1em">My Reports</a></h3>

<div>

Reports

</p>

</div>

<a href="#" style="white-space:nowrap;;color:white;font-size:1.1em">Historic Models</a></h3>

<div>

Section 33

</p>

</div>

<a href="#" style="white-space:nowrap;;color:white;font-size:1.1em">Manaege Data</a></h3>

<div>

Section 44

</p>

</div>

<a href="#" style="white-space:nowrap;;color:white;font-size:1.1em">View Historic Data</a></h3>

<div>

Section 44

</p>

</div>

<a href="#" style="white-space:nowrap;;color:white;font-size:1.1em">Analyst capture</a></h3>

<div>

Section 44

</p>

</div>

<a href="#" style="white-space:nowrap;;color:white;font-size:1.1em">Feedback</a></h3>

<div>

Section 44

</p>

</div>

</td>

</tr>

<tbody>

<%

--<td>

</td>--

%>

<img alt="" id="Img1" width="30" height="8" onclick="leftRoeHide(this);" src="Images/vertical1_arrow.jpg"

style="cursor: pointer; height: 8px;" />

</td>

<%

-- <td>

</td>--

%>

</tr>

<tr id="leftRoeHide" style="vertical-align: bottom; background-color: white; font-size: 7pt;

color: #000000;" valign="bottom">

<tbody>

<tr>

<asp:LinkButton ID="lnkUtilities" runat="server" Font-Size="Small" ForeColor="#668fa3" Font-Names="Verdana" Text="Utilities"></asp:LinkButton>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</table>

</td>

<%

--<img alt="" id="outlookside" height="60" onclick="lefthide(this);" src="Images/left_arrow.jpg"

style="cursor: pointer" width="10" /> --

%>

<%

--<img alt="" src="Images/DM-bar.jpg" width="1px" height="51%" />--%>

</td>

<asp:Label ID="Label1" runat="server" Text="Login as " Font-Names="Calibri" Font-Size="Small"></asp:Label> | 

<asp:LinkButton ID="LinkButton1" runat="server" Font-Names="Calibri" Font-Size="Small" CausesValidation="False"

ForeColor="#668fa3">Sign Out</asp:LinkButton>

</td>

</tr>

<td>

<tbody>

<tbody>

<Tittle:PanelCurveControl ID='tblCrvPnl' runat="server" Expandable="true" Margin="10" Title="Approve Historical Details" TabBackColor="#3090C7" HasPrint="false">

<telerik:RadGrid ID="RadGrid1" AllowSorting="True" runat="server" AllowPaging="true"

PageSize="5" GridLines="Both" Skin="MyCustomSkin" EnableEmbeddedSkins="false"

Width="100%" Height="138px">

<%

-- <Selecting AllowRowSelect="true" />--%>

</ClientSettings>

</telerik:RadGrid>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" >

</telerik:RadAjaxLoadingPanel>

<br />

<%

--<asp:Button ID="btnOpenPopup" runat="server" Text="Click here for more records..." ForeColor="#444" Font-Names="Calibri" Font-Size="Small" OnClick="btnOpenPopup_Click" />--%>

<asp:LinkButton ID="btnOpenPopup" runat="server" Text="Click here for more records..." ForeColor="#444" Font-Names="Calibri" Font-Size="Small" OnClick="btnOpenPopup_Click" ></asp:LinkButton>

<telerik:RadWindow ID="radwindowPopup" runat="server" VisibleOnPageLoad="false" Height="500px"

Width="800px" Modal="true" BackColor="#DADADA" VisibleStatusbar="false" Behaviors="None"

Title="Unsaved changes pending">

<telerik:RadGrid ID="RadGrid2" AllowSorting="True" runat="server" AllowPaging="true"

PageSize="15" GridLines="Both" Skin="MyCustomSkin" EnableEmbeddedSkins="false"

Width="100%" >

</ClientSettings>

</telerik:RadGrid>

<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" OnClick="btnOk_Click" />

<asp:Button ID="btnCancel" runat="server" ForeColor="#444" Text="No" Width="50px" OnClick="btnCancel_Click" />

</div>

</ContentTemplate>

</telerik:RadWindow>

</Tittle:PanelCurveControl>

<br />

</td>

</tr>

<Tittle:PanelCurveControl ID='PanelCurveControl2' runat="server" Expandable="true" Margin="10" Title="Pending Confirmation Details" TabBackColor="#3090C7" HasPrint="false">

<telerik:RadGrid ID="RadGrid3" AllowSorting="True" runat="server" AllowPaging="true"

PageSize="5" GridLines="Both" Skin="MyCustomSkin" EnableEmbeddedSkins="false" Width="100%" Height="85px">

<%

-- <ClientEvents OnScroll="HandleScrolling1" />--%>

</ClientSettings>

</telerik:RadGrid>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" >

</telerik:RadAjaxLoadingPanel>

</Tittle:PanelCurveControl>

<br />

</td>

</tr>

<Tittle:PanelCurveControl ID='PanelCurveControl1' runat="server" Expandable="true" Margin="10" Title="IR Users Login History (Last 7 days)" TabBackColor="#3090C7" HasPrint="false">

<telerik:RadGrid ID="RadGrid4" AllowSorting="True" runat="server" AllowPaging="true"

PageSize="5" GridLines="Both" Skin="MyCustomSkin" EnableEmbeddedSkins="false" Width="100%" Height="85px">

<%

-- <ClientEvents OnScroll="HandleScrolling2" />--%>

</ClientSettings>

</telerik:RadGrid>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel3" runat="server" > <%--Skin="Default"--%>

<%

--<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/Imgloading.gif"></asp:Image>--%>

</telerik:RadAjaxLoadingPanel>

</Tittle:PanelCurveControl>

<br />

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<td style="width: 100%; background-repeat: repeat-x; background-position: center;

background-color: #e7ebf0;" align="center">

<img alt="" id="Img2" width="60" height="10" onclick="MiddleRowHide(this);" src="Images/vertical1_arrow.jpg"

style="cursor: pointer" />

</td>

</tr>

<td style="width: 100%; background-image: url(Images/DM-bar.jpg); background-repeat: repeat-x;

background-position: center; background-color: #e7ebf0;" align="center">

</td>

</tr>

<tr id="MiddleRowHide" style="background-color: white; font-size: 7pt; color: #000000;

vertical-align: bottom; height: 100%" valign="bottom">

<br />

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<td style="background-image: url('Images/extra bar1.jpg'); background-repeat: repeat;

clip: rect(auto, 25px, auto, auto); height: 15px;">

<tr>

<asp:LinkButton ID="lnkDesclaimer" runat="server" ForeColor="White">Desclaimer</asp:LinkButton>  

</td>

<asp:Label runat="server" ID="lbl1" Text="(Reserved)" ForeColor="White"></asp:Label>

</td>

</td>

<img alt="" src="Images/phone.png" width="10" height="10" /> <asp:Label ID="lblContactUs"

runat="server" ForeColor="White">Contact Us   |</asp:Label>

</td>

<td style="font-family: Calibri; font-size: 15px; padding: 5px; width: 25%" align="left"

class="style1">

<img alt="" src="Images/print.gif" width="10" height="10" /> <asp:Label runat="server"

ID="lblPrint" ForeColor="White" Text="Print"></asp:Label>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</form>

</

body>

</

html>

Thanks for any help,
Regards,
Satyajit Kadam.

Grid

answered on 16 Mar 2012

1 answer

149 views

Expand/Collapse group headers not working for grid

Hi,

I am using the following mark up for a feature in my application with expandable group headers, so that i can hide and show accordingly via expand/collapse link button. The mark up for the grid is as below:

        <telerik:RadGrid ID="m_UIExperienceGrid" runat="server" SkinID="RecruitmentGrid_NoHeaders" CssClass="SimpleGrid summary"
            AllowMultiRowSelection="false" OnItemDataBound="OnExperienceGridItemDataBound">
            <MasterTableView AutoGenerateColumns="false" GroupLoadMode="Client" EditMode="InPlace">
                <GroupByExpressions>
                    <telerik:GridGroupByExpression >
                        <SelectFields>
                            <telerik:GridGroupByField FieldName="GroupIndexName" />
                        </SelectFields>
                        <GroupByFields>
                            <telerik:GridGroupByField FieldName="GroupIndexName" />
                        </GroupByFields>
                    </telerik:GridGroupByExpression>
                </GroupByExpressions>
                <GroupHeaderItemStyle CssClass="listItem" />
                <Columns>
                        <telerik:GridTemplateColumn>
                            <ItemTemplate>
                                <div class="itemText"><%#Eval("JobDescription") %></div>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowGroupExpandCollapse="true">
                <ClientEvents OnGridCreated="GridCreated" />
            </ClientSettings>
        </telerik:RadGrid>

The mark up for link button that does the collapse/expand is as below:
        <asp:LinkButton ID="m_UIExpandAllExperiencesLink" runat="server" OnClientClick="return ExpandCollapseAllGroups('rgExpand');"/>

        <asp:LinkButton ID="m_UICollapseAllExperiencesLink" runat="server" OnClientClick="return ExpandCollapseAllGroups('rgCollapse');" />

The java scripts are as below:

    function GridCreated(sender, eventArgs) {
            //collapse all items when page loads
            ExpandCollapseAllGroups('rgCollapse');
        }

        //Expands or collapses all group headers based on expandCollapseClass
        function ExpandCollapseAllGroups(expandCollapseClass) {
            var tableView = $find('<%=m_UIExperienceGrid.ClientID %>').get_masterTableView();
            var groupHeaders = $telerik.$(tableView.get_element()).find('INPUT[class="'+ expandCollapseClass +'"]');
            if (groupHeaders.length > 0) {
                for (var i = 0; i < groupHeaders.length; i++) {
                    $telerik.$(groupHeaders[i]).click();
                }
            }
            //return false to prevent postbacks
            return false;
        }

Essentially i leverage the css inbuilt for the telerik grid to do the expand/collpase from the client side.

This worked for me well a few days back, but i am facing issues recently, as per the screenshot attached, i have some comments in them as well. While expanding/collapsing the items is not happening individually too, just the expand/collapse image changes.
I have grid with grouping else where in my appln with server side expansion and collpase which is working fine but in the above scenario, it is not working.

Thanks and regards,
Damodar

Ajax

answered on 16 Mar 2012