[Solved] Error when clicking on column head for sorting

[Joel Brom]

I am a new user.  I am attempting to get a simple grid to display and then sort data.  I have hard coded values into a datatable to simulate DB access.  The grid displays the data on page load without issue.  However, when click on any column heading an exception is encountered.  - Specified cast is not valid. 

        <telerik:RadGrid ID="ContractGrid" runat="server"  EnableViewState="False"
            Skin="Outlook" AllowSorting="True"
                    GridLines="None" AutoGenerateColumns="False" AllowPaging="true"
                     Width="1000px" >
            <PagerStyle Mode="NextPrevAndNumeric" />
            <ClientSettings>
                <Selecting AllowRowSelect="True" />
                <ClientEvents OnCommand="CommandDispatcher"
                    OnRowClick="ContractRowEdit"
                     OnRowMouseOver="ContractRowMouseOver"

                    />
            </ClientSettings>
            <SelectedItemStyle BackColor="Beige" />
            <MasterTableView
                 DataKeyNames="ContractID"
                 ClientDataKeyNames="ContractID,ContractNumber,Acronym,ProgramName,Division,
                                    MfgLocation,CustomerName,SubcontractIndicator,AddDate,ArchiveIndicator,ArchiveDate"
                 AllowAutomaticInserts="false"
                 AllowAutomaticUpdates="false"
                 GroupLoadMode="Client"
                 PageSize = "15"
                 ShowHeadersWhenNoRecords="true">
                <Columns>

                    <telerik:GridTemplateColumn SortExpression="ContractID"
                            UniqueName="ContractID" Display="false">
                        <ItemTemplate >
                            <asp:Label ID="lblContractID"
                                    Text='<%# Eval("ContractID") %>'
                                    runat="server"  />
                        </ItemTemplate>

                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn SortExpression="ContractNumber" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="ContractNumber"  HeaderText="Contract Number" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblContractNumber"
                                    Text='<%# Eval("ContractNumber") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="80px" />
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn SortExpression="Acronym" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="Acronym" HeaderText="Acronym" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblAcronym"
                                    Text='<%# Eval("Acronym") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="60px" />
                    </telerik:GridTemplateColumn>

                     <telerik:GridTemplateColumn SortExpression="ProgramName" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="ProgramName" HeaderText="Program Name" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblProgramName"
                                    Text='<%# Eval("ProgramName") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="120px" />
                    </telerik:GridTemplateColumn>

                     <telerik:GridTemplateColumn SortExpression="Division" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="Division" HeaderText="Division" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblDivision"
                                    Text='<%# Eval("Division") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="60px" />
                    </telerik:GridTemplateColumn>

                     <telerik:GridTemplateColumn SortExpression="MfgLocation" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="MfgLocation" HeaderText="Location" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblMfgLocation"
                                    Text='<%# Eval("MfgLocation") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="60px" />
                    </telerik:GridTemplateColumn>

                     <telerik:GridTemplateColumn SortExpression="CustomerName" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="CustomerName" HeaderText="Customer" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblCustomerName"
                                    Text='<%# Eval("CustomerName") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="60px" />
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn SortExpression="SubcontractIndicator"
                            UniqueName="SubcontractIndicator"
                            HeaderText="Sub<br />Contract"
                            HeaderStyle-HorizontalAlign="Center"  ItemStyle-Width="20px"
                            ItemStyle-HorizontalAlign="Center"
                            ItemStyle-Font-Bold="true" >
                        <ItemTemplate >
                            <asp:CheckBox ID="SubcontractIndicator"
                                Checked='<%# Eval("SubcontractIndicator") %>'
                                Font-Bold="true"
                                Enabled="false"
                                ToolTip="Is C4S is a subcontractor?"
                                runat="server"  />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn SortExpression="AddDate" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="AddDate" HeaderText="Date Added" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblAddDate"
                                    Text='<%# Eval("AddDate") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="60px" />
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn SortExpression="ArchiveIndicator"
                        UniqueName="ArchiveIndicator"
                        HeaderText="Archived"
                        HeaderStyle-HorizontalAlign="Center"  ItemStyle-Width="20px"
                        ItemStyle-HorizontalAlign="Center"
                        ItemStyle-Font-Bold="true" >
                        <ItemTemplate >
                            <asp:CheckBox ID="ArchiveIndicator"
                                Checked='<%# Eval("ArchiveIndicator") %>'
                                Font-Bold="true"
                                Enabled="false"
                                ToolTip="Has the customer archived this contract?"
                                runat="server"  />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn SortExpression="ArchiveDate" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="ArchiveDate" HeaderText="Date Archived" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblArchiveDate"
                                    Text='<%# Eval("ArchiveDate") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="60px" />
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn SortExpression="UpdatedDate" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="UpdatedDate" HeaderText="Date Updated" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblUpdatedDate"
                                    Text='<%# Eval("UpdatedDate") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="60px" />
                    </telerik:GridTemplateColumn>

                    <telerik:GridTemplateColumn SortExpression="UpdatedName" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="UpdatedName" HeaderText="Updated By" Display="true" >
                        <ItemTemplate >
                            <asp:Label ID="lblUpdatedName"
                                    Text='<%# Eval("UpdatedName") %>'
                                    runat="server"  />
                        </ItemTemplate>
                        <ItemStyle Width="100px" />
                    </telerik:GridTemplateColumn>


                </Columns>

            </MasterTableView>




        </telerik:RadGrid>

