Radgrid alt row

[Ron]

Hi,

I'm inserting row's on the client side using a web service to insert a new row into the database and javascript to rebind the grid.
But when row is inserted, it only show's a plan grey row instead of a row with 5 columns and each column should have a textbox
control. When I check the HTML source I notice the row I inserted has a class="rgAltRow" i think this is my problem because the
other rows has class="rgEditRow". I will attach 2 screen shots one with the grid and the other the browser source code. I await
your assistance.

function updateChanges() {
             ItemsService.AddNewItem(updateGrid);
         }
         function updateGrid(result) {
             var tableView = $find("<%= grdInvoiceItems.ClientID %>").get_masterTableView();
             tableView.set_dataSource(result);
             tableView.rebind();
         }

Web service

[WebMethod(EnableSession = true)]
 public List<InvoiceItemsDetails> AddNewItem()
 {
     Invoice.InsertInvoiceItems(string.Empty, string.Empty, 0, 0,
        0, 0, 0, 0, 1001);

     return Invoice.GetInvoiceItems(1001);
 }

Thanks,
Ron.

[Gimmik]

Hi Ron,

How did you setup the RadGrid? Did you use an ItemTemplate? Any chance you can post your ASPX code? This actually looks like a really interesting issue. I would like to try to replicate it on my side for fun.

[Ron]

Sure...I was able to find a solution that worke by looping through each item in the grid and enabling edit mode onPreRender but I'm curious to know if you can find a better way.

protected void grdInvoiceItems_PreRender(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            foreach (GridItem item in grdInvoiceItems.MasterTableView.Items)
            {
                if (item is GridEditableItem)
                {
                    GridEditableItem editableItem = item as GridDataItem;
                    editableItem.Edit = true;
                }
            }
            grdInvoiceItems.Rebind();
        }

        for (int i = 0; i < this.grdInvoiceItems.MasterTableView.Items.Count; i++)
            this.grdInvoiceItems.MasterTableView.Items[i].Edit = true;
        this.grdInvoiceItems.MasterTableView.Rebind();
    }

aspx

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="" Transparency="30"  />
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                 <telerik:RadGrid ID="grdInvoiceItems" runat="server" DataSourceID="objInvoiceItems"
                        Width="878px" AutoGenerateColumns="true"
                        AllowMultiRowEdit="true"  onprerender="grdInvoiceItems_PreRender"
                        GridLines="Vertical" onitemdatabound="grdInvoiceItems_ItemDataBound"
                        onitemcreated="grdInvoiceItems_ItemCreated" style="border:0"
                        ShowHeader="False" onitemcommand="grdInvoiceItems_ItemCommand" EnableAlternatingRows="false" >
            <ClientSettings>
                <Selecting AllowRowSelect="true" />
                <ClientEvents OnRowMouseOver="showContent" OnRowMouseOut="hideContent"  />
            </ClientSettings>
            <MasterTableView ClientDataKeyNames="Id" EditMode="InPlace"  AutoGenerateColumns="False"
             CommandItemDisplay="None" BorderStyle="None"  >
