This is a migrated thread and some comments may be shown as answers.

ClientSide DataBind and GridClientDeleteColumn

10 Answers 644 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Xao Xiong
Top achievements
Rank 1
Xao Xiong asked on 01 Apr 2010, 09:54 PM
I have a grid that binds on !IsPostBack in Page_Load, the grid has a GridClientDeleteColumn column with AutoGenerateColumns="true".  Everything works great until I start binding the grid on ClientSide, then I lose the GridClientDeleteColumn icon and functionality for the grid (only the new row do not have the GridClientDeleteColumn icon), however if I do a post-back on the page then any client side binding after will have the GridClientDeleteColumn.

The reason I am binding at Page_Load is so I get all the column names from my data object.  After the initial first bind (on server side), I am binding from the client side for speed so I don't have to do a full post back after I add/delete/modify my grid data rows.

Code:
ASPX code
-----------------------------------------------------------------------------------------------------------
<script language="javascript">
function AddProduct(productID){
          var myGrid = $find("<%=myGrid.ClientID%>");
          PageMethods.AddProduct(productID, OnSucceeded,OnFailed);
          myGrid.MasterTableView.rebind();        
}

function OnSucceeded(result, userContext, methodName) {
...
}

function OnFailed(error, userContext, methodName) {
...
}

</script>

<telerik:RadGrid ID="myGrid" runat="server" AllowAutomaticUpdates="True"
                                            AllowFilteringByColumn="False" AllowPaging="False" AllowSorting="True"
                                            AutoGenerateColumns="True" EnableEmbeddedSkins="false" EnableViewState="False"
                                            FilterItemStyle-HorizontalAlign="Left" GridLines="None"
                                            GroupHeaderItemStyle-HorizontalAlign="Left"
                                            PageSize="25" ShowFooter="True" EnableClientKeyValues="true"
                                            ShowGroupPanel="false" ShowStatusBar="True" Skin="Sunset">
                                    <clientsettings allowcolumnsreorder="False" allowdragtogroup="False"
                                            reordercolumnsonclient="False">
                                        <clientevents OnRowDeleting="RowDeleting"></clientevents>
                                        <selecting allowrowselect="false" />
                                        <DataBinding Location="MyPage.aspx"
                                            SelectMethod="GetData" SortParameterType="String" EnableCaching="false"
                                            DataPropertyName="Data" CountPropertyName="Count" />
                                    </clientsettings>                           
                                    <mastertableview clientdatakeynames="ProductID"
                                            datakeynames="ProductID" name="MasterTableView">
                                        <columns>                                    
                                            <telerik:GridClientDeleteColumn ConfirmText="Delete this item?" ButtonType="ImageButton"
                                                ImageUrl="delete.gif" CommandName="Delete" Text="Delete">
                                            </telerik:GridClientDeleteColumn>                                                                                    
                                            <telerik:GridBoundColumn UniqueName="ProductID" DataField="ProductID" HeaderText="ProductID">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn UniqueName="ProductName" DataField="ProductName" HeaderText="Product Name">
                                            </telerik:GridBoundColumn>                                            
                                        </columns>
                                    </mastertableview>
 </telerik:RadGrid> 

Add Test Product: <input type="button" id="btnClientButton" onclick="AddProduct(12345)">

<asp:Button id="btnServerButton" OnClick="btnServerButton_Click" runat="server" Text="Do a Post Back Then Everything is A-OK">
-----------------------------------------------------------------------------------------------------------
Server Side Code:
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                        myGrid.DataSource=GetData("")["Data"];
                        myGrid.DataBind();
            }
        }

        [WebMethod(true)]
        public static Dictionary<string,object> GetData(string sortExpression)
       {
                  .
                  .
                  data.add("Data",objDataList);
                  data.add("Count",objDataList.Count);
                  return data;
       }

        [WebMethod(true)]
        public static bool AddProduct(int productID)
        {
                  .
                  .
                  objDataList.Add(productID)        

                  return true;
        }

Why is it that only when there's a post back (at least one post back) then the GridClientDeleteColumn will show when I do a client databind/rebind?



10 Answers, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 07 Apr 2010, 08:18 AM
Hi Xao Xiong,

