Add New Record Button Not Showing When No Data

[Richard Weeks]

I have a RadGrid where I expect the "Add New" button to appear on the top of the grid even when there are no records present. In fact, it only appears when there are 1 or more records present. Furthermore, the "No records to display" text is not being shown when the grid is empty. Here is my code:

 

<telerik:RadGrid
ID="RadGrid"
Width="820"
runat="server"
AutoGenerateColumns="False"
OnNeedDataSource="RadGrid_NeedDataSource"
OnDeleteCommand="RadGrid_Command"
OnInsertCommand="RadGrid_Command"
OnUpdateCommand="RadGrid_Command"
GridLines="None"
ShowFooter="True"
GroupingEnabled="False"
Skin="Telerik">
<MasterTableView
DataKeyNames="CategoryID"
GridLines="None"
CommandItemDisplay="Top"
NoMasterRecordsText="No Categories have been added.">
<CommandItemSettings
AddNewRecordText="Add New Category"
RefreshText="Refresh Category List" />
<Columns>
<telerik:GridButtonColumn
CommandName="Delete"
Text="Delete"
UniqueName="Delete"
ButtonType="ImageButton">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn
DataField="CategoryID"
HeaderText="CategoryID"
UniqueName="CategoryID"
ReadOnly="True">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
DataField="CategoryTitle"
HeaderText="CategoryTitle"
UniqueName="CategoryTitle">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn
DataField="CategoryDescription"
HeaderText="CategoryDescription"
UniqueName="CategoryDescription">
</telerik:GridBoundColumn>
<telerik:GridEditCommandColumn
ButtonType="ImageButton">
</telerik:GridEditCommandColumn>
</Columns>
<EditFormSettings
ColumnNumber="2"
CaptionFormatString="Edit details for category with ID {0}"
CaptionDataField="CategoryID">
<FormTableItemStyle
Wrap="False">
</FormTableItemStyle>
<FormCaptionStyle
CssClass="EditFormHeader">
</FormCaptionStyle>
<FormMainTableStyle
CellSpacing="0"
CellPadding="3"
Width="100%" />
<FormTableStyle
GridLines="Horizontal"
CellSpacing="0"
CellPadding="2"
CssClass="module"
Height="110px"
Width="100%" />
<FormTableAlternatingItemStyle
Wrap="False">
</FormTableAlternatingItemStyle>
<FormStyle
Width="100%"
BackColor="#EEF2EA">
</FormStyle>
<EditColumn
UpdateText="Update record"
UniqueName="EditCommandColumn1"
CancelText="Cancel edit">
</EditColumn>
<FormTableButtonRowStyle
HorizontalAlign="Right"
CssClass="EditFormButtonRow">
</FormTableButtonRowStyle>
</EditFormSettings>
<ExpandCollapseColumn>
<HeaderStyle
Width="19px">
</HeaderStyle>
</ExpandCollapseColumn>
<RowIndicatorColumn>
<HeaderStyle
Width="20px" />
</RowIndicatorColumn>
</MasterTableView>
<FilterMenu
EnableTheming="True">
<CollapseAnimation
Duration="200"
Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid>

 

And some of code behind:

 

 

protected void RadGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
this.categories = new Categories();

this.dataSet = this.categories.Select();

this.RadGrid.DataSource = this.dataSet;
}

 

 

Why is it not possible to add a new record when the dataset is empty (null) and why is the no records message not showing? I have insert/update/delete with ReBind working no worries apart from this.

Thanks in advance,
Richard

[Hus Damen]

Hi Richard,

I tried this code and it runs correctly - the "add new record" button was dispalyed:

<telerik:RadGrid ID="RadGrid1" Width="820" runat="server" AutoGenerateColumns="False"
        OnNeedDataSource="RadGrid1_NeedDataSource" OnDeleteCommand="RadGrid1_Command" OnInsertCommand="RadGrid1_Command"
        OnUpdateCommand="RadGrid1_Command" GridLines="None" ShowFooter="True" GroupingEnabled="False"
        Skin="Telerik">
        <MasterTableView DataKeyNames="CategoryID" GridLines="None" CommandItemDisplay="Top"
            NoMasterRecordsText="No Categories have been added.">
            <CommandItemSettings AddNewRecordText="Add New Category" RefreshText="Refresh Category List" />
            <Columns>
                <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="Delete"
                    ButtonType="ImageButton">
                </telerik:GridButtonColumn>
                <telerik:GridBoundColumn DataField="CategoryID" HeaderText="CategoryID" UniqueName="CategoryID"
                    ReadOnly="True">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="CategoryTitle" HeaderText="CategoryTitle" UniqueName="CategoryTitle">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="CategoryDescription" HeaderText="CategoryDescription"
                    UniqueName="CategoryDescription">
                </telerik:GridBoundColumn>
                <telerik:GridEditCommandColumn ButtonType="ImageButton">
                </telerik:GridEditCommandColumn>
            </Columns>
            <EditFormSettings ColumnNumber="2" CaptionFormatString="Edit details for category with ID {0}"
                CaptionDataField="CategoryID">
                <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                <FormMainTableStyle CellSpacing="0" CellPadding="3" Width="100%" />
                <FormTableStyle GridLines="Horizontal" CellSpacing="0" CellPadding="2" CssClass="module"
                    Height="110px" Width="100%" />
                <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                <FormStyle Width="100%" BackColor="#EEF2EA"></FormStyle>
                <EditColumn UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                </EditColumn>
                <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
            </EditFormSettings>
            <ExpandCollapseColumn>
                <HeaderStyle Width="19px"></HeaderStyle>
            </ExpandCollapseColumn>
            <RowIndicatorColumn>
                <HeaderStyle Width="20px" />
            </RowIndicatorColumn>
        </MasterTableView>
        <FilterMenu EnableTheming="True">
            <CollapseAnimation Duration="200" Type="OutQuint" />
        </FilterMenu>
    </telerik:RadGrid>

