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

Selecting in Radgrid

9 Answers 92 Views
Grid
This is a migrated thread and some comments may be shown as answers.
vinod chandran
Top achievements
Rank 1
vinod chandran asked on 25 Sep 2009, 02:49 AM
Hi All,
I am facing an issue with radgrid. I have 2 radgrid in one of my page. The first grid will have only one row every time and only edit is enabled there. In the second grid I will have multiple rows and there add, edit and delete also will be possible. We are not using inline edit functionality of radgrid instead we are using the asp button to edit the details( the page will be redirected to another page with the row details; I know it is unorthodox way but our client wants like this). So I have following requirements.

1) If the user clicks on first grid only edit button should be enabled.
2) If the user clicks on second grid both edit and delete button has to enabled.
3) We should allow the user to select only one row at a time either from first grid or second grid.

We achieved this functioanlity by overriding some of the radgrid's script, but I need to know whether there is any other solution for achieving this without overriding.

PS: We need to implement this functionality in client side.

Thanks in advance,
Vinod.

9 Answers, 1 is accepted

Sort by
0
Tsvetoslav
Telerik team
answered on 26 Sep 2009, 12:44 PM
Hi vinod,

Could you post the solution you mention in your post as well as the aspx for the two grids (please, use the Code Converter tool of the ticket editor to paste your code and make it readable).

Thanks.

Best wishes,
Tsvetoslav
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
Naresh Kumar Murthy
Top achievements
Rank 1
answered on 27 Sep 2009, 05:26 PM
Hi,

As per your request I have attached the grid control code and the javascript.

First Grid:

 

 

telerik:RadGrid ID="legalAddressRadGrid" runat="server" AutoGenerateColumns="false"  

 

Skin="" EnableEmbeddedSkins="false">  

 

<MasterTableView DataKeyNames="ID" CssClass="Grid">  

 

<HeaderStyle CssClass="GridHeader" />  

 

<PagerStyle Mode="NumericPages" />  

 

<AlternatingItemStyle BackColor="#F3F3F3" />  

 

<Columns 

 

<telerik:GridClientSelectColumn 

 

</telerik:GridClientSelectColumn 

 

<telerik:GridBoundColumn DataField="AddressTypeText" ItemStyle-BackColor="#F3F3F3"  

 

ItemStyle-ForeColor="Black" ItemStyle-BorderStyle="Dotted" HeaderText="Address Type"  

 

DataType="System.String" HeaderStyle-Width="110px" ItemStyle-Width="110px" />  

 

<telerik:GridBoundColumn DataField="StreetAddress" HeaderText="Street Address" DataType="System.String"  

 

HeaderStyle-Width="150px" ItemStyle-Width="150px" />  

 

<telerik:GridBoundColumn DataField="City" HeaderText="City" DataType="System.String"  

 

HeaderStyle-Width="100px" ItemStyle-Width="100px" /> 

 

<telerik:GridBoundColumn DataField="StateProvince" HeaderText="State/Province" DataType="System.String"  

 

HeaderStyle-Width="130px" ItemStyle-Width="130px" />  

 

<telerik:GridBoundColumn DataField="StateProvinceAbb" HeaderText="State/Province Abbreviation"  

 

DataType="System.String" HeaderStyle-Width="100px" ItemStyle-Width="100px" />  

 

<telerik:GridBoundColumn DataField="PostalCode" HeaderText="Postal Code" DataType="System.String" 

 

HeaderStyle-Width="72px" ItemStyle-Width="72px" />  

 

 

<telerik:GridBoundColumn DataField="CountryText" HeaderText="Country" DataType="System.String" 

 

HeaderStyle-Width="100px" ItemStyle-Width="100px" />  

 

 

<telerik:GridBoundColumn DataField="LanguageText" HeaderText="Language" DataType="System.String" 

 

HeaderStyle-Width="100px" ItemStyle-Width="100px" />  

 

 

</Columns 

 

<PagerStyle Mode="NumericPages" />  

 

</MasterTableView 

 

<ClientSettings 

 

<Selecting AllowRowSelect="True" /> 

 

</ClientSettings 

 

 

</telerik:RadGrid>

 

Second Grid:
<

 

telerik:RadGrid ID="otherAddresssesRadGrid" runat="server" AutoGenerateColumns="false"

 

AllowSorting="true" AllowPaging="True" OnSortCommand="otherAddresssesRadGrid_SortCommand"  

 

 

OnSelectedIndexChanged="otherAddresssesRadGrid_SelectedIndexChanged" OnItemCommand="otherAddresssesRadGrid_ItemCommand"  

 

 

OnItemDataBound="otherAddresssesRadGrid_ItemDataBound" OnPreRender="otherAddresssesRadGrid_PreRender"  

 

 