<%--                <CommandItemTemplate>
                    <telerik:RadButton ID="button1" Text="New Record" runat="server" ></telerik:RadButton>
                </CommandItemTemplate>--%>
                <Columns>
          <%--      <telerik:GridEditCommandColumn ButtonType="ImageButton">
                        <HeaderStyle Width="100px" />
                    </telerik:GridEditCommandColumn> --%>
                <telerik:GridTemplateColumn >
                     <HeaderStyle Width="0px" />
                     <ItemStyle BorderStyle="None" />
                        <ItemTemplate>
                            <div style="visibility:hidden" class="myWrap">
                                 <asp:HyperLink ID="InsertTest" runat="server">
                                 <asp:Image ID="InsertCategory" runat="server" ImageUrl="~/Images/Delete.gif" AlternateText="Insert Category" />
                                 </asp:HyperLink>
                            </div>
                        </ItemTemplate>
                  </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Id" HeaderText="Id" Visible="false">
                </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn HeaderText="Items" DataField="Items" UniqueName="Items"  EditFormColumnIndex="1">
                     <ItemStyle CssClass="test1" BorderStyle="NotSet" />
                        <EditItemTemplate>
                                 <telerik:RadComboBox ID="ddlItems" runat="server" DataSourceID="objItems"
                                     DataTextField="Items"  DataValueField="Description"  Width="100px" Height="75"
                                     OnClientSelectedIndexChanged="Show">
                                         <Items>
                                            <telerik:RadComboBoxItem Text="Select Item" Value="Select Item" ></telerik:RadComboBoxItem>
                                        </Items>
                            </telerik:RadComboBox>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Description" DataField="Description"  UniqueName="Description">
                        <EditItemTemplate>
                        <telerik:RadTextBox ID="txtDescription" runat="server" Width="200px"></telerik:RadTextBox>
                        <%--<script type="text/javascript">
                                registeredElements.push('<%# Container.FindControl("txtDescription").ClientID %>');
                        </script>--%>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Price" DataField="Price"  UniqueName="Price">
                        <EditItemTemplate>
                             <telerik:RadTextBox ID="txtPrice" runat="server" Width="75px"></telerik:RadTextBox>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Qty" DataField="Qty"  UniqueName="Qty">
                        <EditItemTemplate>
                             <telerik:RadTextBox ID="txtQty" runat="server" Width="75px"></telerik:RadTextBox>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Discount" DataField="Discount"  UniqueName="Discount">
                        <ItemStyle CssClass="test" BorderStyle="NotSet" />
                        <EditItemTemplate>
                             <telerik:RadTextBox ID="txtDiscount" runat="server" Width="75px"></telerik:RadTextBox>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                   <telerik:GridTemplateColumn >
                     <HeaderStyle Width="0px" />
                     <ItemStyle BorderStyle="None" />
                        <ItemTemplate>
                            <div style="visibility:hidden" class="myWrap1">
                                 <asp:HyperLink ID="DeleteLink" runat="server">
                                 <asp:Image ID="DeleteCategory" runat="server" ImageUrl="~/Images/Delete.gif" AlternateText="Delete Category" />
                                 </asp:HyperLink>
                            </div>
                        </ItemTemplate>
                  </telerik:GridTemplateColumn>
                </Columns>
         <%--       <EditFormSettings>
                    <EditColumn ButtonType="ImageButton" />
                </EditFormSettings>--%>

            </MasterTableView>
             <EditItemStyle CssClass="test" />
             <ItemStyle />
       </telerik:RadGrid>

[Gimmik]

Hi Ron,

It looks like you're on the right path. It looks to me like the row isn't getting the editable property for some reason. That's really odd considering the RadGrid shouldn't treat the 4th row any different then the first three. What happens if you manually create a 4th row in the database before you load the page? Does it automatically get the edit property set?

[Ron]

If I manually create a 4th row then load the grid everything works fine.  It's not about the 4th row , it's about creating the row on the client no matter how many rows. It could be the 7th or 8th row and until I do a page refresh the newly created rows wont display in edit mode. You won't believe I've been working at this for over 2 weeks. It's been crazy to say the least.

[Gimmik]

Well your website looks really nice regardless, so be glad of that fact! Now I'm really curious - We'll get to the bottom of this issue. It's probably something silly. It's these silly little issues that are the most frustrating, but also the most interesting. Once I get a sample up and running maybe I can fish out the answer.

[Gimmik]

Hi Ron,

I think you found the best approach for setting a row into edit mode. I did a little research and it looks like the edit mode is always set to false by default. There is only one update I can suggest. Instead of iterating over the whole RadGrid whenever you add a row, why not just update the one offending row? So instead of doing the update in PreRender, I would wire up the ItemCreated event. Here's a code snippet from Telerik on how to do just that.

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (!Page.IsPostBack && e.Item is GridEditableItem)
    {
        e.Item.Edit = true;
    }
}