I do not seem to be able to reproduce what you are getting. Attaching a sample project you can run locally. It contains the RadGrid definition you provided, along with some sample data. Let me know if you are able to reproduce this issue in the test project and how exactly.

Greetings,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Xao Xiong
Top achievements
Rank 1
answered on 07 Apr 2010, 04:16 PM
I got the same exact problem with the code you've attached.  When I add new rows (without a post back), no delete icons appear for new rows (record ID 7-8).  If there's a post back, then the delete icons appear when adding new rows (record ID 9-11).  I tried to attach the video here, but it exceeds 2MB limit so I've posted the video on youtube. Video

http://www.youtube.com/watch?v=WEkIXWigy4w

Steps to reproduce:
1.  Run the application you've attached (sample.zip).
2.  Click on the first button on the page (which add rows to the grid).
3.  Look at the newly added rows (there are no "delete" icons; therefore you cannot delete the newly added rows [until post back])

If you do a post back (any post back on the page).  Repeat step 2, you will see the delete icons for newly added rows (this is the result I want without a post back first).


0
Veli
Telerik team
answered on 08 Apr 2010, 09:51 AM
Hi Xao Xiong,

Yes, I was able to reproduce what you are getting this time. Let me first mention that client-side databinding is not supported with auto-generated columns. RadGrid supports only declarative columns with client binding and you may get unexpected behavior using auto-generated columns.

Additionally, GridClientDeleteColumn does not support client binding either, so additional items that are databound to the grid on the client do not get the button in the client delete column created. You can, however, use GridButtonColumn and set it up exactly as you need with the GridClientDelete column.

Finally, note that even if you bind the grid on the server on initial load, RadGrid is automatically rebound on the client when the grid loads. This is because you have set up client binding and RadGrid does not expect to be databound on the server. So, effectively, you can totally omit binding the grid on the server.

I hope things are clearer now. Modified page is attached.

Regards,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Xao Xiong
Top achievements
Rank 1
answered on 08 Apr 2010, 04:31 PM
I re-ran the example you've attached (296419.zip), however after the 10th row, both the delete icons disappeared.  See video at http://www.youtube.com/watch?v=ynI-YpbnkY4

Steps to reproduce:
1.  Run program
2.  Click on "Refresh Data"
3.  Click on "Add Product" button until you have more than 10 rows.  Starting from 11th row on, no delete icons.

Also, if I use the GridButtonColumn, how would I actually invoke the "delete" method on the client side so it will actually delete the row?  When clicking on GridButtonColumn, the confirmation comes up, but the row doesn't actually get deleted.  Is there a way to invoke the "delete" method in the GridClientDeleteColumn from GridButtonColumn?
0
Veli
Telerik team
answered on 09 Apr 2010, 09:20 AM
Hello Xao Xiong,

Both the GridClientDeleteColumn and the GridButtonColumn fire the Delete command in RadGrid. With client-side databinding, you need to handle the client OnCommand event of the grid, catch the Delete event and handle deletes yourself. Neither the GridButtonColumn, nor the GridClientDeleteColumn implement the actual deletion. You are supposed to delete the item manually in the OnCommand event handler:

<ClientEvents OnCommand="onCommand" />

function onCommand(sender, args)
{
    if (args.get_commandName() == "Delete")
    {
        //handle delete here
    }
}

As for the delete icon, that's a little strange, because I am getting the buttons OK in Firefox and IE. Attaching video. Can you give me any particular details on how to reproduce your case?!

Best wishes,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
NetDeveloper1107
Top achievements
Rank 1
answered on 26 Apr 2010, 12:32 PM
Hi,

I am implementing Radgrid client side binding feature . I have binded radgrid with client side binding and having linkbutton on grid when I click on this linkbutton i am calling onCommand event and there I need to have values of all the other columns shown on the grid. How can I take the values of other columns for that in onCommand event.

