[Solved] RADGrid binding using WebService

[kumar bysani]

Hi,

       I am using RADGrid for my application to improve the performance. I had a functionality as deleting multiple rows at a time by clicking "DeleteALL" button "CommandItemDisplay". For this I am calling Webservice when user clicks on "Delete" button.I am updating the List<BussinessEntity> in Webeservice and returning to the client fuinction , But in client script while executing the following line of code in       the   "function updateGrid(result)" - tableView.dataBind();   throwing error inside Telerik dynamic created script file.I am refering following link to implement webservice.

    http://blogs.telerik.com/VladimirEnchev/Posts/08-10-09/Telerik_RadGrid_client-side_data-binding_using_jQuery.aspx

Please find the code snippet of webservice. [asmx page]

    [WebMethod(EnableSession = true)]
    public List<AdminSettingsCategoryEntity> DeleteSelectedCategories(string strSelectedCateoryList, string modifiedBy, string clientID)
    {
        int intCatgIsUsed = 0;
        int intCatgID = 0;
        GridTableView CategoryGridMaterTableView = new GridTableView();
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        var jsIds = serializer.Deserialize<Dictionary<string, object>>(strSelectedCateoryList);

        if (jsIds != null)
        {
            ArrayList selectedItems = new ArrayList();
            foreach (KeyValuePair<string, object> keyValuePair in jsIds)
                selectedItems.Add(long.Parse(keyValuePair.Key));

            if (selectedItems.Count > 0)
            {
              //Functionality to remove the selected Category IDS and updating list<bussinessEntity>
            }

            //return usersDraftList.ToList();
        }
        return categoryList.ToList();

    }

Code snippet adding g

                         <div id="divdgListOfCategory" runat="server" style="width: 420px; float: left; margin-bottom: 7px;
                                height: 180px;">
                                <telerik:RadGrid ID="DgListOfCategory" runat="server" AutoGenerateColumns="false" AllowMultiRowSelection="true" AllowPaging="false" PagerStyle-Visible="false"
                                    Skin="GridVista" EnableViewState="true" Width="412px" AllowMultiRowEdit="true"  EnableEmbeddedSkins="false"
                                    OnItemDataBound="DgListOfCategory_ItemDataBound" OnItemCommand="DgListOfCategory_ItemCommand">
                                    <MasterTableView Width="395px" AutoGenerateColumns="false" EditMode="InPlace"
                                    NoMasterRecordsText="No Records Found"  AllowAutomaticDeletes="True" DataKeyNames="ID"
                                    AllowAutomaticInserts="false" AllowAutomaticUpdates="false" ShowHeadersWhenNoRecords="true" ClientDataKeyNames="ID,isUsed"
                                        CommandItemDisplay="Top">
                                        <CommandItemTemplate>
                                            <div id="lnkAddrows" style="float:left;line-height: 29px;">
                                                <asp:LinkButton ID="btnAddNewRecord" runat="server" CommandName="AddNewRecord" Style="vertical-align: bottom">
                                                    <asp:Image ID="imgAdd" runat="server" ImageUrl="~/Images/AddRecord.gif" />Add New Record</asp:LinkButton>
                                            </div>
                                                     <div id="divDeleteRows" style="float:left;line-height: 29px;padding-left:30px;">
                                                <asp:LinkButton ID="lnkDeleteRows" runat="server" Style="vertical-align: bottom" OnClientClick="javascript:return DgListOfCategoryDeleteSelectedRows()" >
                                                <asp:Image ID="imgDelete" runat="server" ImageUrl="~/Images/val_close.png"  /> Delete</asp:LinkButton>
                                            </div>
                                        </CommandItemTemplate>
                                        <Columns>
                                             <telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn"  HeaderStyle-Width="40px"
                                         ItemStyle-Width="40px" ItemStyle-HorizontalAlign="Center" >
                                          </telerik:GridClientSelectColumn>
                                            <telerik:GridTemplateColumn UniqueName="Active" HeaderText="Select" DataType="System.Int32"
                                                HeaderStyle-Width="40px" ItemStyle-Width="40px" ItemStyle-HorizontalAlign="Center">
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkActive" runat="server" />
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridTemplateColumn UniqueName="tempCatgName" HeaderText="Category Name"
                                                DataType="System.String" ReadOnly="False" HeaderStyle-Width="160px" ItemStyle-Width="160px">
                                                <ItemTemplate>
                                                    <telerik:RadTextBox ID="CategoryName" Text='<%#Eval("CategoryName") %>' runat="server"
                                                        EmptyMessage="Category Name" MaxLength="50" Width="145px">
                                                    </telerik:RadTextBox>
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" ReadOnly="True" AllowSorting="false"
                                                Visible="false" ItemStyle-Width="0" HeaderStyle-Width="0" UniqueName="ID">
                                                <HeaderStyle ForeColor="Silver" />
                                                <ItemStyle ForeColor="Silver" />
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="isUsed" HeaderText="isUsed" ItemStyle-Width="5"
                                                HeaderStyle-Width="5" Visible="false" UniqueName="isUsed">
                                            </telerik:GridBoundColumn>

                                                <telerik:GridClientDeleteColumn HeaderStyle-Width="40px" ButtonType="ImageButton" HeaderText="Delete"
                                              CommandName="Delete"  Text="Delete" UniqueName="DeleteColumn" >
                                             <HeaderStyle Width="40px"  />
                                                <ItemStyle HorizontalAlign="Center" Width="30px" />
                                             </telerik:GridClientDeleteColumn>
                                        </Columns>
                                    </MasterTableView>
                                                               <ClientSettings>
                                        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" ScrollHeight="174px">
                                        </Scrolling>
                                         <Selecting AllowRowSelect="true" />
                       <ClientEvents  OnRowSelected="DgListOfCategory_RowSelected" OnRowCreated="DgListOfCategory_RowCreated"
                                 OnRowDeselected="DgListOfCategory_RowDeselected" OnRowDeleted="DgListOfCategory_RowDeleted"  />
                                 <DataBinding Location="CategoryPopUp.aspx"  SelectCountMethod="MyFirstPageMethod"/>
                                    </ClientSettings>

                                </telerik:RadGrid>
                            </div>