Here's a link to the document. That should fix-er up.
http://www.telerik.com/help/aspnet-ajax/grid-put-all-items-in-edit-mode-no-additional-rebind.html

Hope this helps!
-Gimmik

[Ron]

I will give that a shot. I really appreciate your time with this matter. On a another note. Can you give me any pointers on selecting an item from the drop down menu and depending on the value fill in the remaining columns on the client?  If you look at the screen shot again you will the first column is a combo box and i would like to select an item from that combo box and depending on the value fill in the remaining textboxes.

Thanks,
Ron.

[Gimmik]

Hi Ron,

Populating other cells using data from the current row with advanced templates can be tricky to say the least. I'd never done it before and it took me a few hours of playing to get it to work. Time well spent in my book, now I have a new item in my bag of tricks.

Basically, you need to wire up the server-side event "OnSelectedIndexChanged" of your RadComboBox. You'll have to use the sender reference to navigate up to the GridDataItem (e.g. the current row). You'll need to set a "UniqueName" for the template column you want to edit in your ASPX file (I used "RadTextBox32"). So far we have managed to get a reference to the unique cell we want to edit. However (this is the tricky part) - While using templates we cannot assume that the RadTextBox is located at control[0] within the cell (TRICKY). We'll need to deploy the FindControl("ID") method to locate the control in the cell. Finally, set the .Text property to whatever you like. It's a great hoot when you get it running the first time. Thanks for provided the fun challenge. I'll post my sample program below.

Let me know how it works out!
-Gimmik

protected void RadComboBox1_OnSelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
    RadComboBox cmboBx = (sender as RadComboBox);

    GridDataItem dataItem = cmboBx.Parent.Parent as GridDataItem;


    (dataItem["RadTextBox32"].FindControl("RadTextBox3") as RadTextBox).Text = e.Text;

}

<div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        SelectCommand="SELECT * FROM [test]"></asp:SqlDataSource>

    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1">
    <MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="false" EditMode="InPlace">

    <Columns>

    <telerik:GridEditCommandColumn />

    <telerik:GridTemplateColumn HeaderText="Test Column" UniqueName="TestCol">

    <ItemTemplate>

        <telerik:RadTextBox ID="RadTextBox1" runat="server" Text="ItemTemplate">
        </telerik:RadTextBox>

    </ItemTemplate>

    <EditItemTemplate>

        <telerik:RadTextBox ID="RadTextBox2" runat="server" Text="EditItemTemplate">
        </telerik:RadTextBox>

    </EditItemTemplate>

    </telerik:GridTemplateColumn>

    <telerik:GridTemplateColumn>
    <ItemTemplate>
        <telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_OnSelectedIndexChanged">
        <Items>
        <telerik:RadComboBoxItem Text="-- Select an Item --" Value="0" />
        <telerik:RadComboBoxItem Text="1" Value="1" />
        <telerik:RadComboBoxItem Text="2" Value="2" />
        <telerik:RadComboBoxItem Text="3" Value="3" />
        </Items>
        </telerik:RadComboBox>
    </ItemTemplate>
    </telerik:GridTemplateColumn>

    <telerik:GridTemplateColumn UniqueName="RadTextBox32">
    <ItemTemplate>
        <telerik:RadTextBox ID="RadTextBox3" runat="server" Text="None Selected">
        </telerik:RadTextBox>
    </ItemTemplate>
    </telerik:GridTemplateColumn>

    </Columns>

    </MasterTableView>
    </telerik:RadGrid>
    <telerik:RadTextBox ID="RadTextBox4" runat="server" Text="Starting Test">
    </telerik:RadTextBox>


</div>

[Ron]

Gimmick,

I can't thank you enough, you wouldn't understand how much you've helped me already. As a newbie to radcontrols and web programming you've been an angel. I was able to get both of your solutions to work but only by using Itemtemplate instead of the editItemtemplate I was previously using for grid columns. Everything thing works fine with that minor tweak expect the newly created rows are coming up with a grey background again and i'm guessing I can change that with styling but I wonder there's more to this change that should be concerned about. take a look at the screen shot and remember, before I was using <editItemTemplate> which didn't work with your solutions and now I'm im using <ItemTemplate> and everything works but the row color.

