PDA

View Full Version : [CLOSED] bind ajax proxy data to ComponentColumn Combobox in a grid



Sowjanya
Dec 10, 2013, 7:04 AM
Hi,

I am trying to achieve the foll:

1) bind/load data in the combo box that is defined inside componentcolumn of grid.
2) after the data is loaded into that combo box, preselect an item / highlight it on page load.


For each row in the grid, based on the value of one of the grid columns, I am trying to bind data to the corresponding row's component column combo box.

So, Actually, for each row of the grid, I am trying to pass the 3rd column's (cyber_control) value as a parameter to a js function that is called on the bind event of the
component column. And this parameter is used to produce the ajax proxy url dynamicaly that binds data to the combo box store.


pls let me know how i can achieve the above requirement.


Here is my code:
--------------------

"BusinessCaseColumn" is the componentcolumn and "businesscaseCombo" is the combo box inside that component column.
I also have a store for this combo box "BusinessCaseStore" that binds ajax proxy url with data.

So, I want to pass CYBER_CONTROL column value of UserControlsStore to the function BindData ( cybercontrolparam), so that the url is built dynamically and the businesscasecombo store is loaded with values. ( this shd happen for everyrow of grid)

2) Also...pls let me know how I can preselect an item in that combobox on page load..so that the preselected value is highlighted , after data is laoded into combo box

fyi, sometimes I get App.BusinessCaseCombo as undefined while debugging...why is that ?



.
..

<script type="text/javascript">


var BindData = function ( column, cmp, record, cybercontrolParam)
{
var subControlsURL = App.SubControlsURL.value + cybercontrolParam;
businessCasesURL = subControlsURL + "&BusinessCases=true";
App.BusinessCaseCombo.getStore().load({ url: businessCasesURL });
}

function combineColumns(value, meta, record, rowIndex, colIndex, store)
{
return value + ' - ' + record.get('ARTIFACT'); //value is the original value.
}

</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="MainResourceManager" runat="server" ScriptMode="Release" />
<ext:Hidden ID="SubControlsURL" runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" Layout="VBoxLayout" AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="UserInfoPanel" runat="server" Title="User Information" Layout="FitLayout"
Margins="10 10 10 10" Collapsible="true">
<Items>
<ext:DataView ID="UserDetailsDataView" runat="server" DisableSelection="true" ItemSelector="td.user-info-row"
EmptyText="">
<Store>
<ext:Store ID="UserDetailsGridStore" runat="server" AutoLoad="true">
<Proxy>
<ext:AjaxProxy Json="true" Url='<%#userDetailsUrl%>' AutoDataBind="true">
<ActionMethods Read="POST" Create="POST" />
<Headers>
<ext:Parameter Name="Accept" Value="application/json" />
<ext:Parameter Name="Content-Type" Value="application/json" />
</Headers>
<Reader>
<ext:JsonReader Root="" />
</Reader>
<Writer>
<ext:JsonWriter Root="" Encode="true" />
</Writer>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="CYBER_CONTROL">
<Fields>
<ext:ModelField Name="PROPERTY" Type="String" />
<ext:ModelField Name="VALUE" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl ID="Tpl1" runat="server">
<Html>
<div id="user-info">
<table>
<tpl for=".">
<tr>
<td class="user-info-row" colspan="4">
<tpl>
<table>
<tr>
<td style="width:30%">{PROPERTY}</td>
<td style="width:70%">{VALUE}</td>
</tr>
</table>
</tpl>
</td>
</tr>
</tpl>
</table>
</div>
</Html>
</Tpl>
</ext:DataView>
</Items>
</ext:Panel>
<ext:GridPanel ID="UserControlsGrid" runat="server" Title="Cyber Controls" ForceFit="true"
Margins="10 10 10 10" AutoScroll="true">
<Store>
<ext:Store ID="UserControlsStore" runat="server" GroupField="CYBER_CATEGORY" AutoLoad="true">
<Proxy>
<ext:AjaxProxy Json="true" Url='<%#webServiceUrl%>' AutoDataBind="true">
<ActionMethods Read="POST" Create="POST" />
<Headers>
<ext:Parameter Name="Accept" Value="application/json" />
<ext:Parameter Name="Content-Type" Value="application/json" />
</Headers>
<Reader>
<ext:JsonReader Root="" />
</Reader>
<Writer>
<ext:JsonWriter Root="" Encode="true" />
</Writer>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="GridModel1" runat="server" IDProperty="CYBER_CONTROL">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="CYBER_CATEGORY" Type="String" />
<ext:ModelField Name="CYBER_CONTROL" Type="String" />
<ext:ModelField Name="ARTIFACT" Type="String" />
<ext:ModelField Name="CURRENT_STATUS" Type="String" />
<ext:ModelField Name="START_STATUS" Type="String" />
<ext:ModelField Name="REQUEST_STATUS" Type="String" />
<ext:ModelField Name="CASE_ID" Type="String" />
<ext:ModelField Name="BUSINESS_CASE" Type="String" />