rid to aspx page:

Javscript functions:

    <script src="../../JavaScripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../../JavaScripts/json2.js" type="text/javascript"></script>
       <script src="../../JavaScripts/jquery-1.2.6.pack.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        var commandName = "";
        var tableView = null;
        var clientIDValue = null;
        var SelectedCatgIDs = null
        var selected = {};
        var userIDValue = null;


       function DgListOfCategory_RowSelected(sender, args) {
           var mailID = args.getDataKeyValue("ID");
           if (!selected[mailID]) {
               selected[mailID] = true;
           }
            // Set the value of the hidden variable to
            // the value of the javascript variable
            var hiddenControl = '<%= selectedInstrumentIds.ClientID %>';
            document.getElementById(hiddenControl).value = Sys.Serialization.JavaScriptSerializer.serialize(selected);
       }

       function DgListOfCategory_RowDeselected(sender, args) {
           var mailID = args.getDataKeyValue("ID");
           if (selected[mailID]) {
               selected[mailID] = null;
           }
                       // Set the value of the hidden variable to
            // the value of the javascript variable
            var hiddenControl = '<%= selectedInstrumentIds.ClientID %>';
            document.getElementById(hiddenControl).value = Sys.Serialization.JavaScriptSerializer.serialize(selected);
       }

       function DgListOfCategory_RowCreated(sender, args) {
           var mailID = args.getDataKeyValue("ID");
           if (selected[mailID]) {
               args.get_gridDataItem().set_selected(true);
           }
       }

       function DgListOfCategory_RowDeleted(sender, args)
       {
       alert("Delete Cliecked");
        var mailID = args.getDataKeyValue("ID");
           if (!selected[mailID]) {
               selected[mailID] = true;
           }
            // Set the value of the hidden variable to
            // the value of the javascript variable
            var hiddenControl = '<%= selectedInstrumentIds.ClientID %>';
            document.getElementById(hiddenControl).value = Sys.Serialization.JavaScriptSerializer.serialize(selected);
       }

       function DgListOfCategoryDeleteSelectedRows()
       {
                tableView = $find("<%= DgListOfCategory.ClientID %>").get_masterTableView();
                clientIDValue = document.getElementById("ctl00_plhMainContentArea_hdnClientID").value;
                userIDValue = document.getElementById("ctl00_plhMainContentArea_hdnUserID").value;
                 SelectedCatgIDs = document.getElementById("ctl00_plhMainContentArea_selectedInstrumentIds").value;

                var DataItems = $find("<%=DgListOfCategory.ClientID %>").get_masterTableView().get_dataItems();
                if(DataItems != null)
                {
                executeMethod("../../WebServices/SettingsWebService.asmx", "DeleteSelectedCategories", getRequestData(tableView), updateGrid);
                }

       }
       function updateGrid(result)
             {
                tableView.set_dataSource(result.d);
                tableView.dataBind();
            }


            function getRequestData(tableView) {
                return JSON.stringify({
                    "strSelectedCateoryList": SelectedCatgIDs,
                    "modifiedBy" : userIDValue,
                    "clientID" : clientIDValue
                });
            }

         function executeMethod(location, methodName, methodArguments, onSuccess, onFail)
          {
                $.ajax({
                    type: "POST",
                    url: location + "/" + methodName,
                    data: methodArguments,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: onSuccess,
                    fail: onFail
                });
            }
    </script>

Please help me out how to bind the dataset in client script .

Thanks in Advance,
Bysani.

[Nikolay Rusev]

Hello Kumar,

From the description you have provided I assume that the result that is passed to updateGrid method isn't valid. Can you please post that structure of the JSON passed to that method and ensure that it is valid one.

Kind regards,
Nikolay
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.

[kumar bysani]

Hi Nikolay,

               When Paging is enabled.I am not getting any error. But in my current grid there is no paging feature, I am showing scrollbar instead of paging as per requirement. I am getting List<BussinessEntity> from Webservice properly, But script error is showing. I am attaching screnshots of 

1. "JSON String" ,
2. "ExecuteMethod with PArameters"
3. "result returning from WebService"
4. "Result in UpdateGrid parameter"
5. "Reult.d alert"
6. "Telerik Inbuilt script error".

JSON String
List
Reult in UpdateGrid() client function parameter
Result internal objects Execute Method with ParametersResult.d alert
Telerik internal script error


Thanks,
Kumar.

[Nikolay Rusev]

Hello Kumar,

I can see the error on the screens you send us, but unfortunately I am unable to replicate it locally and assist you further. It seems like that this is something specific to your scenario. Thus I will advice you to open formal support ticket and send us sample application demonstrating the error or if you to provide us with live url where we can observe the erroneous behavior.

Sincerely yours,
Nikolay
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.