Batch Grid - a template column with different objects in a template column

[Alla]

I am creating a batch grid.  One of the cells in this grid is telerik:GridTemplateColumn ("Value" in the code below)  The EtidItemTemplate contains different objects.  Depending on the selected field type, only one of the objects is displayed.  So, if the field type is date, a calendar will be displayed and the other types - hidden.

Here are the issues I am coming across at the moment:
1. if the field type is text, the first time the user enters text into the box and moves out, the selected value is displayed as blank.  If I re-open the text box and enter the value once more, it shows up.
2. If field type is telerik:RadComboBox, I would like the ItemTemplate to display a comma delimited list of descriptions but the best I can do is a comma delimited list of IDs.  I need to be able to save the selection as list of IDs but display a list of descriptions to the user.
3. if I am editing an item that was saved earlier, the change is not processed.  I only see delete and insert being processed.

Here is the code for the aspx and code behind.
Thank you!

' CriteriaBuilderSimple.aspx code:

<%@ Page Title="" Language="VB" MasterPageFile="~/MNI.master" AutoEventWireup="false" CodeFile="CriteriaBuilderSimple.aspx.vb" Inherits="CriteriaBuilder_CriteriaBuilderSimple" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css" id="StyleSheet" runat="server">
        li.rlbItem .rlbText {
            color: red;
        }

        .message {
            line-height: 37px;
        }

        .RadGrid .rgRow,
        .RadGrid .rgAltRow {
            height: 30px;
        }

        .RadGrid_Silk .rgRow,
        .RadGrid_Silk .rgAltRow,
        .RadGrid_Glow .rgRow,
        .RadGrid_Glow .rgAltRow {
            height: 36px;
        }

        .RadGrid_MetroTouch .rgRow,
        .RadGrid_MetroTouch .rgAltRow,
        .RadGrid_BlackMetroTouch .rgRow,
        .RadGrid_BlackMetroTouch .rgAltRow {
            height: 46px;
        }
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphContent" runat="Server">

    <asp:Panel runat="Server" ID="pnlClientSideMethods">
        <script type="text/javascript">
            var _grid = null;

            var _currentRow = null;
            var _currentCell = null;
            var _currentTableView = null;
            var _currentColumn = null;
            var _currentColumnUniqueName = null;

            var _currentFieldCell = null;
            var _currentValueCell = null;

            var strValueDisplay;

            var _currentCellsProcessed = 0;
            var _cellsToProcess = 0;

            function BatchEditOpened(sender, args) {
                _grid = sender;
                _currentTableView = args.get_tableView();

                _currentRow = args.get_row();
                _currentCell = args.get_cell();
                _currentColumn = args.get_column();
                _currentColumnUniqueName = args.get_columnUniqueName();

                if (_cellsToProcess === 0)
                    _cellsToProcess = _currentTableView._columnsInternal.length - 1; // since array starts with 0, stop the loop at length - 1

                if (_currentCellsProcessed === _cellsToProcess) {
                    _currentCellsProcessed = 0; // re-set the total number of processed cells since we are moving to a different row

                    // re-set current row cells
                    _currentFieldCell = null;
                    _currentValueCell = null;
                }

                // we are in the loop over all cells in the row, perform necessary validations to set all parameters of the newly selected row
                if (_currentCellsProcessed < _cellsToProcess) {
                    if (_currentColumnUniqueName === "FieldID") {
                        _currentFieldCell = args.get_cell();
                    }
                    else if (_currentColumnUniqueName === "Value") {
                        _currentValueCell = args.get_cell();
                    }


                }
                _currentCellsProcessed++; // one more cell has been processed, count it

                if (_currentCellsProcessed >= _cellsToProcess) {
                    // by now, all the cells in the row have been processed, set the initial field type values
                    if (_currentFieldCell != null && _currentValueCell != null) {
                        var strValue = sender.get_batchEditingManager().getCellValue(_currentFieldCell);
                        HandleFieldType(sender, _currentRow, strValue);


                        var textBox = $telerik.findControl(args.get_cell(), "txtValue");
                        var list = $telerik.findControl(args.get_cell(), "ddlProduct");

                        var selectedItems = textBox.get_value();
                        if (selectedItems.length > 0) {
                            var items = selectedItems.split(",");
                            var itemsCount = items.length;
                            for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
                                var item = items[itemIndex];

                                var listItem = list.findItemByValue(item)
                                if (listItem != null)
                                    listItem.set_checked(true);
                            }
                        }
                    }
                }
            }

            function FieldTypeSelected(sender, args) {
                if (_currentRow && _currentFieldCell && _grid) {
                    var objItem = args.get_item();
                    var strValue = objItem.get_text();
                    if (strValue != "") {
                        HandleFieldType(_grid, _currentRow, strValue);
                    }
                }
            }

            function TextTypeSelected(sender, eventArgs) {
                if (_currentRow && _currentValueCell && _grid) {
                    var lblValue = $telerik.findElement(_currentRow, "lblValue");
                    if (lblValue != null)
                        lblValue.innerHTML = eventArgs.get_newValue();
                }
            }

            function DateTypeSelected(sender, args) {
                if (_currentRow && _currentValueCell && _grid) {
                    var calendarBox = sender;
                    var valueBox = $telerik.findControl(_currentRow, "txtValue");
                    valueBox.set_value(calendarBox.get_selectedDate().format("MM/dd/yyyy"));
                }
            }

            function ComboBoxTypeSelected(sender, args) {
                if (_currentRow && _currentValueCell && _grid) {
                    var strValue = "";
                    strValueDisplay = "";

                    var items = sender.get_checkedItems();
                    var itemsCount = items.length;

                    for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
                        var item = items[itemIndex];
                        if (strValue != "")
                            strValue += ",";
                        strValue += item.get_value();

                        if (strValueDisplay != "")
                            strValueDisplay += ",";
                        strValueDisplay += item.get_text();
                    }

                    var valueBox = $telerik.findControl(_currentRow, "txtValue");
                    valueBox.set_value(strValue);

                }
            }

            function DropDownTypeSelected(sender, args) {
                if (_currentRow && _currentValueCell && _grid) {
                    var valueBox = $telerik.findControl(_currentRow, "txtValue");
                    valueBox.set_value(sender.get_selectedItem().get_value() + " " + sender.get_selectedItem().get_text());
                }
            }
            function HandleFieldType(sender, row, fieldType) {
                var andorBox = $telerik.findControl(row, "ddlAndOr");
                var operatorBox = $telerik.findControl(row, "ddlOperator");
                var textBox = $telerik.findControl(row, "txtValue");
                var calendarBox = $telerik.findControl(row, "calValue");
                var productBox = $telerik.findControl(row, "ddlProduct");

                var strValue = "";
                if (textBox != null) {
                    strValue = textBox.get_value();

                    textBox.set_visible(false);
                    calendarBox.set_visible(false);
                    productBox.set_visible(false);

                    if (fieldType === "Application Date") {
                        calendarBox.set_visible(true);
                    }
                    else if (fieldType === "Product") {
                        productBox.set_visible(true);
                    }
                    else if (fieldType === "") {
                        // field type not yet selected, do not allow operator or value selection
                        textBox.disable();
                        operatorBox.set_enabled(false);
                    }
                    else {
                        textBox.set_visible(true);
                        textBox.enable();
                        operatorBox.set_enabled(true);
                    }
                }
            }
        </script>
    </asp:Panel>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="SavedChangesList" />
                </UpdatedControls>
            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecorationZoneID="demo" DecoratedControls="All" EnableRoundedCorners="false" />

    <div id="demo" class="demo-container no-bg">

        <telerik:RadListBox runat="server" ID="SavedChangesList" Width="600px" Height="200px" Visible="false"></telerik:RadListBox>

        <telerik:RadGrid ID="RadGrid1" GridLines="Both" runat="server" AllowAutomaticDeletes="True"
            AllowAutomaticInserts="True" PageSize="50"
            AllowAutomaticUpdates="True" AllowPaging="False"
            AutoGenerateColumns="False" OnBatchEditCommand="RadGrid1_BatchEditCommand"
            DataSourceID="dsCriteria">

            <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="ID"
                DataSourceID="dsCriteria" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False" InsertItemDisplay="Bottom">

                <BatchEditingSettings EditType="Row" />
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="Sequence" SortOrder="Ascending" />
                </SortExpressions>

                <Columns>

                    <telerik:GridBoundColumn DataField="Sequence" SortExpression="Sequence" UniqueName="Sequence" Visible="false">
                    </telerik:GridBoundColumn>

                    <telerik:GridTemplateColumn HeaderText="And / Or" UniqueName="AndOr" DataField="AndOr" HeaderStyle-Width="100px">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblAndOr"><%# Eval("AndOr")%></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadDropDownList runat="server" ID="ddlAndOr" DataValueField="AndOr" DataTextField="AndOr" Width="50px" DefaultMessage="And" SelectedValue='<%# Bind("AndOr")%>'>
                                <Items>
                                    <telerik:DropDownListItem Value="And" Text="And" />
                                    <telerik:DropDownListItem Value="Or" Text="Or" />
                                </Items>
                            </telerik:RadDropDownList>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn HeaderText="Field" HeaderStyle-Width="200px" UniqueName="FieldID" DataField="FieldID">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblFieldDisplayName"><%# Eval("FieldDisplayName")%></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadDropDownList runat="server" ID="ddlAvailableFields" DataValueField="ID" AppendDataBoundItems="true"
                                DataTextField="FieldDisplayName" DataSourceID="dsAvailableFields" OnClientItemSelected="FieldTypeSelected">
                            </telerik:RadDropDownList>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn HeaderText="Operator" UniqueName="Operator" DataField="Operator" HeaderStyle-Width="100px">
                        <ItemTemplate>
                            <%# Eval("Operator")%>
                        </ItemTemplate>
                        <EditItemTemplate>

                            <telerik:RadDropDownList runat="server" ID="ddlOperator" DataValueField="Operator" DataTextField="Operator">
                                <Items>
                                    <telerik:DropDownListItem Value="=" Text="=" />
                                    <telerik:DropDownListItem Value="<>" Text="<>" />
                                    <telerik:DropDownListItem Value=">" Text=">" />
                                    <telerik:DropDownListItem Value="<" Text="<" />
                                    <telerik:DropDownListItem Value=">=" Text=">=" />
                                    <telerik:DropDownListItem Value="<=" Text="<=" />
                                    <telerik:DropDownListItem Value="Contains" Text="Contains" />
                                </Items>
                            </telerik:RadDropDownList>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="Value" HeaderStyle-Width="100%" HeaderText="Value" DataField="Value">
                        <ItemTemplate>
                            <asp:Label ID="lblValue" runat="server" Text='<%# Eval("Value")%>'></asp:Label>
                            <asp:Label ID="lblValueDisplay" runat="server" Text='<%# Eval("ValueDisplay")%>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadTextBox ID="txtValue" runat="server" Visible="true" Text='<%# Bind("Value")%>'>
                                <ClientEvents OnValueChanged="TextTypeSelected" />
                            </telerik:RadTextBox>

                            <telerik:RadDatePicker ID="calValue" runat="server" DateInput-DateFormat="MM/dd/yyyy" DateInput-DisplayDateFormat="MM/dd/yyyy" DbSelectedDate='<%# Bind("Value") %>' DateInput-OnClientDateChanged="DateTypeSelected"></telerik:RadDatePicker>

                            <telerik:RadComboBox runat="server" CheckBoxes="true" ID="ddlProduct" DataValueField="ID"
                                DataTextField="Description" DataSourceID="dsProduct" OnClientDropDownClosed="ComboBoxTypeSelected" DropDownAutoWidth="Enabled" >
                            </telerik:RadComboBox>

                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>

                    <telerik:GridButtonColumn ConfirmText="Delete?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" HeaderText="Delete" HeaderStyle-Width="50px" ButtonType="ImageButton"
                        CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                    </telerik:GridButtonColumn>

                </Columns>

            </MasterTableView>

            <ClientSettings>
                <ClientEvents OnBatchEditOpened="BatchEditOpened" />
            </ClientSettings>

        </telerik:RadGrid>
        <div style="display: none;">
            <telerik:RadCalendar ID="sharedCalendar" runat="server" EnableMultiSelect="false">
            </telerik:RadCalendar>
        </div>
    </div>

    <asp:SqlDataSource ID="dsCriteria" runat="server"
        SelectCommandType="StoredProcedure" SelectCommand="mnetwork.dbo.usp_LC_SelectCriteria"
        DeleteCommandType="StoredProcedure" DeleteCommand="mnetwork.dbo.usp_LC_DeleteCriteria"
        UpdateCommandType="StoredProcedure" UpdateCommand="mnetwork.dbo.usp_LC_UpsertCriteria"
        InsertCommandType="StoredProcedure" InsertCommand="mnetwork.dbo.usp_LC_UpsertCriteria">

        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </DeleteParameters>

        <InsertParameters>
            <asp:Parameter Name="Sequence" Type="String"></asp:Parameter>
            <asp:Parameter Name="FieldID" Type="String"></asp:Parameter>
            <asp:Parameter Name="Operator" Type="String"></asp:Parameter>
            <asp:Parameter Name="Value" Type="String"></asp:Parameter>
        </InsertParameters>

        <UpdateParameters>
            <asp:Parameter Name="Sequence" Type="String"></asp:Parameter>
            <asp:Parameter Name="FieldID" Type="String"></asp:Parameter>
            <asp:Parameter Name="Operator" Type="String"></asp:Parameter>
            <asp:Parameter Name="Value" Type="String"></asp:Parameter>
        </UpdateParameters>

    </asp:SqlDataSource>

    <asp:SqlDataSource ID="dsAvailableFields" runat="server" SelectCommandType="StoredProcedure" SelectCommand="mnetwork.dbo.usp_LC_SelectAvailableFields"></asp:SqlDataSource>
    <asp:SqlDataSource ID="dsProduct" runat="server" SelectCommandType="StoredProcedure" SelectCommand="mnetwork.dbo.uspGetProductList"></asp:SqlDataSource>

