Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Grid > Hide/Show Columns for Insert

• Jeff

  Posted on Feb 6, 2012 (permalink)

  I have a radgrid with autoinsert, delete, edit turned on. My EditMode is INLINE. The grid has a single text column.  For edit I have it working to show a hidden column with my save button in it doing this in pre-render
  
  

  if (rgTags.EditIndexes.Count > 0)

              {

                  rgTags.MasterTableView.GetColumn("EditTag").Visible = false;

                  rgTags.MasterTableView.GetColumn("DeleteTag").Visible = false;

                  rgTags.MasterTableView.GetColumn("SaveTag").Visible = true;

              }

              else

              {

                  rgTags.MasterTableView.GetColumn("EditTag").Visible = true;

                  rgTags.MasterTableView.GetColumn("DeleteTag").Visible = true;

                  rgTags.MasterTableView.GetColumn("SaveTag").Visible = false;

              }

  
  I need to do the same thing for insert mode.   How can I do that?

  Reply

• Shinu MVP

  Posted on Feb 7, 2012 (permalink)

  Hello,
  
  Try the following code:
  c#:
  

  protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

  {

     if (e.Item is GridEditFormInsertItem && e.Item.OwnerTableView.IsItemInserted)

     {

     GridEditFormInsertItem InsertItem = (GridEditFormInsertItem)e.Item;

     TextBox textbox1 = (TextBox)InsertItem["UniqueName"].Controls[0];

     textbox1.Visible = false;

     }

  }

  
  -Shinu.

  Reply


• Jeff

  Posted on Feb 7, 2012 (permalink)

  That did not work.  Here is what I need in detail:
  
  RadGrid:  rgTags    EDIT MODE is Inline
  
  Columns:  TagID (not visible), TagName (visible), EditTag (template with button, visible), DeleteTag (template with button, visible),  and SaveTag (template with button, not visible)
  
  The basic setup can be seen in the attached image.
  
  Currently, I have code that causes SaveTag to show and EditTag and DeleteTag to hide in EDIT MODE.  This can be seen in attached image.
  
  What I need to have happen, is when I click Add new record and it goes into add mode that the edit column and delete column hide like they are in edit mode and save column shows like it does in edit mode. 
  
  The code Shinu provided did not work. Thanks, any other suggestions welcome.
  
  

  Attached files

  • basic.gif
  • edit.gif

  Reply

• Casey Master

  Posted on Feb 7, 2012 (permalink)

  Maybe you could try modifying your IF statement as follows?
  
  

  if (rgTags.EditIndexes.Count > 0 || rgTags.MasterTableView.IsItemInserted)

              {

                  rgTags.MasterTableView.GetColumn("EditTag").Visible = false;

                  rgTags.MasterTableView.GetColumn("DeleteTag").Visible = false;

                  rgTags.MasterTableView.GetColumn("SaveTag").Visible = true;

              }

              else

              {

                  rgTags.MasterTableView.GetColumn("EditTag").Visible = true;

                  rgTags.MasterTableView.GetColumn("DeleteTag").Visible = true;

                  rgTags.MasterTableView.GetColumn("SaveTag").Visible = false;

              }

  
  
  I hope this helps!
  Casey

  Reply

• Jeff

  Posted on Feb 7, 2012 (permalink)

  Yes I have tried that as well.  It does not work.

  Reply

• Casey Master

  Posted on Feb 7, 2012 (permalink)

  Here are a few more options:
  
  Set the ReadOnly property of the GridTemplateColumn for Edit and Delete to ReadOnly="true". I think you can also set the Display property of the Save GridTemplateColumn to Display="false" and it will still show up when editing. 
  
  If that doesn't work I'd try to do it in the RadGrid OnItemCommand event.
  
  Add the following to your RadGrid: OnItemCommand="rgTags_ItemCommand"
  
  

  protected void rgTags_ItemCommand(object sender, GridCommandEventArgs e)

  {

        if (e.CommandName == "InitInsert")

        {

               e.Item.OwnerTableView.GetColumn("EditTag").Display= false;

               e.Item.OwnerTableView.GetColumn("DeleteTag").Display= false;

               e.Item.OwnerTableView.GetColumn("SaveTag").Display= true;

        }

  }

  
  Hopefully one of these works for you!
  Casey

  Reply

