Problem with Client-side databinding to a webservice

[Jim]

Hi all,

Hi all,

I'm using client side data-binding in a master-detail grid scenario.  The two grids are within an asp:form where the key in the form is in a hidden field.  The form key I use to filter the master and then the master row selected to filter the detail.

The problem I'm having is the master databind is being called multiple times even if the page is fully loaded.  It happens when the page is loaded and when I selected a row from the master.

I'm using a web service as a datasource.

Here's the Jscript.

function RadGrid1_DataBinding(sender, args) {

  }
  function RadGrid1_Command(sender, args) {
      // Handle the RadGrid's Command event here
  }
  function RadGrid2_Command(sender, args) {
      // Handle the RadGrid's Command event here
  }
  var ponumber = "";
  function RadGrid1_RowSelected(sender, args) {
      ponumber = args.get_tableView().extractKeysFromItem(args.get_gridDataItem().get_element())["ponumber"];
      rdPODet = $find('<%= rlMOView.FindControl("RadGrid2").ClientID %>');
      rdPODet.get_masterTableView().filter("ponumber", ponumber, "EqualTo");
  }
function RadGrid1_DataBound(sender, args) {
    var tableView = sender.get_masterTableView();
    // pull the MO data key to bind the details
   // var mfgOrdID = parseInt(document.getElementById('ctl00_MainContent_hdnMfgKey').value);
    var mfgOrdID = parseInt(document.getElementById('ctl00_MainContent_rlMOView_hdnMfgKey2').value);
    tableView.filter("mfgorderid", mfgOrdID, "EqualTo", true);
    var dataItems = tableView.get_dataItems();
    if (dataItems.length == 0) {
        args.set_cancel(true);
    } else {
       tableView.selectItem(0);
    }
}
function RadGrid2_DataBinding(sender, args) {
    if (ponumber === "") {
        args.set_cancel(true);
    }
}

Here's the web Service:

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.Web.Services;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Collections.Generic;
using System.Collections;
using Telerik.Web.UI;
using System.Reflection;

namespace DataContracts
{
    [DataContract]
    public class MO_POHdr
    {
         [DataMember]
        public int MfgAssocDocID { get; set; }
        [DataMember]
        public int mfgorderid { get; set; }
        [DataMember]
        public string ponumber { get; set; }
        [DataMember]
        public string vendname { get; set; }
        [DataMember]
        public string vendorid { get; set; }
        [DataMember]
        public string country { get; set; }
        [DataMember]
        public string vndclsid { get; set; }
        [DataMember]
        public DateTime? docdate { get; set; }
        [DataMember]
        public string hold { get; set; }
        [DataMember]
        public string shipmthd { get; set; }
    }

    [DataContract]
    public class PODet
    {
        [DataMember]
        public string ponumber { get; set; }
        [DataMember]
        public string itemnmbr { get; set; }
        [DataMember]
        public decimal? qtyorder { get; set; }
        [DataMember]
        public string itemdesc { get; set; }
        [DataMember]
        public string postatus { get; set; }
        [DataMember]
        public string shipmthd { get; set; }
        [DataMember]
        public DateTime? released_date { get; set; }
        [DataMember]
        public DateTime? prmshpdte { get; set; }
        [DataMember]
        public DateTime? reqdate { get; set; }
    }
}

public class MyData
{
    public int Count { get; set; }
    public IList Data { get; set; }
}

