GridDropdown column sample project

[Sreekanth]

Hi,

I am currnetly working on GridDropdown column,Here am unable to find the assign data source to the GridDropdown column.
I dont want to use Template Columns,Can you please provide me a working sample project.

I tried the below links ,those are not helpfull

http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/columntypes/defaultcs.aspx
http://www.telerik.com/help/aspnet/grid/grdcustomizeconfiguregriddropdowncolumn.html


Regards,
Sreekanth J

[Princy]

Hello Sreekanth,

When in browser mode, GridDropDownColumn looks and behaves like a standard GridBoundColumn. When in edit mode, however, it displays a drop-down control for each edited cell in the column.

Please have a look into following code snippet which shows how to populate GridDropDownColumn in normal and edit mode. Hope it helps.

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridDataItem)
       {
           GridDataItem item = (GridDataItem)e.Item;
           item["GridDropDownColumn"].Text = //assign value to GridDropDownColumn in normal mode
       }
      if (e.Item is GridEditableItem && e.Item.IsInEditMode)
       {
          GridEditableItem editedItem = e.Item as GridDataItem;
          GridEditManager editMan = editedItem.EditManager;
          GridDropDownListColumnEditor editor = (GridDropDownListColumnEditor)          (editMan.GetColumnEditor( "GridDropDownColumn"));
          DropDownList ddList = editor.DropDownListControl;
          ddList.DataSource=//assign you dataSource
       }
   }

Thanks
Princy.

[SDI]

I posted the same question. Its when you do this server-side it doesnt seem to work, at least we cant get it to cast the columneditor to the griddropdowncolumneditor. Sreekanth, if you can get this to work can you please post your code, or any code that you needed that was necessary. We do the code below and myEditManager.GetColumnEditor("PhoneTypeValuesId") is a GridNumericColumnEditor, but when you try the "TryCast" it returns nothing. Normal CType errors out with the cannot convert to 'Class GridDropDownColumnEditor'. We are not changing the type anywhere else, I think Telerik converts it by itself to the GridNumeric based off of the datatype. Its a Long which is the look up number for the phonetype in a different table. Thanks Skeekanth if you can get this to work!

Protected Sub RadGridProgramPhone_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGridProgramPhone.ItemDataBound

        Try

            If (TypeOf e.Item Is GridEditableItem AndAlso CType(e.Item, GridEditableItem).IsInEditMode) Then

                Dim myEditedItem As GridEditableItem = TryCast(e.Item, GridEditableItem)
                Dim myEditManager As GridEditManager = myEditedItem.EditManager

                Dim myColumnEditor As GridDropDownColumnEditor
                myColumnEditor = TryCast(myEditManager.GetColumnEditor("PhoneTypeValuesId"), GridDropDownColumnEditor)

                If myColumnEditor IsNot Nothing Then
                    myColumnEditor.DataSource = GetPhoneNumberTypes()
                    myColumnEditor.DataTextField = "CategoryValue"
                    myColumnEditor.DataValueField = "CategoryValueID"
                    myColumnEditor.DataBind()
                End If

            End If

        Catch ex As Exception
            Me.ShowError(ex.Message, String.Concat("RadGridProgramPhone.ItemDataBound - ", ex.Source), ex.StackTrace)
        End Try

    End Sub

[Andrey]

Hello,

Sreekanth, I have prepared sample project to illustrate how to use GridDropDown column within RadGrid.

Brian, could you share the content of the APSX file and the rest of the code in the code-behind file? Thus all the people who want to help you will have better idea how your code is organized and will be able to give you better suggestions.

Greetings,
Andrey
the Telerik team

[SDI]

Okay I got back to this. I changed up the grid. Here is the aspx:

<telerik:RadGrid runat="server" ID="RadGridProgramPhone" Height="160" GridLines="None" AllowMultiRowEdit="false" AllowAutomaticDeletes="true"
    AllowAutomaticInserts="true" AllowAutomaticUpdates="true" AutoGenerateColumns="false" EnableViewState="false">
    <MasterTableView DataKeyNames="ProgramPhoneListId, ProgramId" Width="100%" CommandItemDisplay="Top"
    EditMode="InPlace" TableLayout="Fixed" AutoGenerateColumns="False"
    NoMasterRecordsText="Please click the 'Add' button to add a program phone number..." >
        <Columns>
            <%-- this is the Pencil column for editing the record --%>
            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" >
                <ItemStyle HorizontalAlign="Center" CssClass="GridRecordButton"  />
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn DataField="ProgramPhoneListId" DataType="System.Int64" UniqueName="ProgramPhoneListId" Display="false" />
            <telerik:GridBoundColumn DataField="ProgramId" DataType="System.Int64" UniqueName="ProgramId" Display="false" />
            <telerik:GridCheckBoxColumn DataField="IsPrimary" DataType="System.Boolean" ColumnEditorID="IsPrimaryEditor" HeaderText="Primary?" UniqueName="IsPrimary" ItemStyle-Width="55px" HeaderStyle-Width="55px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" EditFormColumnIndex="0"/>
            <telerik:GridBoundColumn DataField="AliasName" DataType="System.String" ColumnEditorID="AliasNameEditor" HeaderText="Name" UniqueName="AliasName" ItemStyle-Width="150px" HeaderStyle-Width="150px" EditFormColumnIndex="1"/>
            <telerik:GridMaskedColumn DataField="PhoneNumber" DataType="System.String" ColumnEditorID="PhoneNumberEditor" HeaderText="Number" UniqueName="PhoneNumber" ItemStyle-Width="100px" HeaderStyle-Width="100px" EditFormColumnIndex="2"/>
            <telerik:GridNumericColumn DataField="Extension" DataType="System.String" ColumnEditorID="ExtensionEditor" HeaderText="Ext." UniqueName="Extension" ItemStyle-Width="50px" HeaderStyle-Width="50px" EditFormColumnIndex="3"/>
            <telerik:GridDropDownColumn DataField="PhoneTypeValuesId" DataType="System.Int64" ColumnEditorID="PhoneTypeValuesIdEditor" HeaderText="Type" DropDownControlType="RadComboBox" UniqueName="PhoneTypeValuesId" ItemStyle-Width="100px" HeaderStyle-Width="100px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" EditFormColumnIndex="4"/>
            <%-- this is the Delete column for deleting arecord --%>
            <telerik:GridButtonColumn ConfirmText="Delete this phone number?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                <ItemStyle HorizontalAlign="Center" CssClass="GridRecordButton" />
            </telerik:GridButtonColumn>
        </Columns>
        <%-- the edit record decorate it up--%>
        <EditFormSettings ColumnNumber="5" CaptionDataField="PhoneNumber" InsertCaption="New Phone Number" CaptionFormatString="Edit properties of Number {0}">
            <FormTableItemStyle Wrap="False"></FormTableItemStyle>
            <FormCaptionStyle CssClass="EditFormHeader" />
            <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White" Width="100%" />
            <FormTableStyle CellSpacing="0" CellPadding="2" Height="110px" BackColor="White" />
            <FormTableAlternatingItemStyle Wrap="False" />
            <EditColumn ButtonType="ImageButton" InsertText="Insert Number" UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit" />
            <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow" />
        </EditFormSettings>

    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true">
        <ClientEvents OnRowDblClick="RadGridProgramPhoneRowDblClick" />
    </ClientSettings>

</telerik:RadGrid>

The data is a data table that gets rebinded on the server-side NeedDataSource. I click the edit pencil and it never gets itself into the edit mode. The AJAX fires and that's it, it just refreshes never shows the edit controls. I can click the "Add..." grid button and it then shows the new editable row. I looked at the sample, which seems to work nice, but we cant mimic it. Double-click just spins the AJAX, thats it as well. Am I missing some setting? It fills with data properly, but we cant edit it!!


Thanks!

[SDI]

Well I changed the EnableViewState = True and it worked. I cant however type in the GridMaskedColumnEditor. Do I have to change something to get it enabled?

<telerik:GridCheckBoxColumnEditor ID="IsPrimaryEditor" runat="server" CheckBoxStyle-Width="100%" />
<telerik:GridTextBoxColumnEditor ID="AliasNameEditor" runat="server" TextBoxStyle-Width="100%" />
<telerik:GridMaskedColumnEditor ID="PhoneNumberEditor" runat="server" MaskedTextBox-Width="95%" MaskedTextBox-PromptChar="_" MaskedTextBox-DisplayMask="(###) ### - ####" MaskedTextBox-SelectionOnFocus="SelectAll"/>
<telerik:GridTextBoxColumnEditor ID="ExtensionEditor" runat="server" TextBoxStyle-Width="100%"  />
<telerik:GridDropDownListColumnEditor ID="PhoneTypeValuesIdEditor" runat="server" DropDownStyle-Width="100%" />

Thanks!
SDI

[Andrey]

Hi,

Based on the provided code snippets the only flaw I could see is that the DataField for the GridMaskedColumn do not conform the mask. Check that the DataField data conforms this (###) ### - #### format.

If the DataField conform this format, but you still have problems running the project, share runnable version of your code so we can test/debug it locally.

Regards,
Andrey
the Telerik team

[SDI]

Ahhh I found this mask= needs to be on the column created - for our purposes client-side. Thanks for the lead. It works now!

<telerik:GridMaskedColumn DataField="PhoneNumber" Mask="(###) ### - ####" 

Thanks Telerik team!!!
SDI