Client Side Binding | Infragistics Forums

520

Client Side Binding

Brian posted over 14 years ago

Can someone please provide me with a sample demonstrating how to bind to a WebDataGrid client side NOT using a datasource like in the samples browser? I would like to make a web service call using JSON and bind the data client side, but the only example I can find is the one in the samples browser connecting to a database.

Top Replies

520

Brian posted over 14 years ago in reply to Alexander Todorov +1 suggested
After calling _applyClientBindings(), grid._get_rows() still contains no rows. Also, I am still having trouble clearing the old rows before re-binding...view reply »

80

Offline William Vivian posted over 13 years ago in reply to Dave

Hello Dave,

It only works (i use that turm loosly) with 4.0. I am in the same boat as you. I can not spend any more time on it because it appears that it is not even close to being anything thing but a demo. I can not hold up my project up waiting on the june release of version 11. I was hoping that just the basic row selection would work because that is all I needed. no editing, just be able to dbl click on a row and I could bring up a property page.

Oh well.

Later,

Will
Cancel
Reply

Cancel
517

Dave posted over 13 years ago in reply to William Vivian

Hi Will,

Thanks for the info but I'm still having issues. I think the problem might be that I'm using 3.5 and not 4.0 like you are. When I call the _applyClientBinding() I get a JavaScript error because the render method is not there so I think there is more to this problem than we know. I tried a few other things and managed to get my rows to show up, but they're all blank. I've spent so much time on this that I can't waste anymore on it which is a real shame because, like you say, it's an awesome concept and lightening fast if it works.

One thing is for sure and that is my WCF code works perfectly as I can see the JSON string coming back from it and all the Objects when it's parsed. It's a real shame that I don't have the time to figure out the Grid rendering. I have to settle for an ugly PostBack.

Time is money and I can't be wasting anymore time...

Thanks
Dave
Cancel
Reply

Cancel
80

Offline William Vivian posted over 13 years ago in reply to Dave

Hello Dave,

Make sure you have the template script also.

<script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="Scripts/jquery.tmpl.js"></script>

it will fail if you do not initialize the template:

if (!grdDonors.tableTemplate)
grdDonors.tableTemplate = grdDonors._elements.dataTbl.lastChild.cloneNode(true);

I am doing basically the same as you. This was a stripped down version to show the problem. I am returning json from a webmethod and it is working and loading but can not interact with the grid once it is loaded. I just did a local var json to show the problem after load.

<WebMethod(EnableSession:=True)> _
<Script.Services.ScriptMethod(ResponseFormat:=Script.Services.ResponseFormat.Json)> _
Public Shared Function DonorsByName(ByVal LastName As String, ByVal FirstName As String)

The concept is awesome
Cancel
Reply

Cancel
517

Dave posted over 13 years ago in reply to William Vivian

Hey Will,

What version of jQuery are you using? I can't seem to get mine to display the rows, even though I'm doing the exact same thing as you. Well almost. I'm send inding an ID to a WCF Web Service and it's returning a JSON sting. I get those objects out of the string and push them into another array, then use that is my datasource, but still it's empty. I'm using jquery-1.4.2.

Any ideas?

Dave
Cancel
Reply

Cancel
80

Offline William Vivian posted over 13 years ago in reply to Dave

Hello,

I got the load working but the functionality of the grid does not work after pressing load. I am doing just a basic row selection. The hidden columns does not work either.

-------------------------------------------------------------------

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DonorsLoad.aspx.vb" Inherits="DonorProcessing.DonorsLoad" %>

<%@ Register Assembly="Infragistics4.Web.v10.3, Version=10.3.20103.1013, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI" TagPrefix="ig" %>
<%@ Register Assembly="Infragistics4.Web.v10.3, Version=10.3.20103.1013, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.GridControls" TagPrefix="ig" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Donors</title>
</head>
<body>
<form id="frmInput" method="post" runat="server">
<ig:WebScriptManager ID="WebScriptManager" runat="server">
</ig:WebScriptManager>
<ig:WebDataGrid ID="wdgDonors" runat="server" AutoGenerateColumns="False"
    Height="600px" Width="98%">
    <AjaxIndicator BlockArea="Control" RelativeToControl="True" />
    <Columns>
        <ig:BoundDataField DataFieldName="AccountID" Hidden="True" Key="AccountID">
            <Header Text="AccountID" />
        </ig:BoundDataField>
        <ig:BoundDataField DataFieldName="LastName" Key="LastName">
            <Header Text="Last Name" />
        </ig:BoundDataField>
        <ig:BoundDataField DataFieldName="FirstName" Key="FirstName">
            <Header Text="First Name" />
        </ig:BoundDataField>
        <ig:BoundDataField DataFieldName="Address" Key="Address">
            <Header Text="Address" />
        </ig:BoundDataField>
        <ig:BoundDataField DataFieldName="City" Key="City">
            <Header Text="City" />
        </ig:BoundDataField>
    </Columns>
    <behaviors>
        <ig:Selection RowSelectType="Single" CellClickAction="Row" Enabled="true" />
    </behaviors>
</ig:WebDataGrid>
<input type="button" id="btnLoad" class="button" value="Load" />
<input type="button" id="btnSelect" class="button" value="Select First Row" />
<script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="Scripts/jquery.tmpl.js"></script>
<script type="text/javascript">
    $("#btnLoad").click(function () {

        var grdDonors = $find("wdgDonors");
        var jsonString = { "Donors":
             [{ "AccountID": "1", "LastName": "Last Name 1", "FirstName": "First Name 1", "Address": "Address 1", "City": "City 1" },
              { "AccountID": "2", "LastName": "Last Name 2", "FirstName": "First Name 2", "Address": "Address 2", "City": "City 2"}
             ]

        };

        var dataSource = grdDonors._get_dataSource();
        var arr = jsonString.Donors;

        if (!grdDonors.tableTemplate)
            grdDonors.tableTemplate = grdDonors._elements.dataTbl.lastChild.cloneNode(true);

        for (var i = 0; i < arr.length; i++) {
            dataSource.push(jsonString.Donors[i]);
        }

        grdDonors._set_dataSource(dataSource);
        grdDonors._pi.show(grdDonors);
        grdDonors._applyClientBinding();
        grdDonors._pi.hide(grdDonors);
    });
    $("#btnSelect").click(function () {
        var grdDonors = $find("wdgDonors");
        var selectedRows = grdDonors.get_behaviors().get_selection().get_selectedRows();

        selectedRows.add(grdDonors.get_rows().get_row(0));
    });
</script>
</form>
</body>
</html>

----------------------------------------------------------

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    wdgDonors.EnableClientRendering = True
    wdgDonors.DefaultColumnWidth = 200

    Dim Donors As New List(Of String)

    wdgDonors.DataSource = Donors
    wdgDonors.DataBind()

End Sub

------------------------------------------------------------

Any help is appreciated. I understand it is CTP but I really need to load using ajax/json on client side.

Will
Cancel
Reply

Cancel