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
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.
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 "
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 " 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;
}
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.
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.
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.
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 " 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 " 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; |
} |
Please find the code in code editor.
Regards,
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.
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.
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.