Client Side Binding

Answered (Not Verified) This post has 0 verified answers | 29 Replies | 8 Followers Thread's RSS feed.

bpg730
Points 520
Replied On: Tue, Oct 19 2010 3:42 PM Reply

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.

  • Post Points: 20

All Replies

wvivian
Points 80
Replied On: Mon, May 9 2011 2:09 PM Reply

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

  • Post Points: 35
DaveStuart
Points 517
Replied On: Mon, May 9 2011 3:02 PM Reply

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

  • Post Points: 20
wvivian
Points 80
Replied On: Mon, May 9 2011 3:19 PM Reply

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

  • Post Points: 20
DaveStuart
Points 517
Replied On: Mon, May 9 2011 11:13 PM Reply

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

  • Post Points: 20
wvivian
Points 80
Replied On: Tue, May 10 2011 9:37 AM Reply

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

  • Post Points: 5
wvivian
Points 80
Replied On: Tue, May 10 2011 6:45 PM Reply

Hey Dave,

I came up with a solution using jquery templates. I can not use postbacks due to the site requirements.

If interested, please feel free to email me at Dave@TEUConsulting.com ,

Will

  • Post Points: 20
Shyam
Points 685
Replied On: Mon, May 23 2011 7:49 AM Reply

Hi Dave
I am also getting same type of issue on ._applyClientBinding()

Did you get any solution, if yes plz suggest how to resolve this

  • Post Points: 20
DaveStuart
Points 517
Replied On: Tue, May 24 2011 12:19 AM Reply

Hey Shyam,

Will and I talked about a solution a few weeks ago but lost contact for a bit due to working so damned much. Nevertheless, I can tell that Will got his solution working in .NET 4.0, but I was not able to get it working in .NET 3.5 as I don't think this feature is supported in that version. I need to reconnect with Will to see if his solution will work for me.

In the mean time can you fill me in on your specific situation? Like .NET version and Service Type, such as Web Service or WCF etc.

Thanks
Dave

  • Post Points: 20
Shyam
Points 685
Replied On: Tue, May 24 2011 12:43 AM Reply

Hi Dave
I am using .NET 4.0, Infragistics4.Web.v10.3, Version=10.3.20103.2105 and I am working in MVC.

I have a webdropdown on change of webdropdown on clientside (<ClientEvents SelectionChanged="wcProject_SelectionChanged" />) I am able to fetch data using JSON , JSONResult, now I want to bind that data to Webdatagrid
like -

//to bind webdatagrid
                var myGrid = $find('<%=grdProjectDirectory.ClientID %>'); //document.getElementById('');

                var dataSource = myGrid._get_dataSource();
                var arr = this.Inbox[0].lstProject;
                if (!myGrid.tableTemplate)
                    myGrid.tableTemplate = myGrid._elements.dataTbl.lastChild.cloneNode(true);

                for (var i = 0; i < arr.length; i++) {
                    dataSource.push(this.Inbox[0].lstProject[i]);
                }

                $(myGrid._elements.dataTbl.lastChild).empty();

                myGrid._set_dataSource(dataSource);
                myGrid._pi.show(myGrid);               

                myGrid._applyClientBinding();
                myGrid._pi.hide(myGrid);

 

Here on _applyClientBinding(); getting an error Object does not support this property or method

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

<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
  
    <script src="../../Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.tmplPlus.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.tmplPlus.min.js" type="text/javascript"></script>

 

Suggest me where I am wrong.

 

Regards

Shyam

  • Post Points: 20
DaveStuart
Points 517
Replied On: Tue, May 24 2011 10:22 AM Reply

Hi Shyam,

I don't work for Infragistics but would like to try helping you out, at the same time fixing my own issue. I might have the time during the backend of this week but from what I can see in your code example all looks good. Are you seeing blank rows of data or not rows at all?

This is what I tried so it might help you. It DOES NOT use dataGrid._applyClientBinding(); because jQuery would always through that same error to are seeing. But this returns blank rows for me.
<%@ Register Assembly="Infragistics35.Web.v10.3, Version=10.3.20103.2120, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.GridControls" tagprefix="ig" %>

 

<

<

 

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