[ServiceContract]
[ServiceKnownType("GetKnownTypes")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class GridMasterDetailsService
{
    public static IEnumerable<Type> GetKnownTypes(ICustomAttributeProvider provider)
    {
        List<Type> knownTypes = new List<System.Type>();

        knownTypes.Add(typeof(DataContracts.MO_POHdr));
        knownTypes.Add(typeof(DataContracts.PODet));
        return knownTypes;
    }

    [OperationContract]
    public MyData GetMOPOHdrDataAndCount(int startRowIndex, int maximumRows, string sortExpression, string filterExpression)
    {
        string fe = "";
        if (filterExpression != "")
        {
            fe = filterExpression.Replace("\"", string.Empty);
        }
        GridBindingData data = RadGrid.GetBindingData("AppDataClassesDataContext", "MO_POHdrs", startRowIndex, maximumRows, sortExpression, fe);
        MyData result = new MyData();
        result.Data = data.Data.OfType<MO_POHdr>().Select(c => new DataContracts.MO_POHdr()
        {
            MfgAssocDocID = c.MfgAssocDocID,
            mfgorderid = c.MfgOrderID,
            ponumber = c.ponumber,
            vendname = c.vendname,
            vendorid = c.vendorid,
            country = c.country,
            vndclsid = c.vndclsid,
            docdate = c.docdate,
            hold = c.hold,
            shipmthd = c.shipmthd
        }).ToList();
        result.Count = data.Count;
        return result;
    }

    [OperationContract]
    public MyData GetPODetDataAndCount(int startRowIndex, int maximumRows, string sortExpression, string filterExpression)
    {
        GridBindingData data = RadGrid.GetBindingData("AppDataClassesDataContext", "PODets", startRowIndex, maximumRows, sortExpression, filterExpression);
        MyData result = new MyData();
        result.Data = data.Data.OfType<PODet>().Select(o => new DataContracts.PODet()
        {
            ponumber = o.ponumber,
            itemnmbr = o.itemnmbr,
            qtyorder = o.qtyorder,
            itemdesc = o.itemdesc,
            postatus = o.postatus,
            shipmthd = o.shipmthd,
            released_date = o.released_date,
            prmshpdte = o.prmshpdte,
            reqdate=o.reqdate
        }).ToList();
        result.Count = data.Count;
        return result;
    }
}

Here are the grids:

<div style="width:715px;margin-bottom:5px;position:relative;">
                   <telerik:RadGrid ID="RadGrid1" runat="server"  AllowPaging="false" AllowSorting="false"  Height="100px" pagesize="200"
                         AllowFilteringByColumn="false" GridLines="None" EnableEmbeddedSkins="false" Skin="WebBlue" ItemStyle-Font-Names="'segoe ui',arial,sans-serif;" ItemStyle-Font-Size="10px"
                              AlternatingItemStyle-Font-Names="'segoe ui',arial,sans-serif;"  AlternatingItemStyle-Font-Size="10px" HeaderStyle-Font-Names="'segoe ui',arial,sans-serif;"  HeaderStyle-Font-Size="10px">
                         <MasterTableView ClientDataKeyNames="mfgorderid, ponumber" AllowMultiColumnSorting="false">
                           <CommandItemStyle CssClass="commViewCommand" />
                                 <ItemStyle CssClass="comments" />
                                 <AlternatingItemStyle CssClass="comments" />
                              <NoRecordsTemplate>
                               <div style="width:710px;">
                                 No assigned po details to display.</div>
                            </NoRecordsTemplate>
                             <Columns>
                                 <telerik:GridBoundColumn DataField="mfgorderid" ItemStyle-Width="0px" HeaderStyle-Width="0px"></telerik:GridBoundColumn>
                                 <telerik:GridBoundColumn DataField="ponumber" HeaderText="PO#" ItemStyle-Width="40px"  HeaderStyle-Width="40px"/>
                                 <telerik:GridBoundColumn DataField="vendname" HeaderText="Vendor" ItemStyle-Width="400px"  HeaderStyle-Width="400px"/>
                                 <telerik:GridBoundColumn DataField="vendorid" HeaderText="VID" ItemStyle-Width="40px"  HeaderStyle-Width="40px"/>
                                 <telerik:GridBoundColumn DataField="docdate" HeaderText="Doc Dt" DataFormatString="{0:MM/dd/yy}" ItemStyle-Width="35px"  HeaderStyle-Width="35px"/>
                                 <telerik:GridBoundColumn DataField="shipmthd" HeaderText="Ship Via"  ItemStyle-Width="100px"  HeaderStyle-Width="100px"/>
                             </Columns>
                         </MasterTableView>
                         <ClientSettings>
                             <DataBinding Location="GridMasterDetailsService.svc"  FilterParameterType="Linq"
                                 SelectMethod="GetMOPOHdrDataAndCount" SortParameterType="Linq" >
                             </DataBinding>
                             <ClientEvents OnRowSelected="RadGrid1_RowSelected" OnDataBound="RadGrid1_DataBound"   />
                             <Selecting AllowRowSelect="true"/>
                               <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />

                         </ClientSettings>
                     </telerik:RadGrid>
                     </div>

                  <div style="width:715px;margin-bottom:5px;position:relative;">
                         <telerik:RadGrid ID="RadGrid2" runat="server" AllowPaging="false" AllowSorting="True" Height="100px"
                             AllowFilteringByColumn="false" GridLines="None" PageSize="5" Skin="WebBlue" ItemStyle-Font-Names="'segoe ui',arial,sans-serif;" ItemStyle-Font-Size="10px"
                              AlternatingItemStyle-Font-Names="'segoe ui',arial,sans-serif;"  AlternatingItemStyle-Font-Size="10px" HeaderStyle-Font-Names="'segoe ui',arial,sans-serif;"  HeaderStyle-Font-Size="10px">
                             <MasterTableView AllowMultiColumnSorting="true" TableLayout="Fixed" ClientDataKeyNames="ponumber">
                             <CommandItemStyle CssClass="commViewCommand" />
                                 <ItemStyle CssClass="comments" />
                                 <AlternatingItemStyle CssClass="comments" />
                                              <NoRecordsTemplate>
                               <div style="width:710px;">
                                 No assigned non received po item details to display.</div>
                            </NoRecordsTemplate>
                                             <Columns>
                                              <telerik:GridBoundColumn DataField="ponumber" HeaderText="PO#" ItemStyle-Width="40px"  HeaderStyle-Width="40px"/>
                                 <telerik:GridBoundColumn DataField="itemnmbr" HeaderText="Item#" ItemStyle-Width="100px"  HeaderStyle-Width="100px"/>
                                 <telerik:GridBoundColumn DataField="qtyorder" HeaderText="Qty"  ItemStyle-Width="30px"  HeaderStyle-Width="30px"/>
                                 <telerik:GridBoundColumn DataField="itemdesc" HeaderText="Desc" ItemStyle-Width="410px"   HeaderStyle-Width="410px"/>
                                     <telerik:GridBoundColumn DataField="prmshpdte" HeaderText="PS Date"  DataFormatString="{0:MM/dd/yy}" ItemStyle-Width="35px"   HeaderStyle-Width="35px"/>
                                         </Columns>
                                     </MasterTableView>
                                     <ClientSettings>
                                       <DataBinding Location="GridMasterDetailsService.svc"  FilterParameterType="Linq"
                                 SelectMethod="GetPODetDataAndCount" SortParameterType="Linq" >
                             </DataBinding>
                                         <ClientEvents OnDataBinding="RadGrid2_DataBinding"   />
                                           <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">
                                 </Scrolling>
                                     </ClientSettings>
                                 </telerik:RadGrid>
                 </div>

Any ideas??

Thanks, Jim..

[Marin]

Hi Jim,

The problem might be due to the fact the you call filter and select client-side methods of the master table view from the DataBound event. You can temporary comment them and see if the problem persists. Also can you specify exactly how many times the databind is called?
One workaround would be to handle the OnDataBinding event and cancel the additional databind for the grid or you can try setting EnableCaching="true" from the client databinding setting and see whether that makes any difference.

Best wishes,
Marin
the Telerik team