Problem: GridDropDownColumn with DropDownControlType="DropDownList" on batch mode

14 posts, 2 answers
  1. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 10 Nov 2013 Link to this post

    I have a grid whose table view's EditMode is set to batch.
    One of the columns of the grid is a GridDropDownColumn, and the inner input is a select element (DropDownControlType="DropDownList").

    The values are displayed properly in the read mode. When I open a row for editing, the drop down appears with the first item selected, not the value of the cell.
    When I call
    $find("gv").get_batchEditingManager().getCellValue(document.querySelectorAll(".rgBatchCurrent")[5])
    on the grid I get the text value displayed while on read only mode, not the underlying value (5 is the index of the drop down column).
    For example, the previous call returns "Employee (non-sales)" but it should return "EM".

    If I use the rad combo box editor instead, it works well, but I don't want it for this simple form. I want to use the plain drop down list.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Nov 2013 Link to this post

    Hi Ashraf,

    Please try the following code snippet. I was able to get the selected value in edit mode for Batch-edit.

    ASPX:
    <telerik:GridDropDownColumn UniqueName="ShipCity" ListDataMember="SqlDataSource1"
    DropDownControlType="DropDownList" ListTextField="ShipCity" ListValueField="ShipCity"
    HeaderText="ShipCity" DataField="ShipCity" />

    Thanks,
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 13 Nov 2013 Link to this post

    Hi Ashraf,

    Please note that in some scenarios you will not be able to get the cell value to be the selected one with DropDownList. For your requirement for using DropDownList control and select the corresponding item while editing, you could handle the OnBatchEditSetEditorValue client-side event and manually select the item:
    <script type="text/javascript">
        function OnBatchEditSetEditorValue(sender, args) {
            var valueToSelect = args.get_value();
            var selectElement = args.get_cell().getElementsByTagName("select")[0];
     
            for (var i = 0; i < selectElement.options.length; i++) {
                if (selectElement.options[i].text == valueToSelect) {
                    selectElement.selectedIndex = i;
                    break;
                }
            }
        }
    </script>
    *Please mind that this will work correctly only for unique values.

    Hope that helps.

     

    Regards,
    Konstantin Dikov
    Telerik
    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 the blog feed now.
  5. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 19 Nov 2013 Link to this post

    @Princy
    Greetings and thanks for your reply,

    This doesn't work for me. I can't understand how to set the ListDataMember property to the id of the data source control?

    Here's my column:
    <telerik:GridDropDownColumn HeaderText="Person type" DropDownControlType="DropDownList" ListTextField="Name" ListValueField="Value" DataSourceID="ObjectDataSource1" DataField="PersonType" UniqueName="PersonType">
                    </telerik:GridDropDownColumn>
  6. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 19 Nov 2013 Link to this post

    @Konstantin
    Thank you for your reply,

    I already know this solution, but I wanted something better, as this solution will introduce some complications for my big project.
    Why the GridDropDownColumn behaves like this from the beginning? I mean, why it treats item text (this coming from ListTextField) as the cell value, while it should be the value of ListValueField? As I said in the initial post, the value should be EM not Employee (non-sales). And your code then may be written this way:
    function OnBatchEditSetEditorValue(sender, args) {
            args.get_cell().getElementsByTagName("select")[0].value = args.get_value();
        }
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Nov 2013 Link to this post

    Hi Ashraf,

    The ListDataMember property points to part of the dataset used for grid data-source which is the source for the GridDropDownColumn generation (can be replaced by DataSourceID). Ensure that the fields specified through the DataField/ListValueField properties are of the same data type and the entries have a precise match, otherwise you will get merely the first item from the list displayed in non-editable mode. This can also happen if you have not configured properly the GridDropDownColumn, e.g. the relations between the fields specified through the DataField/ListValueField properties.

    ASPX:
    <telerik:GridDropDownColumn UniqueName="PersonType"  DataSourceID="ObjectDataSource1"
     DropDownControlType="DropDownList" ListTextField="Name" ListValueField="ID" HeaderText="Person type"
    DataField="PersonType" />

    Thanks,
    Princy
  8. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 19 Nov 2013 Link to this post

    I'm sure that DataField and ListValueField are of the same type (they are both strings).
    The cell text is displayed properly when rows are on read only mode, but when I edit a row, the drop down list is not updated with the proper value, simply, because the value is the text content of the cell not the underlying value.

    If there's a working demo that use this feature, please guide me to it.
  9. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Nov 2013 Link to this post

    Hi Ashraf,

    Below is a sample code snippet that i tried. I have set the ListValueField and ListTextField as that of the DataField.

    ASPX:
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"
    GridLines="None" AllowPaging="true" AutoGenerateDeleteColumn="true" AllowAutomaticDeletes="true"
    AllowAutomaticInserts="true" AllowAutomaticUpdates="true">
        <MasterTableView DataKeyNames="OrderID" EditMode="Batch" CommandItemDisplay="Top"
         CommandItemSettings-ShowAddNewRecordButton="true">
            <BatchEditingSettings OpenEditingEvent="Click" />
            <Columns>
                <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" />
                <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
                <telerik:GridDropDownColumn UniqueName="ShipCountry" DataSourceID="SqlDataSource1"
                    DropDownControlType="DropDownList" ListTextField="ShipCountry" ListValueField="ShipCountry"
                    HeaderText="ShipCountry" DataField="ShipCountry" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind_newConnectionString3 %>"
        SelectCommand="SELECT distinct [ShipCountry],[CustomerID] FROM [Orders]"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind_newConnectionString3 %>"
        DeleteCommand="DELETE FROM [Orders] WHERE [OrderID] = @OrderID" InsertCommand="INSERT INTO [Orders] ([OrderID],[ShipCity], [ShipCountry]) VALUES (@OrderID, @ShipCity, @ShipCountry)"
        SelectCommand="SELECT [OrderID], [CustomerID],  [ShipCity],[ShipCountry] FROM [Orders] "
        UpdateCommand="UPDATE [Orders] SET [ShipCity] = @ShipCity,[ShipCountry] = @ShipCountry WHERE [OrderID] = @OrderID">
        <DeleteParameters>
            <asp:Parameter Name="OrderID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="OrderID"></asp:Parameter>
            <asp:Parameter Name="ShipCity"></asp:Parameter>
            <asp:Parameter Name="ShipCountry"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="OrderID"></asp:Parameter>
            <asp:Parameter Name="ShipCity"></asp:Parameter>
            <asp:Parameter Name="ShipCountry"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>

    Thanks,
    Princy
  10. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 20 Nov 2013 Link to this post

    @Princy
    Greetings and thanks for your efforts,

    Your sample works because it sets the text and value fields to the same thing (ShipCountry), but this is not my situation, as I have a lookup (Name and Value) to use as person types (see the Adventure Works sample database for details).

    More weirdly, I set the text and value fields to Name and still the problem exists.

    Maybe I'll have to wrap a solution similar to Konstantin's in an inherited grid column, and I think I should submit a bug ticket about this.
  11. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 21 Nov 2013 Link to this post

    Hello Ashraf,

    With our latest RadControls version you should be able to get the selected value correctly with the DropDownList control.

    Could you please try upgrading to Q3 2013 SP1 and see if it solves the issue.

    Looking forward to your reply.


    Regards,
    Konstantin Dikov
    Telerik
    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 the blog feed now.
  12. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 21 Nov 2013 Link to this post

    Today, when I opened Visual Studio, I found the Telerik extension prompting me for an update.
    The update was larger than 60 MB and was installed successfully. Will this fix my projects or I have to replace my old Telerik binaries somehow? I can't remember whether the binaries are copied to the bin or used from the GAC.
  13. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 25 Nov 2013 Link to this post

    I upgraded to the new version (2013.3.1114.45) and still, the problem exists although the behaviour has changed.

    I have created a contrived example and have uploaded it here. I removed the binaries to lessen the file size.
    If you can make this example work properly, to display the proper text values in cells and to set the drop down list value to the right value when opening a row for editing, then you solved my problem.


    After installing the new version, the visual designer stopped displaying Rad controls, and my tool box still refers to the old version. How to reset my tool box to use the new version?
  14. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 26 Nov 2013 Link to this post

    Hi Ashraf,

    Thank you for the sample page. It was really helpful for replicating the issue you were describing on our end.

    After examining the behavior of the GridDropDownColumn with Batch editing in your scenario and with our latest version, I may confirm that this is a bug. 

    I will forward this to our developers team so they could investigate it further and provide a fix for it in one of our future releases.

    Please note that I suggested an upgrade to our latest version, because some fixes were introduced to the GridDropDownColumn regarding the selected values, but it seems that those fixes are not covering your scenario.

    For the time being I could only suggest that you change the DropDownControlType to RadComboBox, which is working as expected.

    Please excuse us for any inconvenience caused by this.


    Regards,
    Konstantin Dikov
    Telerik
    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 the blog feed now.
  15. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 27 Nov 2013 Link to this post

    I think the GridDropDownColumn is not to be blamed. The problem is that the grid in batch mode uses the DOM as the source of data (I'll discuss this and other points in another thread for some of the problems that I faced with RadGrid in batch mode). And the DOM (the TD element) holds the text of the look up not its values. And this text can't be set as a value to the drop down list.
    It seems that the RadComboBox is able to swallow the text though. Probably, by searching its elements for this text.

    Thanks for you and for Princy for your help.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017