Code behind follows

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadGridData();
        }

    }
    protected void LoadGridData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ContractID", typeof(int));
        dt.Columns.Add("ContractNumber", typeof(string));
        dt.Columns.Add("Acronym", typeof(string));
        dt.Columns.Add("ProgramName", typeof(string));
        dt.Columns.Add("Division", typeof(string));
        dt.Columns.Add("MfgLocation", typeof(string));
        dt.Columns.Add("CustomerName", typeof(string));
        dt.Columns.Add("SubcontractIndicator", typeof(bool));
        dt.Columns.Add("ArchiveIndicator", typeof(bool));
        dt.Columns.Add("AddDate", typeof(string));
        dt.Columns.Add("ArchiveDate", typeof(string));
        dt.Columns.Add("UpdatedDate", typeof(string));
        dt.Columns.Add("UpdatedName", typeof(string));
        DataRow dr = dt.NewRow();
        dr["ContractID"] = 1;
        dr["ContractNumber"] = "ABC123DA0011";
        dr["Acronym"] = "ABC";
        dr["ProgramName"] = "Description one";
        dr["Division"] = "DSN";
        dr["MfgLocation"] = "CALIFORNIA";
        dr["CustomerName"] = "DISNEY";
        dr["SubcontractIndicator"] = true;
        dr["ArchiveIndicator"] = false;
        dr["AddDate"] = "23-May-2001";
        dr["ArchiveDate"] = DBNull.Value;
        dr["UpdatedDate"] = "01-Nov-2009";
        dr["UpdatedName"] = "Super-User, Jane";
        dt.Rows.Add(dr);
        DataRow dr2 = dt.NewRow();
        dr2["ContractID"] = 2;
        dr2["ContractNumber"] = "XYZ123DA0011";
        dr2["Acronym"] = "XYZ";
        dr2["ProgramName"] = "Description two";
        dr2["Division"] = "CND";
        dr2["MfgLocation"] = "NEW YORK";
        dr2["CustomerName"] = "CITY OF NY";
        dr2["SubcontractIndicator"] = false;
        dr2["ArchiveIndicator"] = true;
        dr2["AddDate"] = "23-Oct-2002";
        dr2["ArchiveDate"] = "01-Nov-2005";
        dr2["UpdatedDate"] = "20-Nov-2005";
        dr2["UpdatedName"] = "Super-User, Jane";
        dt.Rows.Add(dr2);


        ContractGrid.DataSource = dt;

    }
    protected void ContractGrid_PageIndexChanged(object source, Telerik.Web.UI.GridPageChangedEventArgs e)
    {
        LoadGridData();
    }

    protected void ContractGrid_SortCommand(object source, Telerik.Web.UI.GridSortCommandEventArgs e)
    {
        LoadGridData();
    }