Code-behind

protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {

        DataTable table = new DataTable();
        table.Columns.Add("CategoryID");
        table.Columns.Add("CategoryTitle");
        table.Columns.Add("CategoryDescription");

        this.RadGrid1.DataSource = table;
    }

    protected void RadGrid1_Command(object source, GridCommandEventArgs e)
    {

    }

Thanks
Hus

[Princy]

Hi  Richard ,

Could you try setting the following attribute and also bind the empty string  array to the grid in the NeedDataSource event . This might help work out your scenario.

Try enabling the ShowHeadersWhenNoRecords  property to show the headers when there is no data in the Grid.

ASPX:

 <MasterTableView  ShowHeadersWhenNoRecords="true"   >

You may also try the following code snippet to display the Grid .
CS:

 RadGrid1.DataSource = new string[] { };

Do let me know if this was helpful.

Thanks

Princy

[Richard Weeks]

Hi, when I try the solution from Princy, I can get the button to display. But when I add new, I get an AJAX error. Hus, your code did not work for me.

I think the problem is I am returning a null DataSet rather than empty row or such (this is a blanket thing from the business layer). When the RadGrid hits a null DataSet, it is not showing the add new button?

Richard

[EDIT]

Ok, I got it after some diligent Googling.

I handled the null DataSet like this:

        protected void RadGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            this.categories = new Categories();

            this.dataSet = this.categories.Select();

            if (this.dataSet != null)
            {
                this.RadGrid.DataSource = this.dataSet;
            }
            else
            {
                this.RadGrid.DataSource = new string[] { };
            }
        }

Probably overkill but the add new record button dutifully shows up. But clicking add new brings an error:

Telerik.Web.UI.GridInsertionObject does not contain a property with the name <field_name>"

So, I have to do this:

        protected void RadGrid_OnItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == RadGrid.InitInsertCommandName)
            {
                e.Canceled = true;

                ListDictionary listDictionary = new ListDictionary();

                listDictionary["CategoryID"] = 0;
                listDictionary["CategoryTitle"] = String.Empty;
                listDictionary["CategoryDescription"] = String.Empty;

                e.Item.OwnerTableView.InsertItem(listDictionary);
            }
        }

Then I get a working Grid.

Can't say I like it. The whole reason I want to buy and use controls like this is so I don't have to insert kludgy workarounds. If I've got it wrong, fair enough - I'd love to see a more elegant solution :) But if not, can I suggest the next grid version can at least handle adding new records when there are none to begin with more easily? That's always been the nightmare of all the grids, seems daft it still exists...

Cheers,
Richard

[Radoslav]

Hello Richard,

Your solution is one of the possible solutions.

The others are:

You could try binding the RadGrid to empty string array, however you need to remove CaptionDataField from EditFormSettings in order to not get the error DataBinding: 'Telerik.Web.UI.GridInsertionObject' does not contain a property with the name 'columnName'. I do not suggest you to do that, because you have to manage all hierarchy binding manually via code behind.

However, the most elegant solution is:

In need_datasource event you could try binding the Radgrid to Datatable with same columns as defined in your RadGrid. Then you have not to write any code in RadGrid_OnItemCommand event handler:

protected void RadGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
      DataTable dt = new DataTable();
      dt.Columns.Add(new DataColumn("CategoryID"));
      dt.Columns.Add(new DataColumn("CategoryTitle"));
      dt.Columns.Add(new DataColumn("CategoryDescription"));

      this.RadGrid.DataSource = dt;
}

Additionally I am sending you a simple example that illustrates the mentioned above cases.
 I hope this helps.

Regards,
Radoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Lev Rosenblit]

Hello,
I also had this problem recently,
When the grid was empty, pressing on new item caused a script error: 'Telerik.Web.UI.GridInsertionObject' does not contain a property with the name 'columnName'.

After a few debug sessions using firebug, i saw that the reason was i had a GridDropDownColumn in the grid, and it fed of a data source, when the grid was empty a default value must be set in order for the drop down list to correctly initialize.
so the fix was just to set the DefaultInsertValue property of the column to a valid value.

Hope it helps.

Lev Rosenblit

[Matthias]

Enable:  CommandItemDisplay="Top"

<MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" DataKeyNames="AutoID"