function onSuccessOfGetAccountHistory(result) {
            var dialog = $find("WebDialogWindowShowDetails");
            var dataGrid = $find("WebDialogWindowShowDetails_tmpl_WebDataGridShowDetails");
           
     //create a datasource
            var dataSource = dataGrid._get_dataSource();
            var newData = eval(result);
               
            //Empty the grid
            $(dataGrid._elements.dataTbl.lastChild).empty();

            //Populate the dataGrid
            dataGrid._pi.show(dataGrid);

            for (var i = 0; i < newData.length; i++) {
                //dataSource.push(newData[i]);
                $(dataGrid.tableTemplate).data(newData[i]).appendTo(dataGrid._elements.dataTbl.lastChild);
            }
            dataGrid._pi.hide(dataGrid);

            //Show the results
            dialog.set_windowState($IG.DialogWindowState.Normal);
 }

 

 

Let me know if this helps at all...Dave

  • Post Points: 20
Shyam
Points 685
Replied On: Wed, May 25 2011 3:07 AM Reply

Hi Dave

I tried as you suggested but still not getting

                var myGrid1 = $find("MainContent_pnlProjectDirectory_grdProjectDirectory");
                //create a datasource
                var dataSource = myGrid1._get_dataSource();
                var newData = eval(this.Data.lstProjectDir);

                //Empty the grid
                $(myGrid1._elements.dataTbl.lastChild).empty();

                //Populate the dataGrid
                myGrid1._pi.show(myGrid1);

                for (var i = 0; i < newData.length; i++) {
                    //dataSource.push(newData[i]);
                    $(myGrid1.tableTemplate).data(newData[i]).appendTo(myGrid1._elements.dataTbl.lastChild);
                }
                //myGrid1._set_dataSource(dataSource);
                myGrid1._pi.hide(myGrid1);

 

Now result is coming as but data is not displayed

<tr>
<td style="width: 0px;">${Id}</td>
<td style="width: 200px;">${Name}</td>
<td style="width: 200px;">${DisplayName}</td>
<td style="width: 120px;">${Phone}</td>
<td style="width: 120px;">${Fax}</td>
<td style="width: 120px;">${BusinessEmail}</td></tr>

But one more point when I am pushing data to datasource and applyingClientBinding it is giving error
for (var i = 0; i < newData.length; i++) {
dataSource.push(newData[i]);
$(myGrid1.tableTemplate).data(newData[i]).appendTo(myGrid1._elements.dataTbl.lastChild);
}
myGrid1._set_dataSource(dataSource);
myGrid1._applyClientBinding();
myGrid1._pi.hide(myGrid1);

When not pushing data to datasource it is not giving any error of object does not support

 

  • Post Points: 20
DaveStuart
Points 517
Replied On: Wed, May 25 2011 10:42 AM Reply

Looks like we are in the same boat so I will play around with it some more this week and hopfully an Infragistics developer will see this posting before too long and help us out.

Dave

  • Post Points: 5
hussii
Points 20
Replied On: Tue, Jun 7 2011 6:17 AM Reply

hi i have tried this code but finding issues running it can u please send me the Jquery files and the source of this example at hussii@hotmail.com i will be very thankful to you for such an act

  • Post Points: 20
DaveStuart
Points 517
Replied On: Thu, Jun 9 2011 8:42 PM Reply

Not much point if no-one can get it to work. I have tried everything I can think of and so have others. It appears that the Infragistics team are not willing to get involved in the conversation either so you may as well try other controls out there. Sorry to be the bringer of bad news.

Dave

  • Post Points: 20
Jared
Points 5
Replied On: Thu, Oct 12 2017 2:50 PM Reply

If you're running into the problem of _tableTemplate being null, you might have done the stupid thing I did and didn't enable or misspelled the attribute EnableClientRendering="True". I had mispelled "Rendering" as "Rednering"....

Anyways, this webpage https://www.infragistics.com/samples/aspnet/data-grid/jquery-client-template is comprehensive on how to accomplish this. Everything in here is overly complex, but to be fair, it's been six years since the last post.

  • Post Points: 5
Page 2 of 2 (30 items) < Previous 1 2 | RSS