[Martin]

Hello Joel Brom,

I have tried the following code and it ran as expected on my end:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadGrid ID="ContractGrid" runat="server" EnableViewState="False" Skin="Outlook"
        AllowSorting="True" GridLines="None" AutoGenerateColumns="False" AllowPaging="true"
        Width="1000px" OnSortCommand="ContractGrid_SortCommand"
        onneeddatasource="ContractGrid_NeedDataSource">
        <PagerStyle Mode="NextPrevAndNumeric" />
        <ClientSettings>
            <Selecting AllowRowSelect="True" />
            <%--<ClientEvents OnCommand="CommandDispatcher" OnRowClick="ContractRowEdit" OnRowMouseOver="ContractRowMouseOver" />--%>
        </ClientSettings>
        <SelectedItemStyle BackColor="Beige" />
        <MasterTableView DataKeyNames="ContractID" ClientDataKeyNames="ContractID,ContractNumber,Acronym,ProgramName,Division,
                                    MfgLocation,CustomerName,SubcontractIndicator,AddDate,ArchiveIndicator,ArchiveDate"
            AllowAutomaticInserts="false" AllowAutomaticUpdates="false" GroupLoadMode="Client"
            PageSize="15" ShowHeadersWhenNoRecords="true">
            <Columns>
                <telerik:GridTemplateColumn SortExpression="ContractID" UniqueName="ContractID" Display="false">
                    <ItemTemplate>
                        <asp:Label ID="lblContractID" Text='<%# Eval("ContractID") %>' runat="server" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="ContractNumber" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="ContractNumber" HeaderText="Contract Number" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblContractNumber" Text='<%# Eval("ContractNumber") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="80px" />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="Acronym" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="Acronym" HeaderText="Acronym" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblAcronym" Text='<%# Eval("Acronym") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="60px" />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="ProgramName" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="ProgramName" HeaderText="Program Name" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblProgramName" Text='<%# Eval("ProgramName") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="120px" />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="Division" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="Division" HeaderText="Division" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblDivision" Text='<%# Eval("Division") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="60px" />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="MfgLocation" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="MfgLocation" HeaderText="Location" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblMfgLocation" Text='<%# Eval("MfgLocation") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="60px" />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="CustomerName" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="CustomerName" HeaderText="Customer" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblCustomerName" Text='<%# Eval("CustomerName") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="60px" />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="SubcontractIndicator" UniqueName="SubcontractIndicator"
                    HeaderText="Sub<br />Contract" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="20px"
                    ItemStyle-HorizontalAlign="Center" ItemStyle-Font-Bold="true">
                    <ItemTemplate>
                        <asp:CheckBox ID="SubcontractIndicator" Checked='<%# Eval("SubcontractIndicator") %>'
                            Font-Bold="true" Enabled="false" ToolTip="Is C4S is a subcontractor?" runat="server" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="AddDate" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="AddDate" HeaderText="Date Added" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblAddDate" Text='<%# Eval("AddDate") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="60px" />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="ArchiveIndicator" UniqueName="ArchiveIndicator"
                    HeaderText="Archived" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="20px"
                    ItemStyle-HorizontalAlign="Center" ItemStyle-Font-Bold="true">
                    <ItemTemplate>
                        <asp:CheckBox ID="ArchiveIndicator" Checked='<%# Eval("ArchiveIndicator") %>' Font-Bold="true"
                            Enabled="false" ToolTip="Has the customer archived this contract?" runat="server" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="ArchiveDate" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="ArchiveDate" HeaderText="Date Archived" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblArchiveDate" Text='<%# Eval("ArchiveDate") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="60px" />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="UpdatedDate" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="UpdatedDate" HeaderText="Date Updated" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblUpdatedDate" Text='<%# Eval("UpdatedDate") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="60px" />
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn SortExpression="UpdatedName" HeaderStyle-HorizontalAlign="Center"
                    UniqueName="UpdatedName" HeaderText="Updated By" Display="true">
                    <ItemTemplate>
                        <asp:Label ID="lblUpdatedName" Text='<%# Eval("UpdatedName") %>' runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="100px" />
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
</telerik:RadGrid>