Skin="" EnableEmbeddedSkins="false" OnPageIndexChanged="otherAddresssesRadGrid_PageIndexChanged">

 

<MasterTableView DataKeyNames="ID" CssClass="Grid" PageSize="5">  

 

 

<HeaderStyle CssClass="GridHeader" ForeColor="#002664" />  

 

 

<PagerStyle Mode="NumericPages" />  

 

 

<Columns>

 

<telerik:GridClientSelectColumn  

 

 

</telerik:GridClientSelectColumn>

 

<telerik:GridBoundColumn DataField="AddressTypeText" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"

 

SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"

 

HeaderText="Address Type" HeaderStyle-Width="110px" ItemStyle-Width="110px" />

 

<telerik:GridBoundColumn DataField="StreetAddress" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"

 

SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"

 

HeaderText="Street Address" HeaderStyle-Width="150px" ItemStyle-Width="150px" />

 

<telerik:GridBoundColumn DataField="City" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"

 

SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"

 

HeaderText="City&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  

 

 

HeaderStyle-Width="100px" ItemStyle-Width="100px" />

 

<telerik:GridBoundColumn DataField="StateProvince" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"

 

SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"

 

HeaderText="State/Province&nbsp;&nbsp;" HeaderStyle-Width="130px" ItemStyle-Width="130px" />

 

<telerik:GridBoundColumn DataField="StateProvinceAbb" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"  

 

 

SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"

 

HeaderText="State/Province Abbreviation" HeaderStyle-Width="100px" ItemStyle-Width="100px" />

 

<telerik:GridBoundColumn DataField="PostalCode" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"

 

SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"

 

HeaderText="Postal Code" HeaderStyle-Width="72px" ItemStyle-Width="72px" />  

 

<telerik:GridBoundColumn DataField="CountryText" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"

 

SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"

 

HeaderText="Country" HeaderStyle-Width="100px" ItemStyle-Width="100px" />

 

<telerik:GridBoundColumn DataField="LanguageText" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"

 

SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"

 

HeaderText="Language" HeaderStyle-Width="100px" ItemStyle-Width="100px" />  

 

 

</Columns>

 

</MasterTableView>

 

<ClientSettings>

 

<Selecting AllowRowSelect="True" />

 

</ClientSettings>

 

</telerik:RadGrid>

The overriding Javascript: 

 

 

 

var

 

legalAddressRadGrid = document.getElementById("<%=legalAddressRadGrid.ClientID %>");

 

var otherAddresssesRadGrid = document.getElementById("<%=otherAddresssesRadGrid.ClientID %>");  

 

if

 

(legalAddressRadGrid) {

 

var legalInputBoxCollection = legalAddressRadGrid.getElementsByTagName("input");

 

var otherInputBoxCollection = otherAddresssesRadGrid.getElementsByTagName("input");

 

var prevSelectedObject = null 

 

 

 

 

 

 

 

legalInputBoxCollection[0].onclick =

 

"";

 

legalInputBoxCollection[0].attachEvent(

 

"onclick", ChkRowSelectStatus);

 

if (legalInputBoxCollection[0].checked) {

 

 

btnAddressDelete.disabled =

 

true;

 

}

 

 

for (var index = 0; index < otherInputBoxCollection.length - 1; index++) {

 

otherInputBoxCollection[index].attachEvent(

 

"onclick", ChkRowSelectStatus);

 

}

}

 

 

 

 

function ChkRowSelectStatus(e) {

 

var object = e.srcElement;

 

 

 

 

 

 

 

if (prevSelectedObject != null && prevSelectedObject != object) {

 

prevSelectedObject.checked = !object.checked;

}

 

 

if (object.id.indexOf("legal") != -1 && object.checked) {

 

btnAddressDelete.disabled =

 

true;

 

btnAddressEdit.disabled =

 

false;

 

}

 

 

else if (prevSelectedObject && prevSelectedObject.id.indexOf("legal") != -1 && prevSelectedObject.checked) {

 

btnAddressDelete.disabled =

 

true;

 

btnAddressEdit.disabled =

 

false;

 

}

 

 

else {

 

btnAddressEdit.disabled =

 

true;

 

}

 

 

if (object.id.indexOf("other") != -1) {

 

btnAddressDelete.disabled = btnAddressEdit.disabled = !object.checked;

}

prevSelectedObject = object;

e.cancelBubble =

 

true;

 

}

 

 

 

 

 

 

0
Tsvetoslav
Telerik team
answered on 28 Sep 2009, 08:11 AM
Hello Naresh,

Your code is not readable for which reason I asked you to use  the code formatter tool. Please, repost your code (see the attached image as to which button is used to run the tool).

Regards,
Tsvetoslav
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
Naresh Kumar Murthy
Top achievements
Rank 1
answered on 28 Sep 2009, 09:05 AM

