This is a migrated thread and some comments may be shown as answers.

RadGrid Client Side Binding using Webservice

3 Answers 222 Views

Grid

This is a migrated thread and some comments may be shown as answers.

neelesh asked on 22 Oct 2010, 06:35 AM

Hi,

I’m trying to bind radgrid on treeview node selected event using webservice. But it is not binding properly, it shows records without paging and also does not display checkbox and image column. Please tell me what I’m doing wrong or is that any property to set which I’m missing to add? Any advice would help. This is my code –

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">

<asp:ServiceReference Path="ProductActivateService.asmx" />

<asp:ServiceReference Path="ProductEditService.asmx" />

</Services>

</asp:ScriptManagerProxy>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

function ClientNodeChecked(sender, eventArgs) {

var node = eventArgs.get_node();

var productId = parseInt("<%= ProductId %>");

var categoryId = parseInt(node.get_value());

MySystem.ProductManager.ProductActivateService.AssignProductCategory(productId, categoryId, node.get_checked(), onAssignSuccess, onAssignError, node);

}

function onAssignSuccess(result, context, methodName) {

if (!result) {

context.set_checked(!context.get_checked());

}

function onAssignError(error, context, methodName) {

context.set_checked(!context.get_checked());

alert(error.get_message());

}

var commandName = "";

var tableView = null;

var categoryId = 62;

var productId = parseInt("<%= ProductId %>");

function pageLoad(sender, args) {

tableView = $find("<%= RGProducts.ClientID %>").get_masterTableView();

commandName = "Load"

MySystem.ProductManager.ProductEditService.GetProductsByCategoryId(categoryId, productId, OnClickedSuccess, OnClickedError);

}

function ClientNodeClicked(sender, eventArgs) {

tableView = $find("<%= RGProducts.ClientID %>").get_masterTableView();

var node = eventArgs.get_node();

categoryId = parseInt(node.get_value());

MySystem.ProductManager.ProductEditService.GetProductsByCategoryId(categoryId, productId,OnClickedSuccess, OnClickedError);

}

function OnClickedSuccess(result) {

if (result) {

tableView = $find("<%= RGProducts.ClientID %>").get_masterTableView();

if (tableView != null) {

tableView.set_dataSource(result);

tableView.dataBind();

if (commandName == "Filter" || commandName == "Load") {

// mySystem.ProductManager.ProductEditService.GetProductCount(updateVirtualItemCount);

}

else {

alert('Grid is null')

}

function OnClickedError(error, context, methodName) {

context.set_selectedd(!context.get_selected());

alert(error.get_message());

}

function updateVirtualItemCount(result) {

tableView.set_virtualItemCount(result);

}

function RGProducts_Command(sender, args) {

}

function RGProducts_RowDataBound(sender, args) {

}

function checkBoxClick(sender, args) {

//var productId = parseInt("<%= ProductId %>");

var cProductId = args;

MySystem.ProductManager.ProductActivateService.InsertRecommendedProduct(productId, cProductId);

MySystem.ProductManager.ProductEditService.GetRecommendedProducts(productId, OnInsertSuccess, OnInsertError);

}

function checkBoxClickMain(sender, args) {

var checkBox = $get(sender.id);

var cProductId = parseInt(args);

if (checkBox.checked == true) {

MySystem.ProductManager.ProductActivateService.InsertRecommendedProduct(productId, cProductId);

}

else {

MySystem.ProductManager.ProductActivateService.DeleteRecommendedProduct(productId, cProductId);

}

MySystem.ProductManager.ProductEditService.GetRecommendedProducts(productId, OnInsertSuccess, OnInsertError);

}

function checkBoxClickSelected(sender, args) {

var checkBox = $get(sender.id);

var cProductId = parseInt(args);

if (checkBox.checked == true) {

MySystem.ProductManager.ProductActivateService.InsertRecommendedProduct(cProductId, productId);

}

else {

MySystem.ProductManager.ProductActivateService.DeleteRecommendedProduct(cProductId, productId);

}

MySystem.ProductManager.ProductEditService.GetRecommendedProducts(productId, OnInsertSuccess, OnInsertError);

}

function OnInsertSuccess(result) {

if (result) {

var tableView = $find("<%= RGRecommendedProducts.ClientID %>").get_masterTableView();

if (tableView != null) {

tableView.set_dataSource(result);

tableView.dataBind();

}

else {

alert('Grid is null')

}

function OnInsertError(error, context, methodName) {

context.set_selectedd(!context.get_selected());

alert(error.get_message());

}

</script>

</telerik:RadScriptBlock >

.resizebk

{

position: fixed;

top: 1px;

bottom: 0px;

}

.RadPaneInner

{

float: left;

width: 100%;

}

.RadPaneInnerText

{

font-weight: bold;

}

</style>

<telerik:RadSplitter ID="RSProductCategory" runat="server" Height="99%" Width="100%"

CssClass="resizebk" BorderSize="0">

<telerik:RadPane ID="RPCategoryList" runat="server" Width="40%">

<asp:Image ID="productImage" runat="server" />

</div>

<div>

<asp:Label ID="productLabel" Font-Size="Large" runat="server" Text="Label"></asp:Label></div>

</div>

<telerik:RadTreeView runat="server" ID="rtvCategories" DataFieldID="Value" DataFieldParentID="ParentId"

DataTextField="Name" DataValueField="Value" PersistLoadOnDemandNodes="false" OnClientNodeClicked="ClientNodeClicked"

OnLoad="RadTreeView1_OnLoad" CheckBoxes="true">

</telerik:RadTreeView>

</div>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="RPRecommendedProduct" runat="server" Width="60%">

<telerik:RadSplitter ID="RSRecommendedProduct" Orientation="Horizontal" runat="server"

Height="99%" CssClass="resizebk" BorderSize="0">

<telerik:RadPane ID="RPRecommendedProTTitle" runat="server" Height="25" Width="100%">

<div class="RadPaneInnerText"> Recommended Product List :</div>

</telerik:RadPane>

<telerik:RadPane ID="RPRecommendedProductTop" runat="server">

<telerik:RadGrid ID="RGRecommendedProducts" runat="server" GridLines="None" AllowSorting="True" Width="100%"

AutoGenerateColumns="False" AllowPaging="True" OnNeedDataSource="RGRecommendedProducts_NeedDataSource" >

</HeaderContextMenu>

<MasterTableView AutoGenerateColumns="False" Width="100%" ClientDataKeyNames="ProductId,ProductSku"

DataKeyNames="ProductId,ProductSku" Name="Product">

</ExpandCollapseColumn>

<telerik:GridTemplateColumn UniqueName="MasterTemplateMain" HeaderText="Sell Main Product">

<asp:CheckBox ID="cbRProductMain" runat="server" AutoPostBack="true" Checked='<%#Bind("IsMainProduct") %>' onclick='<%# "return checkBoxClickMain(this," + Eval("ProductId")+ ");" %>'></asp:CheckBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="MasterTemplateSelected" HeaderText="Sell Selected Product">

<asp:CheckBox ID="cbRProductSelected" runat="server" AutoPostBack="true" Checked='<%#Bind("IsSubProduct") %>' onclick='<%# "return checkBoxClickSelected(this," + Eval("ProductId")+ ");" %>'></asp:CheckBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridImageColumn HeaderText="Picture" ImageHeight="44" ImageWidth="44" DataImageUrlFields="ProductImageUrl"

UniqueName="ProductImageUrl">

</telerik:GridImageColumn>

<telerik:GridBoundColumn DataField="ProductSku" HeaderText="SKU" UniqueName="ProductSkuColumn">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ProductName" HeaderText="Product Name" UniqueName="ProductNameColumn">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ProductId" HeaderText="ProductId" UniqueName="ProductIdcolumn"

Visible="False">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</ClientSettings>

</telerik:RadGrid>

</div>

</telerik:RadPane>

<telerik:RadPane ID="RPRecommendedProBTitle" runat="server" Height="25" Width="100%">

<div class="RadPaneInnerText"> Filtered Product List :</div>

</telerik:RadPane>

<telerik:RadPane ID="RPRecommendedProductBottom" runat="server">

<telerik:RadGrid ID="RGProducts" runat="server" GridLines="None" AllowSorting="True"

OnNeedDataSource="RGProducts_NeedDataSource" ShowHeader="true"

AutoGenerateColumns="False" AllowPaging="True" PageSize="10" Width="100%">

</HeaderContextMenu>

<MasterTableView AutoGenerateColumns="False" Width="100%" ClientDataKeyNames="ProductId,ProductSku" AllowPaging="true"

DataKeyNames="ProductId,ProductSku" Name="Product" AllowFilteringByColumn="true" CommandItemDisplay="Top">

</ExpandCollapseColumn>

<telerik:GridTemplateColumn UniqueName="MasterTemplateRecommend" HeaderText="Recommend" AllowFiltering="false">

<asp:CheckBox ID="cbRProduct" runat="server" AutoPostBack="false" onclick='<%# "return checkBoxClick(this," + Eval("ProductId")+ ");" %>'>

</asp:CheckBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridImageColumn HeaderText="Picture" ImageHeight="44" ImageWidth="44" DataImageUrlFields="ProductImageUrl"

UniqueName="ProductImages" AllowFiltering="false" AlternateText="test">

</telerik:GridImageColumn>

<telerik:GridBoundColumn DataField="ProductSku" HeaderText="SKU" UniqueName="ProductSkuColumn">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ProductName" HeaderText="Product Name" UniqueName="ProductNameColumn">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ProductId" HeaderText="ProductId" UniqueName="ProductIdcolumn"

Visible="False">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="ProductImageUrl" HeaderText="Image" DataField="ProductImageUrl" AllowFiltering="false">

<asp:Image ID="DirectionImage" runat="server" AlternateText="up" Style="display:none"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<%--<ClientEvents OnCommand="RGProducts_Command" OnDataBinding="RGProducts_RowDataBound" />--%>

</ClientSettings>

</telerik:RadGrid>

</div>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter

</asp:Content>

[WebMethod]

public IList<MyProduct> GetRecommendedProducts(int ProductId)

{

IList<MyProduct> ProductList = new List<MyProduct>();

ProductList = _productController.GetRecommendedProducts(ProductId);

return ProductList;

}

[WebMethod(EnableSession = true)]

public IList<MyProduct> GetProductsByCategoryId(int? CategoryId, int ProductId)

{

IList<MyProduct> ProductList = new List<MyProduct>();

ProductList = _productController.GetProductListByCategoryId(CategoryId, ProductId);

return ProductList;

}

[DataObjectMethod(DataObjectMethodType.Select)]

public IList<MyProduct> GetProductListByCategoryId(int? CategoryId, int ProductId)

{

IList<MyProduct> result = HttpContext.Current.Cache["ProductsByCategory"] as IList<MyProduct>;

if (result == null)

{

SqlCacheDependency dependency;

result = _productDao.GetProductsByCategoryId(CategoryId,ProductId, out dependency);

result.Select(

x =>

{

x.ProductImageUrl = ImageServerUrl + x.ProductSku + "/" + _ImageFile ?? "~/Images/OK_image.gif";

return x;

}).ToList();

HttpContext.Current.Cache.Insert("ProductsByCategory", result, dependency, DateTime.Now.AddMinutes(_ComboCachDuration), TimeSpan.Zero);

}

return result;

}

[DataObjectMethod(DataObjectMethodType.Select)]

public IList<MyProduct> GetRecommendedProducts(int productId)

{

IList<MyProduct> result = HttpContext.Current.Cache["RecommendedProducts"] as IList<MyProduct>;

if (result == null)

{

SqlCacheDependency dependency;

result = _productDao.GetRecommendedProducts(productId, out dependency);

result.Select(

x =>

{

x.ProductImageUrl = ImageServerUrl + x.ProductSku + "/" + _ImageFile ?? "~/Images/OK_image.gif";

return x;

}).ToList();

HttpContext.Current.Cache.Insert("RecommendedProducts", result, dependency, DateTime.Now.AddMinutes(_ComboCachDuration), TimeSpan.Zero);

}

return result;

}

public IList<MyProduct> GetProductsByCategoryId(int? CategoryId,int ProductId,out SqlCacheDependency dependency)

{

string cmd = "";

cmd = @"Select p.Product_ID,p.Name as [ProductName],p.SKU,p.Image1 From dbo.Table2 p Where p.Category_ID = " + CategoryId + " AND p.Product_ID NOT IN (SELECT o.ObjectType2 FROM dbo.Table1 o WHERE o.ObjectType1 = " + ProductId + ")";

DataTable dt = GetDataTable(cmd, Web2ConnString, out dependency, "Products");

IList<MyProduct> ProductList = MakeProductsByCategory(dt);

return ProductList;

}

private static IList<MyProduct> MakeProductsByCategory(DataTable dt)

{

var ProductList = new List<MyProduct>();

foreach (DataRow row in dt.Rows)

{

if (ProductList.Any(x => x.ProductId == (int)row["Product_ID"]))

{

if (ProductList.Any(x => x.IsMainProduct == false) && ProductList.Any(x => x.IsSubProduct == true) && dt.Columns.Contains("IsMainProduct"))

{

if (Convert.ToBoolean(row["IsMainProduct"]) == true)

{

ProductList.RemoveAt(ProductList.Count - 1);

var product = new Product();

product.ProductId = (int)row["Product_ID"];

product.ProductSku = row["SKU"].ToString();

product.ProductName = row["ProductName"].ToString();

product.ProductImageUrl = row["Image1"].ToString();

if (dt.Columns.Contains("IsMainProduct"))

{

product.IsMainProduct = true;

}

if (dt.Columns.Contains("IsSubProduct"))

{

product.IsSubProduct = true;

}

ProductList.Add(product);

}

else

{

// Add new product in to list if not exists

var product = new Product();

product.ProductId = (int)row["Product_ID"];

product.ProductSku = row["SKU"].ToString();

product.ProductName = row["ProductName"].ToString();

product.ProductImageUrl = row["Image1"].ToString();

if (dt.Columns.Contains("IsMainProduct"))

{

product.IsMainProduct = Convert.ToBoolean(row["IsMainProduct"]);

}

if (dt.Columns.Contains("IsSubProduct"))

{

product.IsSubProduct = Convert.ToBoolean(row["IsSubProduct"]);

}

ProductList.Add(product);

}

return ProductList;

}

public IList<MyProduct> GetRecommendedProducts(int productId, out SqlCacheDependency dependency)

{

string cmd = "";

cmd = @"SELECT Product_ID,Name as [ProductName],SKU,Image1,CASE WHEN (o.ObjectType1 = " + productId + ") THEN 'TRUE' ELSE 'FALSE' END AS [IsMainProduct],"+

"CASE WHEN (o.ObjectType2 = " + productId + ") THEN 'TRUE' ELSE 'FALSE' END AS [IsSubProduct] FROM dbo.Table2 p " +

"INNER JOIN Table1 o ON p.Product_ID = o.ObjectType2 WHERE o.ObjectType1 = " + productId +

" UNION " +

"SELECT Product_ID,Name as [ProductName],SKU,Image1,CASE WHEN (o.ObjectType1 = " + productId + ") THEN 'TRUE' ELSE 'FALSE' END AS [IsMainProduct]," +

"CASE WHEN (o.ObjectType2 = " + productId + ") THEN 'TRUE' ELSE 'FALSE' END AS [IsSubProduct] FROM dbo.Table2 p " +

"INNER JOIN Table1 o ON p.Product_ID = o.ObjectType1 WHERE o.ObjectType2 = " + productId +

"";

DataTable dt = GetDataTable(cmd, Web2ConnString, out dependency, "Products");

IList<MyProduct> ProductList = MakeProductsByCategory(dt);

return ProductList;

}

public void InsertRecommendedProduct(int parentProductId, int childProductId)

{

string sql = @"INSERT INTO dbo.Table1

(

Object_ID1,

ObjectType1,

Object_ID2,

ObjectType2

)

VALUES

(

@Object_ID1,

@ObjectType1,

@Object_ID2,

@ObjectType2

)";

var list = new List<SqlParameter>(4);

var sqlParameter = new SqlParameter("Object_ID1", SqlDbType.Int);

sqlParameter.Value = 0; // Hard Coded Value

list.Add(sqlParameter);

sqlParameter = new SqlParameter("ObjectType1", SqlDbType.Int);

sqlParameter.Value = parentProductId;

list.Add(sqlParameter);

sqlParameter = new SqlParameter("Object_ID2", SqlDbType.Int);

sqlParameter.Value = 0; // Hard Coded Value

list.Add(sqlParameter);

sqlParameter = new SqlParameter("ObjectType2", SqlDbType.Int);

sqlParameter.Value = childProductId;

list.Add(sqlParameter);

ExecuteNonQuery(sql, Web2ConnString, list);

}

public void DeleteRecommendedProduct(int parentProductId, int childProductId)

{

string sql = @"DELETE dbo.Table1 WHERE ObjectType1 = @ObjectType1 AND ObjectType2 = @ObjectType2";

var list = new List<SqlParameter>(2);

var sqlParameter = new SqlParameter("ObjectType1", SqlDbType.Int);

sqlParameter.Value = parentProductId;

list.Add(sqlParameter);

sqlParameter = new SqlParameter("ObjectType2", SqlDbType.Int);

sqlParameter.Value = childProductId;

list.Add(sqlParameter);

ExecuteNonQuery(sql, Web2ConnString, list);

}

3 Answers, 1 is accepted

answered on 27 Oct 2010, 09:11 AM

Hello Neelesh,

I reviewed the code which you post, however it is not runnable and I could not reproduce the described issues. Could you please send us a simple runnable example demonstrating the problem. You could open a formal support ticket from your Telerik account and attach a ZIP file there. In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.
Additionally I saw from the code snippets that you have the NeedDataSource event handlers attached to the RadGrids declaration, however the NeedDataSource is used when the RadGrid is bound through advanced data binding. Could you please verify that you do not mixed the advanced data binding with client side databinding?

Looking forward for your reply.

Sincerely yours,
Radoslav
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

answered on 01 Nov 2010, 08:57 AM

Hello Neelesh,

Unfortunately the RadGrid does not support combining Google-like filtering with client side databinding. The Google-like filtering is based on raising a command event for the GridFilteringItem. This will force the RadGrid to make a post back and execute the command on the server, however in client side data binding the RadGrid transfers only JSON from client-to-server-to-client and if the RadGrid causes a postback it will not be a client side data binding. If you combine the client side data binding with Google-like filtering the RadGrid may not works as expected.

Greetings,
Radoslav
the Telerik team