you can see the code below of my Radgrid design and oncommand event.

 <telerik:RadGrid ID="RadGridTask" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Skin="NextGen"
                PageSize="5" GridLines="None" AutoGenerateColumns="False">
                    <MasterTableView>
                        <Columns>
                            <telerik:GridTemplateColumn HeaderText="Function">
                                <ItemTemplate>
                                    <asp:LinkButton  ID="lnkTaskId" runat="server" CausesValidation="false" Text="Unclaim"
                                    CommandName="Unclaim">
                                    </asp:LinkButton>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            
                            <telerik:GridButtonColumn DataTextField="description"   UniqueName="description" ButtonType="LinkButton"  
                            CommandName="Select">
                            </telerik:GridButtonColumn>
                                                    
                             <telerik:GridTemplateColumn DataField="taskName" HeaderText="Task Name">
                                <ItemTemplate>
                                   <asp:Label runat="server" ID="lblTaskName" ></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn DataField="customerName" HeaderText="Customer Name">
                                <ItemTemplate>
                                   <asp:Label runat="server" ID="lblCustomerName"></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn DataField="organization" HeaderText="Organization">
                                <ItemTemplate>
                                   <asp:Label runat="server" ID="lblorganization"></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn DataField="workFlowTaskStatus" HeaderText="Task Status">
                                <ItemTemplate>
                                   <asp:Label runat="server" ID="lblworkFlowTaskStatus"></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="workFlowTaskId" UniqueName="workFlowTaskId" HeaderText="Workflow Task ID"
                                EmptyDataText="&amp;nbsp;" SortExpression="workFlowTaskId">
                            </telerik:GridBoundColumn>
                        </Columns>
                            <NoRecordsTemplate>
                                    <div style="height: 30px; cursor: pointer;">
                                        No items to view</div>
                            </NoRecordsTemplate>                      
                    </MasterTableView>
                    <ClientSettings>
                        <ClientEvents OnCommand="gridCommand" OnRowDataBound="gridRowBound" />
                    </ClientSettings>
                </telerik:RadGrid>

function gridCommand(sender, args)
{
debugger;
 args.set_cancel(true);
   alert(args.get_commandName());
//I need to have values of all the columns placed on the grid here
    if (args.get_commandName() == "Select")
    {
        RedirectPage();
    }
};
Thanks.
0
Veli
Telerik team
answered on 28 Apr 2010, 11:08 AM
Hello NetDeveloper1107,

To be able to use RadGrid's client-side OnCommand event, you have to use GridButtonColumn instead of a template column with a linkbutton. Only GridButtonColumns are automatically adjusted to fire the client-side OnCommand event of the grid:

<telerik:GridButtonColumn HeaderText="Function" CommandName="Unclaim" Text="Unclaim">
</telerik:GridButtonColumn>

Second, each of your columns needs to have a UniqueName. If you do not explicitly specify a UniqueName for your columns, the UniqueName will be assigned the value of the DataField property. However, if you have 2 or more column with the same DataField, the UniqueName will get messed up and you will not easily know the column's unique name. Therefore, you are encouraged to explicitly set UniqueName to all of your columns. In your setup, however, I do not see any columns with matching DataFields, so I believe you can assume the UniqueName of each column is the DataField.

Having said that, the client-side GridDataItem object has a get_cell() method that returns the HTML TD element under the specified column. The column is specified by it's UniqueName, therefore it is important that you know the unique names of each of your columns:

function gridCommand(sender, args)
{
    //get the grid item for which the command is fired
    var itemIndex = args.get_commandArgument();
    var item = args.get_tableView().get_dataItems()[itemIndex];
     
    //get taskName
    var taskName = item.get_cell("taskName").getElementsByTagName("span")[0].innerHTML;
     
    //get customerName
    var customerName = item.get_cell("customerName").getElementsByTagName("span")[0].innerHTML;
     
    //get organization
    var organization = item.get_cell("organization").getElementsByTagName("span")[0].innerHTML;
     
    //get workFlowTaskStatus
    var workFlowTaskStatus = item.get_cell("workFlowTaskStatus").getElementsByTagName("span")[0].innerHTML;
     
    //get workFlowTaskId
    //this column is a GridBoundColumn, so we take the inner HTML of the
    //table cell directly
    var workFlowTaskId = item.get_cell("workFlowTaskId").innerHTML
     
    if (args.get_commandName() == "Select")
    {
        RedirectPage();
    }
}


Greetings,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
NetDeveloper1107
Top achievements
Rank 1
answered on 28 Apr 2010, 11:21 AM
Thanks. !!!
0
Charles
Top achievements
Rank 1
answered on 06 Jan 2012, 04:56 AM
Hi,

