[Solved] Radgrid ClientSide binding using webservice

[utchi]

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;

}

[utchi]

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

[Nikolay Rusev]

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.

[Valery]

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.

[Valery]

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.

[Karthik]

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

[Tsvetoslav]

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