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

RadDropdownList in itemtemplate and EditItemTemplate

4 Answers 231 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mohammed
Top achievements
Rank 1
Mohammed asked on 11 Jan 2017, 10:30 AM

I am trying to create a RadGrid that shows RadDropDownList in both ItemTemplate and EditTemplate.

When the user clicks on the the dropdown list in ItemTemplate mode and changes the selected item and then clicks off the grid to collapse the dropdown list, the red icon does not appear in the top corner of the cell to show a change has been. When the grid is saved the changes are not saved and the value remains the same as it was before the user made the change.

However if the user clicks on the actual cell (the space on the side of the dropdown list in the same column) then changes the selected item, the red icon appears and the change is saved as expected.

I'm assuming this is because the grid only enters batch edit mode when the cell is clicked but when the dropdown list itself is clicked it remains in the ItemTemplate and shows the dropdown list that is in ItemTemplate mode.

What is the fix for this?

Code:

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="sqlDisplayRegisters" AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="True"
    AllowFilteringByColumn="false" OnItemCommand="RadGrid1_ItemCommand" OnBatchEditCommand="RadGrid1_BatchEditCommand">
    <GroupingSettings CaseSensitive="false" />
    <MasterTableView AutoGenerateColumns="False" DataSourceID="sqlDisplayRegisters" DataKeyNames="RegID" EditMode="Batch" CommandItemDisplay="Bottom"
        NoMasterRecordsText="There are no registers for this selection" >
        <CommandItemSettings ShowAddNewRecordButton="false"  SaveChangesText="Submit Register" ShowCancelChangesButton="false" ShowRefreshButton="false"  />
        <CommandItemStyle Font-Size="Larger"/>
            <Columns>
                <telerik:GridBoundColumn HeaderStyle-Width="10%" DataType="System.String" DataField="P_Forename" HeaderText="Forename"
                    SortExpression="P_Forename" UniqueName="P_Forename" ReadOnly="true"></telerik:GridBoundColumn>
                <telerik:GridTemplateColumn FilterControlWidth="60%" DataField="Mark" FilterControlAltText="Filter Mark column"
                    HeaderText="Mark" UniqueName="Mark" SortExpression="Mark" DataType="System.String">
                    <HeaderStyle Width="80px" HorizontalAlign="Left" />
                    <ItemTemplate>
                         <telerik:RadDropDownList runat="server" ID="ddlMarkItem" DataSourceID="SqlDataSource1" DataValueField="Code" DataTextField="Description"
                             SelectedValue=<%# Eval("Mark") %> >
                        </telerik:RadDropDownList>
                    </ItemTemplate>
                    <EditItemTemplate>
                         <telerik:RadDropDownList runat="server" ID="ddlMarkEdit" DataSourceID="SqlDataSource1" DataValueField="Code" DataTextField="Description">
                        </telerik:RadDropDownList>                                   
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>

4 Answers, 1 is accepted

Sort by
0
Mohammed
Top achievements
Rank 1
answered on 13 Jan 2017, 10:54 AM
Anyone have any ideas?
0
Viktor Tachev
Telerik team
answered on 16 Jan 2017, 09:32 AM
Hi Mohammed,

As I described in the support ticket you have submitted such functionality is not available out of the box. It will interfere with the default functionality of RadGrid.

In order for a cell to be placed in edit mode the user needs to click in the cell itself. If there is another component there the cell will not enter edit mode. As a result this will be unexpected behavior from the user's perspective as they would think the cell was edited.

I would recommend to use the approach illustrated in the Batch Edit mode demo for RadGrid. Note the Category column for reference.



Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Mohammed
Top achievements
Rank 1
answered on 16 Jan 2017, 09:34 AM

The problem with only showing the current value in preview mode and not the dropdown is some of the users won't know they can change the value by clicking on it because it is only displayed as a label, whereas if a dropdown is displayed in preview mode the user will know it can be changed.

Would it be possible to enter edit mode programmatically on client side when a dropdown is first clicked before it expands? or for the grid to enter edit mode as soon as the page is loaded so preview mode is never shown? 

0
Viktor Tachev
Telerik team
answered on 18 Jan 2017, 02:23 PM
Hi,

Placing all cells for a column in edit mode at the same time is not possible. This is because only a single editor is used per column when Batch editing is enabled. The Grid is using complex internal logic to show and hide that editor and set its value accordingly.

In order to use dropdown controls in both preview and edit mode you would need to implement complex logic that synchronizes the values between the two dropdown controls and set the value for the cell manually.

Such logic will introduce a lot of overhead and can result in unwanted behavior from RadGrid. Thus, I strongly recommend not to go that route.

I recommend using the built-in features for RadGrid and use a DropDown control only in edit mode. This would ensure best performance for your application. Moreover, there will be smaller chance of errors due to additional custom logic.


Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Mohammed
Top achievements
Rank 1
Answers by
Mohammed
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or