Radgrid ClientSide binding using webservice

7 posts, 0 answers
  1. utchi
    utchi avatar
    36 posts
    Member since:
    May 2009

    Posted 08 Mar 2010 Link to this post


    Hi,

    I am using RADGrid for my application to improve the performance. I am updating the List<Class1> in Webeservice and returning to the client fuinction , But in client script while executing the following line of code in    the   "function updateGrid(result)" - 

    set_dataSource(result)

      throwing error inside Telerik dynamic created script file as 'null object'.

    In JavaScript

    <script type="text/javascript">  
    function bind()  
    {  
     
        xtenzasolutions.WebService2.HelloWorld(updateGrid,OnError);  
     
    }  
     
    function OnError(result)   
        {  
        alert("Error : "+result.get_message());  
        }    
     
     function updateGrid(result)  
        {  
            var tableview= $get('<% = rgDetails.MasterTableView.ClientID %>');  
                     
            tableview.set_dataSource(result);  
                 tableview.dataBind();  
                    
                 GetFirstDataItemKeyValues();  
        }  
          
        function GetFirstDataItemKeyValues()  
     {  
       
       var firstDataItem = $find("<%=rgDetails.ClientID %>").get_masterTableView().get_dataItems()[0];  
       var keyValues =  
         'DisplayStatus: "' +  
          firstDataItem.getDataKeyValue("disp_id") + '"' +  
          ' \r\n' +  
          'RuleName: "' +  
          firstDataItem.getDataKeyValue("url") + '"';  
          alert(keyValues);  
         
     }  
    </script> 

    In UserControl Page.
    <table>  
    <tr>  
    <td>  
    <asp:ScriptManager ID="scrp" runat="server">  
    <Services>  
    <asp:ServiceReference Path="~/WebService2.asmx" />  
    </Services>  
    </asp:ScriptManager>  
     
    <telerik:RadGrid ID="rgDetails" runat="server" GridLines="None" Skin="Office2007" 
                                        EnableClientKeyValues="true" AutoGenerateColumns="False" AllowMultiRowSelection="false" Height="200px" Width="500px">  
                                        <HeaderContextMenu EnableTheming="True">  
                                          
                                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>  
                                        </HeaderContextMenu>  
                                        <MasterTableView>  
                                          
                                            <RowIndicatorColumn>  
                                                <HeaderStyle Width="20px"></HeaderStyle>  
                                            </RowIndicatorColumn>  
                                            <ExpandCollapseColumn>  
                                                <HeaderStyle Width="20px"></HeaderStyle>  
                                            </ExpandCollapseColumn>  
                                            <Columns>  
                                              
                                                <%--<telerik:GridBoundColumn UniqueName="MessageType" SortExpression="MessageType" HeaderText="" DataField="MessageType"></telerik:GridBoundColumn>--%>  
                                                <telerik:GridTemplateColumn HeaderText="" UniqueName="Image">  
                                                    <ItemTemplate>  
                                                        <asp:Image runat="server" ID="ImageThumbnail" AlternateText="image" ImageUrl='' Height="25" 
                                                            Width="25" Style="border-width: 0px;" />  
                                                    </ItemTemplate>  
                                                </telerik:GridTemplateColumn>  
                                                <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Left" UniqueName="Activity" SortExpression="Activity" 
                                                    HeaderText="Activity" DataField="u_id">  
                                                 <ItemStyle HorizontalAlign="Left" />  
                                                </telerik:GridBoundColumn>  
                                                <telerik:GridTemplateColumn AllowFiltering="false" UniqueName="Install" HeaderText="Status">  
                                                    <ItemTemplate>  
                                                         
                                                            <%#DataBinder.Eval(Container.DataItem, "disp_id")%></a></ItemTemplate>  
                                                </telerik:GridTemplateColumn>  
                                                <telerik:GridBoundColumn UniqueName="InstallStatus" SortExpression="InstallStatus" 
                                                    HeaderText="" DataField="url" Visible="false">  
                                                </telerik:GridBoundColumn>  
                                            </Columns>  
                                        </MasterTableView>  
                                        <FilterMenu EnableTheming="True">  
                                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>  
                                        </FilterMenu>  
                                    </telerik:RadGrid>  
     
    </td>  
    </tr>  
    <tr>  
    <td>  
    <asp:Button runat="server" ID="butt" te="click" OnClientClick="bind()" />  
    </td>  
    </tr>  
    </table> 

    In Webservice
    public List<Class1> HelloWorld()  
     
    {  
     
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;  
     
    SqlConnection con = new SqlConnection(constr);  
     
    con.Open();  
     
    SqlDataAdapter adp = new SqlDataAdapter("select *from urlTable", constr);  
     
    DataSet ds = new DataSet();  
     
    adp.Fill(ds, "tab");  
     
    con.Close();  
     
    List<Class1> obj = new List<Class1>();  
     
    int i = 0;  
     
    foreach (DataRow rw in ds.Tables[0].Rows)  
     
    {  
     
    Class1 ser = new Class1();  
     
    ser.UID = rw["u_id"].ToString();  
     
    ser.DISPID = rw["disp_id"].ToString();  
     
    ser.URL = rw["url"].ToString();  
     
    obj.Add(ser);  
     
    }  
     
    return obj;  
     
    }  
     
  2. utchi
    utchi avatar
    36 posts
    Member since:
    May 2009

    Posted 09 Mar 2010 Link to this post

    Hi,

    I need the solution to solve the above mentioned problem. Its urgent.

    Please give any suggestion to solve it.

    Thanks in advance.

    Regards
    Maha;)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 11 Mar 2010 Link to this post

    Hello Maha,

    RadGrid does not have property named "EnableClientKeyValues="true" ", you should you se ClientDataKeyNames of MasterTableView same way as DataKeyNames.

    Another thing that I noticed is that you do not have client OnCommand attached - it is required when performing manual client-binding. You can use for reference the following demo:
    http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

    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.
  5. Valery
    Valery avatar
    45 posts
    Member since:
    Nov 2008

    Posted 11 Mar 2010 Link to this post

    Please also review the following piece of code:
    var tableview= $get('<% = rgDetails.MasterTableView.ClientID %>'); 
    In order to retrieve the client-side object (component) you should use the $find() shortcut function instead of $get() which retrieves the DOM element associated with the corresponding ClientID. So you have two options. A better one (IMHO):
    var grid = $find('<%= rgDetails.ClientID %>'); 
    var tableview = grid.get_masterTableView(); 
    or a good one:
    var tableview = $find('<%= rgDetails.MasterTableView.ClientID %>');   

    Hope this helps!

    Valery.
  6. Valery
    Valery avatar
    45 posts
    Member since:
    Nov 2008

    Posted 11 Mar 2010 Link to this post

    One more thing: Have in mind that GridTemplateColumns don't actually work when doing client-side binding. And if the tableview variable is null in the updateGrid() call, you should probably bind the grid to an empty collection in the code-behind initially.

  7. Karthik
    Karthik avatar
    1 posts
    Member since:
    Apr 2013

    Posted 15 Apr 2013 Link to this post

    Hi, we are using Telerik RadGrid control into my SharePoint custom webpart, I wants to implement the RadGrid value will be populate based on Webservice call, So can you please provide the entire sample to code to achive that functionality. I could not find the proper example (top to bottom) in the telerik website, It will helpful if you provide the sample code.

    Thanks
    Karthik
  8. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 19 Apr 2013 Link to this post

    Hi Karthik,

    The following online examples demonstrate how to correctly set RadGrid to bind to web services:
    http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx
    http://demos.telerik.com/aspnet-ajax/grid/examples/clientbinding/defaultcs.aspx

    In the case of SharePoint there is no big difference, you just need to provide the correct path for the ClientSettings.DataBinding.Location property that points to the web service path. Usually, web services are deployed in the _vti_bin folder, that is, you should create an ISAPI folder in your Visual Studio project and place your web service there. Then when the web part is deployed the service will be put in the _vti_bin folder of your SharePoint Installetion. Then the Locationproperty should be set to: "~/_vti_bin/YourWebService.asmx".

    Hope it helps.

    Regards, Tsvetoslav
    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
UI for ASP.NET Ajax is Ready for VS 2017