</asp:Content> 


' CriteriaBuilderSimple.aspx.vb code:

Imports System
Imports Telerik.Web.UI
Imports System.Collections

Imports System.Data

Partial Class CriteriaBuilder_CriteriaBuilderSimple
    Inherits Data1003Base

    Private _commonDataAccess As New Mnetweb.Common.DataAccess()
    Private _cnxString As String = _commonDataAccess.GetMNISQLSingleUserConnection()

    Protected Sub RadGrid1_BatchEditCommand(sender As Object, e As Telerik.Web.UI.GridBatchEditingEventArgs) Handles RadGrid1.BatchEditCommand
        SavedChangesList.Visible = True
    End Sub

    Protected Sub RadGrid1_ItemUpdated(source As Object, e As Telerik.Web.UI.GridUpdatedEventArgs) Handles RadGrid1.ItemUpdated
        Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
        Dim id As [String] = item.GetDataKeyValue("ID").ToString()
        If e.Exception IsNot Nothing Then
            e.KeepInEditMode = True
            e.ExceptionHandled = True
            NotifyUser("Criteria cannot be updated. " + e.Exception.Message)
        Else
            NotifyUser("Criteria updated!")
        End If
    End Sub

    Protected Sub RadGrid1_ItemInserted(source As Object, e As GridInsertedEventArgs) Handles RadGrid1.ItemInserted
        If e.Exception IsNot Nothing Then
            e.ExceptionHandled = True
            NotifyUser("Criteria cannot be inserted. " + e.Exception.Message)
        Else
            NotifyUser("New criteria inserted!")
        End If
    End Sub

    Protected Sub RadGrid1_ItemDeleted(source As Object, e As GridDeletedEventArgs) Handles RadGrid1.ItemDeleted
        Dim dataItem As GridDataItem = DirectCast(e.Item, GridDataItem)
        Dim id As [String] = dataItem.GetDataKeyValue("ID").ToString()
        If e.Exception IsNot Nothing Then
            e.ExceptionHandled = True
            NotifyUser("Criteria cannot be deleted. " + e.Exception.Message)
        Else
            NotifyUser("Criteria deleted!")
        End If
    End Sub

    Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated
        If (TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode) Then
            Dim editItem As GridEditableItem = CType(e.Item, GridEditableItem)
            Dim picker As RadDatePicker = CType(editItem.FindControl("calValue"), RadDatePicker)
            picker.SharedCalendar = sharedCalendar
        End If
    End Sub

    Private Sub NotifyUser(message As String)
        Dim commandListItem As New RadListBoxItem()
        commandListItem.Text = message
        SavedChangesList.Items.Add(commandListItem)
    End Sub

    Protected Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init
        dsCriteria.ConnectionString = _cnxString
        dsAvailableFields.ConnectionString = _cnxString
        dsProduct.ConnectionString = _cnxString
    End Sub

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        pnlClientSideMethods.DataBind()
    End Sub

End Class

[Konstantin Dikov]

Hi Alla,

Please refer to the answer in the support tickets that you have opened regarding the same issues:

• Ticket ID: 907636
• Ticket ID: 908673
  Ticket ID: 908673Ticket ID: 908673
  

Best Regards,
Konstantin Dikov
Telerik