• Jeff

  Posted on Feb 7, 2012 (permalink)

  OK now I have everything working except, my save button is now showing for all rows, not just the insert row.

  Attached files

  • closer.gif

  Reply

• Casey Master

  Posted on Feb 7, 2012 (permalink)

  How were you able to get it working (sort of)? 
  
  I think that you should be able to achieve what you want by changing the properties on the GridTemplateColumns, without any code. 

  Reply

• Jeff

  Posted on Feb 7, 2012 (permalink)

  Actually the code you offered earlier got me to this point:
  
  

  if (rgTags.EditIndexes.Count > 0 || rgTags.MasterTableView.IsItemInserted)

              {

                  rgTags.MasterTableView.GetColumn("EditTag").Visible = false;

                  rgTags.MasterTableView.GetColumn("DeleteTag").Visible = false;

                  rgTags.MasterTableView.GetColumn("SaveTag").Visible = true;

              }

              else

              {

                  rgTags.MasterTableView.GetColumn("EditTag").Visible = true;

                  rgTags.MasterTableView.GetColumn("DeleteTag").Visible = true;

                  rgTags.MasterTableView.GetColumn("SaveTag").Visible = false;

              }

  
  
  But the save button shows for both the insert line and the other rows in the grid.  I need it to only show for the insert line.
  
  This was appearing not to work before due to a typo causing the visibility to change.

  Reply

• Casey Master

  Posted on Feb 7, 2012 (permalink)

  Try adding OnItemDataBound="rgTags_ItemDataBound" to your RadGrid and then adding this to your code. You will have to add an "else if" for editing though.
  
  I hope this helps :)
  
  

  protected void rgTags_ItemDataBound(object sender, GridItemEventArgs e)

  {

        if (rgTags.MasterTableView.IsItemInserted && e.Item is GridDataInsertItem)

              {

                  GridDataInsertItem insItm = e.Item as GridDataInsertItem;

                  ImageButton editImg = insItm["EditTag"].FindControl("EditBtnID") as ImageButton;

                  ImageButton deleteImg = insItm["DeleteTag"].FindControl("DeleteTag") as ImageButton;

                  ImageButton saveImg = insItm["SaveTag"].FindControl("SaveTag") as ImageButton;

   

                  editImg.Visible = false;

                  deleteImg.Visible = false;

                  saveImg.Visible = true;

              }

  }

   

  Reply

• Jeff

  Posted on Feb 7, 2012 (permalink)

  That code does not change anything.  What I need is code to HIDE the SaveTag button if it is in insert mode and it is not the row being inserted.

  Reply

• Jeff

  Posted on Feb 7, 2012 (permalink)

  That code does not change anything.  What I need is code to HIDE the SaveTag button if it is in insert mode and it is not the row being inserted.

  Reply

• Casey Master

  Posted on Feb 9, 2012 (permalink)

  This should give you what you want. I took the previous code I gave you, stepped through it and found out what e.Item was for each scenario and modified the code accordingly. Here is the radgrid definition and code. I've also attached pictures of what each scenario (normal, edit, insert) look like.
  
  I hope it works for you this time :).
  Casey
  
  

  <telerik:RadGrid ID="rgTags" runat="server" AutoGenerateColumns="false" OnItemDataBound="rgTags_ItemDataBound"

                   OnNeedDataSource="rgTags_NeedDataSource" OnItemCommand="rgTags_ItemCommand" Width="30%">

      <MasterTableView EditMode="InPlace" CommandItemDisplay="Top">

          <Columns>

              <telerik:GridBoundColumn UniqueName="tagId" DataField="tagId" Display="false">

              </telerik:GridBoundColumn>

              <telerik:GridBoundColumn UniqueName="tagDescription" DataField="tagDescription" HeaderText="Description">

              </telerik:GridBoundColumn>

              <telerik:GridTemplateColumn UniqueName="EditCol">

                  <ItemTemplate>

                      <asp:ImageButton ID="imgBtnEdit" runat="server" ImageUrl="~/Images/Edit.gif" CommandName="Edit" />

                  </ItemTemplate>

              </telerik:GridTemplateColumn>

              <telerik:GridTemplateColumn UniqueName="DeleteCol">

                  <ItemTemplate>

                      <asp:ImageButton ID="imgBtnDelete" runat="server" ImageUrl="~/Images/Delete.gif" CommandName="Delete" />

                  </ItemTemplate>

              </telerik:GridTemplateColumn>

              <telerik:GridTemplateColumn UniqueName="SaveCol">

                  <ItemTemplate>

                      <asp:ImageButton ID="imgBtnSave" runat="server" ImageUrl="~/Images/AddRecord.gif" CommandName="PerformInsert" />

                  </ItemTemplate>

              </telerik:GridTemplateColumn>

          </Columns>                       

      </MasterTableView>

  </telerik:RadGrid>

  
  
  

  protected void rgTags_ItemDataBound(object sender, GridItemEventArgs e)

  {

      if (rgTags.MasterTableView.IsItemInserted)

      {

          if (e.Item is GridDataInsertItem)

          {

              GridDataInsertItem insItm = e.Item as GridDataInsertItem;

              ImageButton editImg = insItm["EditCol"].FindControl("imgBtnEdit") as ImageButton;

              ImageButton deleteImg = insItm["DeleteCol"].FindControl("imgBtnDelete") as ImageButton;

              ImageButton saveImg = insItm["SaveCol"].FindControl("imgBtnSave") as ImageButton;

   

              editImg.Visible = false;

              deleteImg.Visible = false;

              saveImg.Visible = true;

          }

          else if (e.Item is GridDataItem)

          {

              GridDataItem dataItm = e.Item as GridDataItem;

              ImageButton editImg = dataItm["EditCol"].FindControl("imgBtnEdit") as ImageButton;

              ImageButton deleteImg = dataItm["DeleteCol"].FindControl("imgBtnDelete") as ImageButton;

              ImageButton saveImg = dataItm["SaveCol"].FindControl("imgBtnSave") as ImageButton;

   

              editImg.Visible = true;

              deleteImg.Visible = true;

              saveImg.Visible = false;

          }

      }

      else if (e.Item is GridDataItem)

      {

          if (e.Item.IsInEditMode)

          {

              GridDataItem dataItm = e.Item as GridDataItem;

              ImageButton editImg = dataItm["EditCol"].FindControl("imgBtnEdit") as ImageButton;

              ImageButton deleteImg = dataItm["DeleteCol"].FindControl("imgBtnDelete") as ImageButton;

              ImageButton saveImg = dataItm["SaveCol"].FindControl("imgBtnSave") as ImageButton;

   

              editImg.Visible = false;

              deleteImg.Visible = false;

              saveImg.Visible = true;

          }

          else

          {

              GridDataItem dataItm = e.Item as GridDataItem;

              ImageButton editImg = dataItm["EditCol"].FindControl("imgBtnEdit") as ImageButton;

              ImageButton deleteImg = dataItm["DeleteCol"].FindControl("imgBtnDelete") as ImageButton;

              ImageButton saveImg = dataItm["SaveCol"].FindControl("imgBtnSave") as ImageButton;

   

              editImg.Visible = true;

              deleteImg.Visible = true;

              saveImg.Visible = false;

          }

      }

  }

  Attached files

  • InLine-Edit-Hide-Images.png

  Reply

• Jeff

  Posted on Feb 10, 2012 (permalink)

  Casey,
  
  That works perfectly.  Thank you for all your help I did not think to do it that way.

  Reply

• Casey Master

  Posted on Feb 10, 2012 (permalink)

  
  Jeff, 
  
  No problem, glad I could help!
  
  Casey
  
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Grid > Hide/Show Columns for Insert