Hi Tsvetoslav,

I don't have that option and even the tool bar looks different. It just contains only 8 tool buttons. Please assist me how to open code formatter tool.

 

Thanks,

naresh.

0
Tsvetoslav
Telerik team
answered on 29 Sep 2009, 04:27 PM
Hello Naresh,

I have attached some directions on that.

Best wishes,
Tsvetoslav
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
vinod chandran
Top achievements
Rank 1
answered on 30 Sep 2009, 03:18 AM
First Grid:  
 
   
 
   
 
<telerik:RadGrid ID="legalAddressRadGrid" runat="server" AutoGenerateColumns="false"   Skin="" EnableEmbeddedSkins="false">     
<MasterTableView DataKeyNames="ID" CssClass="Grid">     
<HeaderStyle CssClass="GridHeader" />     
<PagerStyle Mode="NumericPages" />     
<AlternatingItemStyle BackColor="#F3F3F3" />     
<Columns>     
<telerik:GridClientSelectColumn>     
</telerik:GridClientSelectColumn>     
<telerik:GridBoundColumn DataField="AddressTypeText" ItemStyle-BackColor="#F3F3F3"   ItemStyle-ForeColor="Black" ItemStyle-BorderStyle="Dotted" HeaderText="Address Type"   DataType="System.String" HeaderStyle-Width="110px" ItemStyle-Width="110px" />     
 
<telerik:GridBoundColumn DataField="StreetAddress" HeaderText="Street Address" DataType="System.String"   HeaderStyle-Width="150px" ItemStyle-Width="150px" />     
<telerik:GridBoundColumn DataField="City" HeaderText="City" DataType="System.String"     
HeaderStyle-Width="100px" ItemStyle-Width="100px" />    
<telerik:GridBoundColumn DataField="StateProvince" HeaderText="State/Province" DataType="System.String"   HeaderStyle-Width="130px" ItemStyle-Width="130px" />     
<telerik:GridBoundColumn DataField="StateProvinceAbb" HeaderText="State/Province Abbreviation"   DataType="System.String" HeaderStyle-Width="100px" ItemStyle-Width="100px" />     
<telerik:GridBoundColumn DataField="PostalCode" HeaderText="Postal Code" DataType="System.String"  HeaderStyle-Width="72px" ItemStyle-Width="72px" />     
<telerik:GridBoundColumn DataField="CountryText" HeaderText="Country" DataType="System.String"  HeaderStyle-Width="100px" ItemStyle-Width="100px" />     
<telerik:GridBoundColumn DataField="LanguageText" HeaderText="Language" DataType="System.String"  HeaderStyle-Width="100px" ItemStyle-Width="100px" />     
</Columns>     
<PagerStyle Mode="NumericPages" />     
</MasterTableView>     
<ClientSettings>     
<Selecting AllowRowSelect="True" />    
</ClientSettings>     
</telerik:RadGrid> 
 
Second Grid:  
 
 
<telerik:RadGrid ID="otherAddresssesRadGrid" runat="server" AutoGenerateColumns="false" AllowSorting="true" AllowPaging="True" OnSortCommand="otherAddresssesRadGrid_SortCommand"     
 OnSelectedIndexChanged="otherAddresssesRadGrid_SelectedIndexChanged" OnItemCommand="otherAddresssesRadGrid_ItemCommand"     
OnItemDataBound="otherAddresssesRadGrid_ItemDataBound" OnPreRender="otherAddresssesRadGrid_PreRender"     
Skin="" EnableEmbeddedSkins="false" OnPageIndexChanged="otherAddresssesRadGrid_PageIndexChanged">   
<MasterTableView DataKeyNames="ID" CssClass="Grid" PageSize="5">     
 <HeaderStyle CssClass="GridHeader" ForeColor="#002664" />     
<PagerStyle Mode="NumericPages" />     
<Columns>   
<telerik:GridClientSelectColumn>      
 </telerik:GridClientSelectColumn>   
<telerik:GridBoundColumn DataField="AddressTypeText" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"   
 SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"   
 HeaderText="Address Type" HeaderStyle-Width="110px" ItemStyle-Width="110px" />   
   
<telerik:GridBoundColumn DataField="StreetAddress" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"   
 SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"   
 HeaderText="Street Address" HeaderStyle-Width="150px" ItemStyle-Width="150px" />   
 <telerik:GridBoundColumn DataField="City" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"   
 SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"   
HeaderText="City&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"   HeaderStyle-Width="100px" ItemStyle-Width="100px" />   
<telerik:GridBoundColumn DataField="StateProvince" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"   
 SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"   
 HeaderText="State/Province&nbsp;&nbsp;" HeaderStyle-Width="130px" ItemStyle-Width="130px" />   
 <telerik:GridBoundColumn DataField="StateProvinceAbb" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"     
 SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"   
