
Raghavendra
Top achievements
Rank 1
Raghavendra
asked on 13 Dec 2011, 02:08 PM
Hi,
I am currently in the process of migrating a GridView to RadGrid. However, I seem to have hit a roadblock with this specific requirement.
Basically, the grid I am working with is actually an editor for the drop down list items for other pages in the site. One of the columns in this grid is, a radio button to specify whether this value should be the default option. i.e., When the <select> element is rendered, whether this row should have it's "selected" attribute set.
As you can figure out, only one row can have this set to true. So, whenever a radio button in this column is checked, the radio buttons in all the other rows need to get unchecked.
In GridView, we have implemented a custom class which inherits from BoundField to get this behavior. But, I can't add this column to RadGrid's columns collection :(
I am currently in the process of migrating a GridView to RadGrid. However, I seem to have hit a roadblock with this specific requirement.
Basically, the grid I am working with is actually an editor for the drop down list items for other pages in the site. One of the columns in this grid is, a radio button to specify whether this value should be the default option. i.e., When the <select> element is rendered, whether this row should have it's "selected" attribute set.
As you can figure out, only one row can have this set to true. So, whenever a radio button in this column is checked, the radio buttons in all the other rows need to get unchecked.
In GridView, we have implemented a custom class which inherits from BoundField to get this behavior. But, I can't add this column to RadGrid's columns collection :(
5 Answers, 1 is accepted
0
Hello Raghavendra,
If you do not need to stick to using RadioButtons for implementing this behavior, you can simply use row selection in RadGrid. When you enable row selection, by default, only a single row can be selected in the grid. Thus, you can determine the selected item in your dropdown by the SelectedItems[0] property in RadGrid.
If you need to use RadioButtons in a grid column specifically, you need to take an alternative approach. You can implement a custom column with a radio button in its data cells. The radio buttons in all the data cells can share the same GroupName (representing the name attribute of the HTML <input type='radio'> element).
Unfortunately, the standard ASP.NET RadioButton control does not work work when you want to have related radio buttons with the same GroupName, but these radio buttons are located in different naming containers. The rows (or DataItems) in RadGrid are naming containers, so each RadioButton in a different column cell will have a different naming container.
This limitation leads us to the need to implement a custom RadioButton control that does not require same naming container for grouping. We can now use this custom RadioButton control in a GridTemplateColumn in RadGrid. Attaching a test page to demonstrate this approach.
Veli
the Telerik team
If you do not need to stick to using RadioButtons for implementing this behavior, you can simply use row selection in RadGrid. When you enable row selection, by default, only a single row can be selected in the grid. Thus, you can determine the selected item in your dropdown by the SelectedItems[0] property in RadGrid.
If you need to use RadioButtons in a grid column specifically, you need to take an alternative approach. You can implement a custom column with a radio button in its data cells. The radio buttons in all the data cells can share the same GroupName (representing the name attribute of the HTML <input type='radio'> element).
Unfortunately, the standard ASP.NET RadioButton control does not work work when you want to have related radio buttons with the same GroupName, but these radio buttons are located in different naming containers. The rows (or DataItems) in RadGrid are naming containers, so each RadioButton in a different column cell will have a different naming container.
This limitation leads us to the need to implement a custom RadioButton control that does not require same naming container for grouping. We can now use this custom RadioButton control in a GridTemplateColumn in RadGrid. Attaching a test page to demonstrate this approach.
Veli
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now
0

Raghavendra
Top achievements
Rank 1
answered on 16 Dec 2011, 12:40 PM
Hello Veli,
Thanks for the effort. The test page and control you gave worked exactly as required in the scenario described above.
However, to achieve this functionality, we are using a class called SelectorField from MetaBuilders WebControls. The code for this class can be found at http://metabuildersweb.codeplex.com/SourceControl/changeset/view/15894#130274
We are using this control in a lot of places and I am afraid there would be a lot of effort involved in sorting out each one of them.
If there is any way better way of simply upgrading this class to be RadGrid compatible, nothing like it!
Thanks & Regards,
Raghu
Thanks for the effort. The test page and control you gave worked exactly as required in the scenario described above.
However, to achieve this functionality, we are using a class called SelectorField from MetaBuilders WebControls. The code for this class can be found at http://metabuildersweb.codeplex.com/SourceControl/changeset/view/15894#130274
We are using this control in a lot of places and I am afraid there would be a lot of effort involved in sorting out each one of them.
If there is any way better way of simply upgrading this class to be RadGrid compatible, nothing like it!
Thanks & Regards,
Raghu
0
We cannot give any advice for non-Telerik controls and code.
Veli
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now
0

Marta
Top achievements
Rank 1
answered on 21 Jan 2013, 03:24 AM
Hi Veli,
I'm trying to implement single row selection in MVC using telerik grid.
Here is what I have:
@{Html.Telerik().Grid(Model.Image)
.Name("ImageCatalog")
.Columns(columns =>
{
columns.Bound(o => o.IsSelected)
.ClientTemplate("<input type='radio' name='checkedRecords' value='<#= IsSelected #>' />")
.Title("")
.Width("5%")
.HtmlAttributes(new { style = "text-align:center" });
columns.Bound(o => o.ImageFile).Title("Image Name").Width("40%");
})
.DataBinding(dataBinding =>
{
dataBinding.Server().Select("Image", "VendingApplications", new { ajax = true });
dataBinding.Ajax().Select("_Images", "VendingApplications").Enabled(true);
})
.Scrollable()
.Pageable()
.Selectable()
.Render();}
For some reason my checkboxes/radio buttons are disabled and I'm only able to select a row by clicking on it.
I want user to be able to select single row by clicking only on checkbox. Do you know of any way to immplement it?
Thanks,
Marta
I'm trying to implement single row selection in MVC using telerik grid.
Here is what I have:
@{Html.Telerik().Grid(Model.Image)
.Name("ImageCatalog")
.Columns(columns =>
{
columns.Bound(o => o.IsSelected)
.ClientTemplate("<input type='radio' name='checkedRecords' value='<#= IsSelected #>' />")
.Title("")
.Width("5%")
.HtmlAttributes(new { style = "text-align:center" });
columns.Bound(o => o.ImageFile).Title("Image Name").Width("40%");
})
.DataBinding(dataBinding =>
{
dataBinding.Server().Select("Image", "VendingApplications", new { ajax = true });
dataBinding.Ajax().Select("_Images", "VendingApplications").Enabled(true);
})
.Scrollable()
.Pageable()
.Selectable()
.Render();}
For some reason my checkboxes/radio buttons are disabled and I'm only able to select a row by clicking on it.
I want user to be able to select single row by clicking only on checkbox. Do you know of any way to immplement it?
Thanks,
Marta
0
Hi Raghavendra,
ChangeSelection function:
Kind Regards,
Vladimir Iliev
the Telerik team
Basically this behavior is intended - the click over checkbox or radio button cannot change the current grid selection, however you can attach click event on the input and change the selection manually. Please check the example below:
ClientTemplate:
columns.Bound(p => p.Discontinued)
.ClientTemplate("<
input
type
=
'radio'
onclick
=
'changeSelection(this)'
name
=
'Discontinued'
<#= Discontinued?
checked
=
'checked'
: '' #> />");
ChangeSelection function:
function
changeSelection(element) {
$(element).closest(
".t-grid"
).find($(
".t-state-selected"
)).removeClass(
"t-state-selected"
);
$(element).closest(
"tr"
).addClass(
"t-state-selected"
);
}
Kind Regards,
Vladimir Iliev
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.