Add New Record Button Not Showing When No Data

7 posts, 1 answers
  1. Richard Weeks
    Richard Weeks avatar
    95 posts
    Member since:
    Oct 2009

    Posted 17 Dec 2009 Link to this post

    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
  2. Hus Damen
    Hus Damen avatar
    33 posts
    Member since:
    Dec 2009

    Posted 18 Dec 2009 Link to this post

    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


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Dec 2009 Link to this post

    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
  5. Richard Weeks
    Richard Weeks avatar
    95 posts
    Member since:
    Oct 2009

    Posted 20 Dec 2009 Link to this post

    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
  6. Answer
    Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 21 Dec 2009 Link to this post

    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.
  7. Lev Rosenblit
    Lev Rosenblit avatar
    16 posts
    Member since:
    May 2008

    Posted 22 Mar 2010 Link to this post

    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
  8. Matthias
    Matthias avatar
    1 posts
    Member since:
    Feb 2014

    Posted 18 Feb 2014 in reply to Richard Weeks Link to this post

    Enable:  CommandItemDisplay="Top"

    <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" DataKeyNames="AutoID"
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017