I am implementing Radgrid client side binding feature.I do the add and update feature as the following URL.
http://demos.telerik.com/aspnet-ajax/grid/examples/client/insertupdatedelete/defaultcs.aspx 
But I would like to do the delete feature by using inline delete(client side), I use GridButtonColumn to delete the row in grid as code below.
The code call OnCommand="gridCommand" and delete data via webservice but after it return from webservice the syetem do postback
so I got this error. Could you please help?
Specified argument was out of the range of valid values.
Parameter name: ItemHierarchicalIndex
 
[ArgumentOutOfRangeException: Specified argument was out of the range of valid values.
Parameter name: ItemHierarchicalIndex]
   Telerik.Web.UI.GridItemCollection.get_Item(String hierarchicalIndex) +103
   Telerik.Web.UI.GridDataItemCollection.get_Item(String hierarchicalIndex) +37
   Telerik.Web.UI.RadGrid.RaisePostBackEvent(String eventArgument) +5578
   System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) +13
   System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData) +176
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +5563
.



<telerik:RadGrid ID="MarkGrid" CssClass="grid" runat="server"  Height="300px" GridLines="None" AutoGenerateColumns="false" >
                   <MasterTableView ClientDataKeyNames="HBLDNo"  DataKeyNames="HBLDNo" HierarchyLoadMode="Client" AutoGenerateColumns="false">
                       <Columns>
                           <telerik:GridBoundColumn Display="false" DataType="System.Int32" DataField="HBLDNo" />
                           <telerik:GridBoundColumn HeaderText="Mark" DataType="System.String" DataField="HBLMarkConNo" />
                           <telerik:GridBoundColumn HeaderText="Package" DataType="System.Decimal" DataFormatString="{0:N2}"
                               DataField="HBLNoPKGS" />
                           <telerik:GridBoundColumn HeaderText="Package Unit" DataType="System.String" DataField="HBLNoPKGSUnit" />
                           <telerik:GridBoundColumn HeaderText="Description" DataType="System.String" DataField="HBLDescription" />
                           <telerik:GridBoundColumn HeaderText="Gross Weight" DataType="System.Decimal" DataFormatString="{0:N2}"
                               DataField="HBLGrossWeight" />
                           <telerik:GridBoundColumn HeaderText="GW Unit" DataType="System.String" DataField="HBLGrossWeightUnitDesc" />
                           <telerik:GridBoundColumn HeaderText="Measurement" DataType="System.Decimal" DataFormatString="{0:N2}"
                               DataField="HBLMeasure" />
                           <telerik:GridBoundColumn HeaderText="Measure Unit" DataType="System.String" DataField="HBLMeasureUnitDesc" />
                           
                           <telerik:GridButtonColumn CommandName="Delete" UniqueName="Delete" DataTextField="HBLDNo" AutoPostBackOnFilter="false"
                           DataTextFormatString="Delete" ButtonType="ImageButton" ImageUrl="../images/Delete.gif"  />
                              
                           
                       </Columns>
                   </MasterTableView>
                   <ClientSettings>
                       <Selecting AllowRowSelect="true" />
 
                           <ClientEvents OnRowSelected="rowSelected" OnCommand="gridCommand" />
                       <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                   </ClientSettings>
               </telerik:RadGrid>

Thank you.
0
Antonio Stoilkov
Telerik team
answered on 09 Jan 2012, 03:29 PM
Hi,

The markup does not give us any clues as to what might be the cause of this exception you are getting. Can you post your code-behind, particularly, the RadGrid-related code and event handlers.  Have you, by any chance, omitted to cancel the command event to prevent RadGrid from posting?

function gridCommand(sender, args)
{
    //cancel the event to prevent postback
    args.set_cancel(true);
    //your code goes here
}


Regards,
Antonio Stoilkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
Grid
Asked by
Xao Xiong
Top achievements
Rank 1
Answers by
Veli
Telerik team
Xao Xiong
Top achievements
Rank 1
NetDeveloper1107
Top achievements
Rank 1
Charles
Top achievements
Rank 1
Antonio Stoilkov
Telerik team
Share this question
or