Code-behind:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //LoadGridData();
        }
    }
    protected void LoadGridData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ContractID", typeof(int));
        dt.Columns.Add("ContractNumber", typeof(string));
        dt.Columns.Add("Acronym", typeof(string));
        dt.Columns.Add("ProgramName", typeof(string));
        dt.Columns.Add("Division", typeof(string));
        dt.Columns.Add("MfgLocation", typeof(string));
        dt.Columns.Add("CustomerName", typeof(string));
        dt.Columns.Add("SubcontractIndicator", typeof(bool));
        dt.Columns.Add("ArchiveIndicator", typeof(bool));
        dt.Columns.Add("AddDate", typeof(string));
        dt.Columns.Add("ArchiveDate", typeof(string));
        dt.Columns.Add("UpdatedDate", typeof(string));
        dt.Columns.Add("UpdatedName", typeof(string));
        DataRow dr = dt.NewRow();
        dr["ContractID"] = 1;
        dr["ContractNumber"] = "ABC123DA0011";
        dr["Acronym"] = "ABC";
        dr["ProgramName"] = "Description one";
        dr["Division"] = "DSN";
        dr["MfgLocation"] = "CALIFORNIA";
        dr["CustomerName"] = "DISNEY";
        dr["SubcontractIndicator"] = true;
        dr["ArchiveIndicator"] = false;
        dr["AddDate"] = "23-May-2001";
        dr["ArchiveDate"] = DBNull.Value;
        dr["UpdatedDate"] = "01-Nov-2009";
        dr["UpdatedName"] = "Super-User, Jane";
        dt.Rows.Add(dr);
        DataRow dr2 = dt.NewRow();
        dr2["ContractID"] = 2;
        dr2["ContractNumber"] = "XYZ123DA0011";
        dr2["Acronym"] = "XYZ";
        dr2["ProgramName"] = "Description two";
        dr2["Division"] = "CND";
        dr2["MfgLocation"] = "NEW YORK";
        dr2["CustomerName"] = "CITY OF NY";
        dr2["SubcontractIndicator"] = false;
        dr2["ArchiveIndicator"] = true;
        dr2["AddDate"] = "23-Oct-2002";
        dr2["ArchiveDate"] = "01-Nov-2005";
        dr2["UpdatedDate"] = "20-Nov-2005";
        dr2["UpdatedName"] = "Super-User, Jane";
        dt.Rows.Add(dr2);

        ContractGrid.DataSource = dt;
    }

    protected void ContractGrid_PageIndexChanged(object source, Telerik.Web.UI.GridPageChangedEventArgs e)
    {
        //LoadGridData();
        //ContractGrid.DataBind();
    }

    protected void ContractGrid_SortCommand(object source, Telerik.Web.UI.GridSortCommandEventArgs e)
    {
        //LoadGridData();
        //ContractGrid.DataBind();
    }

    protected void ContractGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        LoadGridData();
    }

I hope this helps,
Martin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Joel Brom]

Thank you for your assistance.  It is now working.
Is there any documentation that explains what each of the grid attributes does.  The Basic Sorting Help does not have any mention of the different event handlers and when they are to be used.  I have read and reread the sort expressions and still do not understand what I would use them for.
I have looked at the tutorials and they appear to be cookbooks on how to generate a feature via the UI.

[Martin]

Hello Joel Brom,

The only corrections I have made to your initial code were:

• Remove the "client-events" section from the grid's markup (because I could not find any handlers for these events).
• Bind the grid using the NeedDataSource event (so called Advanced data binding)

For more information about the RadGrid client-side object you can check this help article:

Getting familiar with client-side API

The advanced data binding approach is described here:

Advanced Data-binding

As to the sort expressions - you can use them to change the grid sorting either from your code or directly in the markup. For example you can apply default sorting on initial load or change the sorting in another event.

Regards,
Martin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.