ClientSide DataBind and GridClientDeleteColumn

11 posts, 0 answers
  1. Xao Xiong
    Xao Xiong avatar
    7 posts
    Member since:
    Jan 2010

    Posted 01 Apr 2010 Link to this post

    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?



  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 07 Apr 2010 Link to this post

    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.
  3. Xao Xiong
    Xao Xiong avatar
    7 posts
    Member since:
    Jan 2010

    Posted 07 Apr 2010 Link to this post

    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).


  4. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 08 Apr 2010 Link to this post

    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.
  5. Xao Xiong
    Xao Xiong avatar
    7 posts
    Member since:
    Jan 2010

    Posted 08 Apr 2010 Link to this post

    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?
  6. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 09 Apr 2010 Link to this post

    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.
  7. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 26 Apr 2010 Link to this post

    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.
  8. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 28 Apr 2010 Link to this post

    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.
  9. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 28 Apr 2010 Link to this post

    Thanks. !!!
  10. Charles
    Charles avatar
    1 posts
    Member since:
    Jun 2012

    Posted 05 Jan 2012 Link to this post

    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.
  11. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 09 Jan 2012 Link to this post

    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
Back to Top