</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Features>
<ext:GroupingSummary runat="server" GroupHeaderTplString="{name}" HideGroupedHeader="true"
EnableGroupingMenu="false" />
</Features>
<ColumnModel runat="server">
<Columns>
<ext:CommandColumn runat="server" DataIndex="CYBER_CATEGORY" Hidden="true" />
<ext:Column runat="server" DataIndex="CYBER_CONTROL" >
<Renderer Fn="combineColumns" />
</ext:Column>
<ext:Column ID="Column1" runat="server" Text="Start Status" DataIndex="START_STATUS"/>
<ext:Column runat="server" Text="Current Status" DataIndex="CURRENT_STATUS"/>
<ext:ComponentColumn runat="server" Text="Request<br>Status" DataIndex="REQUEST_STATUS"
Width="25" Align="Center" Editor="true">
<Component>
<ext:ComboBox runat="server" Editable="false">
<Items>
<ext:ListItem Text="Yes" Value="Yes" />
<ext:ListItem Text="No" Value="No" />
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="BusinessCaseColumn" runat="server" Text="Business Case"
DataIndex="BUSINESS_CASE" Editor="true" Width="75">
<Component>
<ext:ComboBox ID="BusinessCaseCombo" runat="server" Editable="false" ValueField="CASE_ID"
DisplayField="BUSINESS_CASE">
<Store>
<ext:Store ID="BusinessCaseStore" runat="server" AutoLoad="false">
<Proxy>
<ext:AjaxProxy Json="true" AutoDataBind="true" >
<ActionMethods Read="POST" Create="POST" />
<Headers>
<ext:Parameter Name="Accept" Value="application/json" />
<ext:Parameter Name="Content-Type" Value="application/json" />
</Headers>
<Reader>
<ext:JsonReader Root="" />
</Reader>
<Writer>
<ext:JsonWriter Root="" Encode="true" />
</Writer>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="CASE_ID">
<Fields>
<ext:ModelField Name="CASE_ID" Type="Int" />
<ext:ModelField Name="BUSINESS_CASE" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Component>
<Listeners>
<Bind Fn="BindData" />
</Listeners>

</ext:ComponentColumn>

</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>



Server code: c#




using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;
using System.Collections;
using System.Collections.Specialized;
using System.Configuration;
using System.IO;
using System.Net;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using Ext.Net;
using Newtonsoft.Json.Linq;

namespace CyberControls.Content
{
public partial class UserView : System.Web.UI.Page
{
private static readonly string dataUrl = ConfigurationManager.AppSettings["RestfulService"];
private static string subcontrolsPopupUrl = "";

public static string webServiceUrl = "";
public static string userDetailsUrl = "";
public string userSID = string.Empty;
public string standardId = "";

protected void Page_Load(object sender, EventArgs e)
{
var user = HttpContext.Current.User;
string standardId = GetLogin(user.Identity);

if (Request.QueryString["userSID"] != null)
{
userSID = Request.QueryString["userSID"].ToString();
standardId = userSID;


}

if (!Page.IsPostBack)
{

webServiceUrl = dataUrl + "/CyberSecurityUserView?SID=" + standardId;
userDetailsUrl = webServiceUrl + "&Details=true";

subcontrolsPopupUrl = dataUrl + "/CyberSecuritySubControlPopup?SID=" + standardId + "&Control=";
this.SubControlsURL.Value = subcontrolsPopupUrl;

}
}

private static string GetLogin(System.Security.Principal.IIdentity identity)
{
string s = identity.Name;
int stop = s.IndexOf("\\");

return (stop > -1) ? s.Substring(stop + 1, s.Length - stop - 1) : string.Empty;
}
}
}

Daniil
Dec 10, 2013, 11:55 AM
Hi @Sowjanya,

First of all, we highly recommend to avoid such a scenario. I.e. using an AjaxProxy for a ComboBox's Store inside a ComponentColumn. It means that each row will initiate an individual AJAX request to server. 100 rows = 100 request. If there are, for example, ten users, then 100 rows * 10 users = 1000 requests. Such amount of requests is not good either for a browser or a server.

Anyway, it is a way to change an AjaxProxy's Url on the fly.

Example

<ext:Store runat="server">
<Proxy>
<ext:AjaxProxy Url="some URL" />
</Proxy>
<Listeners>
<BeforeLoad Handler="this.proxy.url = 'new URL';" />
</Listeners>
</ext:Store>

Sowjanya
Dec 10, 2013, 3:44 PM
Hi @Sowjanya,

First of all, we highly recommend to avoid such a scenario. I.e. using an AjaxProxy for a ComboBox's Store inside a ComponentColumn. It means that each row will initiate an individual AJAX request to server. 100 rows = 100 request. If there are, for example, ten users, then 100 rows * 10 users = 1000 requests. Such amount of requests is not good either for a browser or a server.

Anyway, it is a way to change an AjaxProxy's Url on the fly.

Example

<ext:Store runat="server">
<Proxy>
<ext:AjaxProxy Url="some URL" />
</Proxy>
<Listeners>
<BeforeLoad Handler="this.proxy.url = 'new URL';" />
</Listeners>
</ext:Store>


Hi Daniil,

Thanks for the reply...


but I want to bind the data before page is loaded...menaing...by the time page is loaded, I want the combo box to have values..

but what is happening currently is that the combobox starts binding the data only when i click it.

Can you pls let me know how i can do that ?

Also....pls let me know how I can pass record.get('CYBER_CONTROL') as parameter to this "beforeBind" js function ???

Pls let me know asap.

Thanks !

Baidaly
Dec 10, 2013, 10:34 PM
but I want to bind the data before page is loaded...menaing...by the time page is loaded, I want the combo box to have values..

but what is happening currently is that the combobox starts binding the data only when i click it.

If I understand you correctly, I don't think that this is possible. The component should be rendered and after that it will request Data.

But you can load them in BeforeBind handler.


Also....pls let me know how I can pass record.get('CYBER_CONTROL') as parameter to this "beforeBind" js function ???


BeforeBind handler has the parameter called e, which contains related record.


<BeforeBind Handler="
console.log(e.record);
" />

Daniil
Dec 11, 2013, 4:01 AM
What about to load all the data to the GridPanel's Store?