HeaderText="State/Province Abbreviation" HeaderStyle-Width="100px" ItemStyle-Width="100px" />   
<telerik:GridBoundColumn DataField="PostalCode" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"   
SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"   
HeaderText="Postal Code" HeaderStyle-Width="72px" ItemStyle-Width="72px" />     
   
<telerik:GridBoundColumn DataField="CountryText" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"   
SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"   
HeaderText="Country" HeaderStyle-Width="100px" ItemStyle-Width="100px" />   
 
<telerik:GridBoundColumn DataField="LanguageText" SortDescImageUrl="../Shared/Images/icn_sorted_desc.gif"   
SortAscImageUrl="../Shared/Images/icn_sorted_asc.gif" DataType="System.String"   
 HeaderText="Language" HeaderStyle-Width="100px" ItemStyle-Width="100px" />     
</Columns>   
</MasterTableView>   
<ClientSettings>   
<Selecting AllowRowSelect="True" />   
</ClientSettings>   
</telerik:RadGrid> 
 
 
The overriding Javascript:    
   
 
 var legalAddressRadGrid = document.getElementById("<%=legalAddressRadGrid.ClientID %>");   
var otherAddresssesRadGrid = document.getElementById("<%=otherAddresssesRadGrid.ClientID %>");     
if(legalAddressRadGrid) {   
var legalInputBoxCollection = legalAddressRadGrid.getElementsByTagName("input");   
var otherInputBoxCollection = otherAddresssesRadGrid.getElementsByTagName("input");   
var prevSelectedObject = null;     
legalInputBoxCollection[0].onclick = "";   
legalInputBoxCollection[0].attachEvent("onclick", ChkRowSelectStatus);   
if (legalInputBoxCollection[0].checked) {   
btnAddressDelete.disabled = true;   
}  
for (var index = 0; index < otherInputBoxCollection.length - 1; index++) {   
otherInputBoxCollection[index].attachEvent("onclick", ChkRowSelectStatus);   
}  
}  
function ChkRowSelectStatus(e) {   
var object = e.srcElement;   
if (prevSelectedObject != null && prevSelectedObject != object) {   
prevSelectedObject.checked = !object.checked;  
}  
if (object.id.indexOf("legal") != -1 && object.checked) {   
btnAddressDelete.disabled = true;   
btnAddressEdit.disabled = false;   
}  
 
else if (prevSelectedObject && prevSelectedObject.id.indexOf("legal") != -1 && prevSelectedObject.checked) {   
btnAddressDelete.disabled = true;   
btnAddressEdit.disabled = false;   
}  
else {   
btnAddressEdit.disabled = true;   
}  
if (object.id.indexOf("other") != -1) {   
btnAddressDelete.disabled = btnAddressEdit.disabled = !object.checked;  
}  
prevSelectedObject = object;  
e.cancelBubble = true;   
}  
 
 
Hi Tsvetoslav,
Please find the code in code editor.

Regards,
vinod.
0
Tsvetoslav
Telerik team
answered on 02 Oct 2009, 07:17 AM
Hi vinod,

Thanks for the code snippet.

Could you, please, answer the following questions and I will try to implement a small sample demonstrating your scenario:

Concerning point 1 (If the user clicks on first grid only edit button should be enabled):

- the edit button of the rows in which grid should be enabled - the first one or the second. Is the edit button of the rows in the first and second grid enabled by default (on initial load)? How do you declare this edit button - I could not spot any edit buttons or edit columns in your mark-up?

Concerning point 2 (If the user clicks on second grid both edit and delete button has to enabled):
- I suppose here you are referering to the buttons in the second grid only. Again how do you declare those buttons or edit/delete columns?

Thanks in advance for your feedback.

Best wishes,
Tsvetoslav
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
vinod chandran
Top achievements
Rank 1
answered on 05 Oct 2009, 10:51 AM

Hi Tsvetoslav ,
Thanks for your reply.
Regarding your questions,
Both Edit and Delete buttons are outside the telerik grid. These buttons are normal Asp buttons. That means we are not looking for inline edit or delete functionality in the telerik grid. And these buttons are common for both the grids. Both these buttons should be disable by default.

 

I think I have answered your questions.

 

Regards,

Vinod.

0
Tsvetoslav
Telerik team
answered on 07 Oct 2009, 08:04 AM
Hello vinod,

Attached is a sample that follows your requirements.

Kind regards,
Tsvetoslav
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.
Tags
Grid
Asked by
vinod chandran
Top achievements
Rank 1
Answers by
Tsvetoslav
Telerik team
Naresh Kumar Murthy
Top achievements
Rank 1
vinod chandran
Top achievements
Rank 1
Share this question
or