Thanks,
Ron.

[Ron]

I Don't know if you've gotten a chance yet to read my last post concerning the styling of the row's since i made the change from <EditItemTemplate> to <ItemTemplate>  which allowed your solution to work. But I think i figured out what's happening. When I use te following code;

protected void grdInvoiceItems_ItemCreated(object sender, GridItemEventArgs e)
{
    if (!Page.IsPostBack && e.Item is GridEditableItem)
    {
        e.Item.Edit = true;
    }
}

The css class is different for the most recently created row according to the browser source. Which makes that row look different. I attached a screen shot of the browser source highlighting the last row. But when I use the following code and loop through each row and explicitly put it in edit mode everything works fine with styling.  I also attached a screen shot of the browser source for this case.

protected void grdInvoiceItems_PreRender(object sender, EventArgs e)
  {
      if (!IsPostBack)
      {
          foreach (GridItem item in grdInvoiceItems.MasterTableView.Items)
          {
              if (item is GridEditableItem)
              {
                  GridEditableItem editableItem = item as GridDataItem;
                  editableItem.Edit = true;
              }
          }
          grdInvoiceItems.Rebind();

      }
      for (int i = 0; i < this.grdInvoiceItems.MasterTableView.Items.Count; i++)
          this.grdInvoiceItems.MasterTableView.Items[i].Edit = true;
      this.grdInvoiceItems.MasterTableView.Rebind();
  }

[Gimmik]

Hi Ron,

I'm so glad I was able to help. I'm fairly new to using Telerik controls myself, but so far I'm really enjoying it. The different row color is normal behavior. A grid has alternating rows by default. Odd numbered rows are normal, even numbered rows are alternate. That allows you control over design, alternating colors, and other fancy things you might want to do. The skin you select (and it's associated CSS class) will determine if the alternate row looks different. I'll post the full documentation page at the bottom if you're interested. You'll need to provide an override CSS class to change the alternate row color - but that's probably not needed for your application. It doesn't look like you use the alternate row functionality, so it's easier to disable it. Then all rows are normal rows.

Here's the code. Just put it right before you close your RadGrid tag.

<ClientSettings EnableAlternatingItems="false" />

http://www.telerik.com/help/aspnet-ajax/grid-data-items.html

Also, regarding <Itemtemplate> and <EditItemtemplate>. They should both work for your grid. <ItemTemplate> is what the column shows when it is in default mode, and <EditItemtemplate> is what the column show while it is the edit mode. If the row is getting the edit property correctly, I don't see why <EditItemtemplate> wouldn't work. Play around with it and let me know how you do. You're doing very well so far. Keep up the good work.


PS - If any post was particularly useful to you, could you please mark it as an "answer?"

Thanks,
-Gimmik

[Ron]

I found it strange also that <edititemtemplate> did not work and
making the change to <itemtemplate> did raise some new issues but I
will have time today to play with it and figure this out. Once again
Gimmick I really appreciate your assistance.

Thanks,
Ron.

[Ron]

Gimmick,

I'm having another issue implenting your solutions to fill row textbox on selected item change.  Your solution works except that on PreRender I use the following code to loop through each row and place the grid in edit mode for each post back. and the problem with that is the combobox is reset to default everytime I loop through to place the grid in edit mode. If I remove the code your solution works great but My add new row method rely on that loop to place each row in edit mode. If if that loop is not that i can't add a new row. If you can i'll really appreciate your assitance. Thanks.

protected void grdInvoiceItems_PreRender(object sender, EventArgs e)
{
    for (int i = 0; i < this.grdInvoiceItems.MasterTableView.Items.Count; i++)
        this.grdInvoiceItems.MasterTableView.Items[i].Edit = true;
    this.grdInvoiceItems.MasterTableView.Rebind();
}