C1WebGrid ItemTemplate field as a link column with a table for edittemplate

Posted by: mksalem on 25 March 2019, 7:39 pm EST

  • Posted 25 March 2019, 7:39 pm EST

    In previous versions of grid, I had created a template column as link and on clicking that link I expanded the column to show a table with input fields as the EditItemTemplate. In 2017 grid version, I am unable to do to it. Please see the JPEG file to see. Is there a way in c1webgrid version to achieve the same? Thanks.
  • Replied 26 March 2019, 4:13 pm EST

    Hi,
    Does your mean by "2017 grid version" to "C1GridView for ASP.Net WebForm Edition"? Please confirm.
    Please also share the ComponentOne Dll version you are using in your project.

    Further, C1GridView also supports the ItemTemplate and EditItemTemplate, please refer to the following demo sample for reference:
    https://demos.componentone.com/aspnet/ControlExplorer/C1GridView/CustomEditors.aspx

    Regards,
    Manish Gupta
  • Replied 26 March 2019, 7:49 pm EST

    The version is C1.Web.Wijmo.Controls.C1GridView 4.0.20172.264. I agree that it supports itemTemplate and EditItemTemplate. If you notice the attached screenshot, you will see how I used EditItemplate column. I created a table for EditTemplate and when the use clicks on the itemTemplate column it shows up for user input,not just the column it binds to the itemtemplate but some other transient fields. The save or cancel inside the EditTemplate take the action to save to the database through custom methods or cancel the edit action.

    In version 4.0.20172.264, I tried to do the same by defining the column in ItemTemplate as a link button and a small table of all the columns in the grid for data entry in EditItemTemplate. However, when I click on the link button, the grid refreshes but the column does not go into edit mode.

    The example in the demo is to use a commandcolumn with Edit/Udate/Cancel and that edits the entire row when I click on Edit button. However, I want to be able to keep the functionality of how I used the EditTemplate in previous version (VS 2003). I am just trying to understand why when I click on the linkbutton defined in ItemTemplate field does not trigger any event and does not show the table defined in the EditTemplate field.

    Thanks for your quick response.
  • Replied 26 March 2019, 7:51 pm EST

    Here is a portion of the aspx where how I defined the itemtemplate and edit template for my page:
    <wijmo:C1GridView ID="gridViewData" runat="server" Font-Size="Medium" Width="99%" Height="500px" Font-Names="Arial"
    BackColor="LightBlue" BorderWidth="2px" CellPadding="3" BorderColor="Black" DefaultColumnWidth="120px"
    DefaultRowHeight="26px" AutoGenerateColumns="False" AllowSorting="True" GridLines="None" CellSpacing="1"
    HorizontalAlign="center" BorderStyle="Solid" AllowVirtualScrolling="True" FreezingMode="None" RowHeight="20" ScrollMode="Auto"
    ScrollingSettings-StaticColumnIndex="-1" StaticRowIndex="-1" EnableTheming="False" ShowFilter="True" FilterStyle-HorizontalAlign="Center"
    FilterStyle-VerticalAlign="Middle" FooterStyle-Height="20px" AllowColMoving="True" AllowColSizing="True"
    ToolTip="Select any particular record by clicking on 'Select' button" StaticColumnIndex="-1" AllowClientEditing="True">
    <ScrollingSettings Mode="Auto">
    <VirtualizationSettings RowHeight="20" ColumnWidth="0" Mode="Both"></VirtualizationSettings>
    </ScrollingSettings>
    <Columns>
    <wijmo:C1CommandField ButtonType="Button" ShowSelectButton="True" Width="5%" SelectText="Select">
    <HeaderStyle CssClass="headerStyle" />
    <ControlStyle ForeColor="Maroon" HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="True" Font-Names="Arial" Font-Size="Small" />
    <ItemStyle Font-Bold="True" />
    </wijmo:C1CommandField>
    <wijmo:C1TemplateField DataField="ACCOUNTNUMBER" HeaderText="Account Number" SortExpression="ACCOUNTNUMBER" Width="5%">
    <HeaderStyle CssClass="headerStyle" />
    <ItemStyle CssClass="grid-columnStyle" Font-Bold="True" Font-Names="Arial" Font-Size="Small" Width="5%" />
    <ItemTemplate>
    <asp:LinkButton id="lnkAccountNumber" runat="server" Font-Names="Arial" ToolTip="Click on this link to edit Address for this account number" Text='<%# DataBinder.Eval(Container.DataItem, "ACCOUNTNUMBER") %>' Font-Underline="True" CommandName="UpdateAccountNumber"> </asp:LinkButton>
    </ItemTemplate>
    <EditItemTemplate>
    <table id="tblAccountDetails" runat="server" style="border: thin solid #000000; width: 100%; height: 400px; vertical-align: top; background-color: khaki;">
    <tr>
    <td class="auto-style11">
    <asp:Panel ID="panelAccountAddressDetails" runat="server" BackColor="khaki" Width="900px" Height="460px">
    <asp:TextBox ID="lblSponsorName" runat="server" Text="Sponsor Name" cssClass="tdLabelLeft_style" ReadOnly="True" Enabled="False" AutoPostBack="True"></asp:TextBox>
    <asp:TextBox ID="txtSponsorName" runat="server" CssClass="txtBox_style" width="300px" ReadOnly="False" Enabled="True" AutoPostBack="True" MaxLength="30" Text='<%# DataBinder.Eval(Container.DataItem, "SPONSORNAME") %>'></asp:TextBox>
    <br />
  • Replied 26 March 2019, 8:06 pm EST

    Also I set AllowClientEditing="false" and either way, postback occurs but not able to edit.
  • Replied 28 March 2019, 2:20 am EST

    Hi,
    Please refer to the attached sample for reference that allows to edit the Row.
    Please modify the sample if the issue persists.

    Regards,
    Manish Gupta

    C1GridView_Update.zip
  • Replied 1 April 2019, 6:35 am EST

    Thank you very much for creating a project to explain the details. Very much appreciated.

    What I was trying to do before you posted your project was

    1. Use a template column as a linked column so that I do not have put "edit" button the grid.
    2. Show a table for the edit template column which opens up when I click on the template linked column.
    3. On clicking on the template link button, I want set the edit template column size and I want to be able to hide other bound columns on the grid so that only the edit template is visible and grid is nice to work with.

    Your example does show the table for edit template but you used "Edit" button. I am not able to set the column width or hide the bound columns at run time. I tried to set the column visible = false in RowCommand after setting the index and binding the grid but it is not having any effect. I tested by putting a button and put the same code in the click event and the grid columns are hidden. It is not just working either in RowCommand or RowEditing events. If it can be done in either of these two events, can you tell me if "sender" can be type casted to C1GridView and access the columns on the grid and set visible property to false? I tried doing that and still no effect in RowCommand or RowEditing.

    Appreciate if you have an example or documentation about this funtionality. This will allow me to define multiple template link columns in the grid and be able to allow the user to edit particular grid columns with specific functionality.

    Putting an entire row with "Edit" action is good but not practical for my application.

    Thanks,
    Muddu
  • Replied 2 April 2019, 1:46 am EST

    Hi Muddu,
    Please try the following code snippet to call C1GridView Edit and Update command from C1GridView ItemTemplate using LinkButton by passing Edit and Update as CommandName.

    <wijmo:C1TemplateField HeaderText="Product">
    <ItemTemplate>
    <%# Eval("ProductName") %>
    <asp:LinkButton runat="server" ID="Edit" ToolTip="Click to Edit Row" CommandName="Edit" Text="Edit"></asp:LinkButton>
    </ItemTemplate>
    <EditItemTemplate>
    <table id="tblAccountDetails" runat="server" style="border: thin solid #000000; width: 100%; height: 100px; vertical-align: top; background-color: khaki;">
    <tr>
    <td class="auto-style11">
    <asp:TextBox ID="lblSponsorName" runat="server" Text="Sponsor Name" cssClass="tdLabelLeft_style" ReadOnly="True" Enabled="False" AutoPostBack="True">
    </asp:TextBox>
    <input type="text" CssClass="txtBox_style" width="300px" value='<%# DataBinder.Eval(Container.DataItem, "ProductName") %>' />
    <asp:LinkButton runat="server" ID="update" ToolTip="Click to Edit Row" CommandName="Update" Text="Submit"></asp:LinkButton>
    </td>
    </tr>
    </table>
    </EditItemTemplate>
    </wijmo:C1TemplateField>


    Further, the sender can be type cased using the following code snippet:
     protected void C1GridView1_RowCommand(object sender, C1GridViewCommandEventArgs e)
    {
    C1GridView Grid = (C1GridView)sender;
    }



    Hope it helps!

    Please let us know if you have any further queries.

    Regards,
    Manish Gupta
  • Replied 2 April 2019, 7:51 am EST

    Your last post's code is giving almost the same interface as my posted screen in this issue and thank you very much for the feedback.

    I wonder why you need and Edit link in the link button when you can actually define the Text = the value of the column. I tried that and it did not work.

    Thanks,
    Muddu Krishna
  • Replied 4 April 2019, 1:14 am EST

    Hi Muddu,
    We are investigating this and let you update as have something for you.

    Regards,
    Manish Gupta
  • Replied 4 April 2019, 3:09 pm EST

    Hi Muddu,
    We are sorry for the delayed response.
    We tried to hide the Columns in RowCommand events and it works fine as expected. Please refer to the following code snippet for reference:
     protected void C1GridView1_RowCommand(object sender, C1GridViewCommandEventArgs e)
    {
    C1GridView grid = (C1GridView)sender;
    if (e.CommandName == "Edit") {
    grid.Columns[0].Visible = false;
    }
    if (e.CommandName == "Update") {
    grid.Columns[0].Visible = true;
    }
    }

    >>>Set Text = the value of the column. I tried that and it did not work.
    For this, we required to use the Bind method. Please refer to the following code snippet for reference.
    <ItemTemplate>
    <asp:LinkButton runat="server" ID="Edit" ToolTip="Click to Edit Row" CommandName="Edit" Text='<%# Bind("ProductName") %>'></asp:LinkButton>
    </ItemTemplate>


    Please also refer to the attached sample for reference.

    Regards,
    Manish Gupta


    C1GridView-RowCommand-LinkButton.zip
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels