Dec 10, 2013, 6:04 AM
[CLOSED] bind ajax proxy data to ComponentColumn Combobox in a grid
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 ?
Server code: c#
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;
}
}
}
Last edited by Daniil; Dec 18, 2013 at 2:51 AM.
Reason: [CLOSED]
Originally Posted by Daniil
