2 Answers, 1 is accepted
0
Seetha
Top achievements
Rank 1
Rank 1
answered on 27 Nov 2012, 01:06 PM
Hi All,
Below is my jquery to bind the dropdown using jquery.. i stored the json object in a string on page load and filtering and binding to the radcombo in the client side. now the problem is once after i choose the subtype and click on the search button it is clearing the dropdown items of my subtype.. i registered in the pageloadcomplete event also...doesnt wrk..any help would be appreciated... thanks in advance..
function BindListToCombo(sender, eventArgs) {
var list = $get('<%= hdnSubType.ClientID %>').value;
var jsonData = JSON.parse(list)
var control = document.getElementById("<%=ddlSubtype.ClientID %>");
var cntrlSubType = $find("<%=ddlSubtype.ClientID %>");
// var selectindex;
if (cntrlSubType != null) {
if ($get('<%=ddlGiftType.ClientID %>').value != "CGA"
&& $get('<%=ddlGiftType.ClientID %>').value != "CLAT" &&
$get('<%=ddlGiftType.ClientID %>').value != "CLU" &&
$get('<%=ddlGiftType.ClientID %>').value != "CRU") {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
$find("<%=ddlSubtype.ClientID %>").clearItems();
$find("<%=ddlSubtype.ClientID %>").disable();
comboItem.disable();
}
else {
$find("<%=ddlSubtype.ClientID %>").enable();
cntrlSubType.clearItems();
$.each(jsonData, function(a, items) {
$.each(items, function(b, item) {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
if ($get('<%=ddlGiftType.ClientID %>').value != null) {
if (item.Short1 == $get('<%=ddlGiftType.ClientID %>').value) {
// if (b == 0) {
//selectindex = item.SubtypeID
//}
comboItem.set_text(item.Short + " " + item.Description);
//comboItem.set_text(" <table style=width: 300px cellspacing=0 cellpadding=0><tr><td style=width: 100px;>" + item.Short + "</td><td style=width: 100px;>" + item.Description + "</td></tr></table>");
//$('#tdSubtypeDescription').html(item.Description);
//comboItem.set_value(item.Description);
comboItem.set_value(item.SubtypeID);
cntrlSubType.get_items().insert(b, comboItem);
comboItem.enable();
cntrlSubType.commitChanges();
}
}
});
});
var comboItem = cntrlSubType.findItemByValue(1);
comboItem.select();
}
}
}
Below is my jquery to bind the dropdown using jquery.. i stored the json object in a string on page load and filtering and binding to the radcombo in the client side. now the problem is once after i choose the subtype and click on the search button it is clearing the dropdown items of my subtype.. i registered in the pageloadcomplete event also...doesnt wrk..any help would be appreciated... thanks in advance..
function BindListToCombo(sender, eventArgs) {
var list = $get('<%= hdnSubType.ClientID %>').value;
var jsonData = JSON.parse(list)
var control = document.getElementById("<%=ddlSubtype.ClientID %>");
var cntrlSubType = $find("<%=ddlSubtype.ClientID %>");
// var selectindex;
if (cntrlSubType != null) {
if ($get('<%=ddlGiftType.ClientID %>').value != "CGA"
&& $get('<%=ddlGiftType.ClientID %>').value != "CLAT" &&
$get('<%=ddlGiftType.ClientID %>').value != "CLU" &&
$get('<%=ddlGiftType.ClientID %>').value != "CRU") {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
$find("<%=ddlSubtype.ClientID %>").clearItems();
$find("<%=ddlSubtype.ClientID %>").disable();
comboItem.disable();
}
else {
$find("<%=ddlSubtype.ClientID %>").enable();
cntrlSubType.clearItems();
$.each(jsonData, function(a, items) {
$.each(items, function(b, item) {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
if ($get('<%=ddlGiftType.ClientID %>').value != null) {
if (item.Short1 == $get('<%=ddlGiftType.ClientID %>').value) {
// if (b == 0) {
//selectindex = item.SubtypeID
//}
comboItem.set_text(item.Short + " " + item.Description);
//comboItem.set_text(" <table style=width: 300px cellspacing=0 cellpadding=0><tr><td style=width: 100px;>" + item.Short + "</td><td style=width: 100px;>" + item.Description + "</td></tr></table>");
//$('#tdSubtypeDescription').html(item.Description);
//comboItem.set_value(item.Description);
comboItem.set_value(item.SubtypeID);
cntrlSubType.get_items().insert(b, comboItem);
comboItem.enable();
cntrlSubType.commitChanges();
}
}
});
});
var comboItem = cntrlSubType.findItemByValue(1);
comboItem.select();
}
}
}
0
Seetha
Top achievements
Rank 1
Rank 1
answered on 03 Dec 2012, 09:20 AM
This solved my problem..
thanks
page on load()
{
hdnSubType.Value = GetJSONString(GetGiftSubtypes().Tables[0]);
output:
/*{"Table" :
[{"SubtypeID" : "5","Short" : "S","Description" : "Standard","ListOrder" : "1","GiftTypeID" : "2","Short1" : "CGA"},
{"SubtypeID" : "6","Short" : "C","Description" : "Commuted","ListOrder" : "2","GiftTypeID" : "2","Short1" : "CGA"},
{"SubtypeID" : "7","Short" : "D","Description" : "Deferred","ListOrder" : "3","GiftTypeID" : "2","Short1" : "CGA"}
,{"SubtypeID" : "8","Short" : "F","Description" : "Flexible","ListOrder" : "4","GiftTypeID" : "2","Short1" : "CGA"},
{"SubtypeID" : "11","Short" : "E","Description" : "Seed Money","ListOrder" : "5","GiftTypeID" : "2","Short1" : "CGA"},
{"SubtypeID" : "1","Short" : "G","Description" : "Grantor","ListOrder" : "1","GiftTypeID" : "3","Short1" : "CLAT"},
{"SubtypeID" : "4","Short" : "N","Description" : "Non-Grantor","ListOrder" : "2","GiftTypeID" : "3","Short1" : "CLAT"},
{"SubtypeID" : "1","Short" : "G","Description" : "Grantor","ListOrder" : "1","GiftTypeID" : "4","Short1" : "CLU"},
{"SubtypeID" : "4","Short" : "N","Description" : "Non-Grantor","ListOrder" : "2","GiftTypeID" : "4","Short1" : "CLU"},
{"SubtypeID" : "2","Short" : "I","Description" : "Net Income","ListOrder" : "4","GiftTypeID" : "6","Short1" : "CRU"}
,{"SubtypeID" : "3","Short" : "M","Description" : "Net Income with Makeup","ListOrder" : "5","GiftTypeID" : "6","Short1" : "CRU"}
,{"SubtypeID" : "5","Short" : "S","Description" : "Standard","ListOrder" : "1","GiftTypeID" : "6","Short1" : "CRU"}
,{"SubtypeID" : "9","Short" : "F","Description" : "Flip","ListOrder" : "2","GiftTypeID" : "6","Short1" : "CRU"}
,{"SubtypeID" : "10","Short" : "G","Description" : "Flip with Makeup","ListOrder" : "3","GiftTypeID" : "6","Short1" : "CRU"}]}*/
}
public static string GetJSONString(DataTable Dt)
{
string[] StrDc = new string[Dt.Columns.Count];
string HeadStr = string.Empty;
for (int i = 0; i < Dt.Columns.Count; i++)
{
StrDc[i] = Dt.Columns[i].Caption;
HeadStr += "\"" + StrDc[i] + "\" : \"" + StrDc[i] + i.ToString() + "¾" + "\",";
}
HeadStr = HeadStr.Substring(0, HeadStr.Length - 1);
StringBuilder Sb = new StringBuilder();
Sb.Append("{\"" + Dt.TableName + "\" : [");
for (int i = 0; i < Dt.Rows.Count; i++)
{
string TempStr = HeadStr;
Sb.Append("{");
for (int j = 0; j < Dt.Columns.Count; j++)
{
TempStr = TempStr.Replace(Dt.Columns[j] + j.ToString() + "¾", Dt.Rows[i][j].ToString());
}
Sb.Append(TempStr + "},");
}
Sb = new StringBuilder(Sb.ToString().Substring(0, Sb.ToString().Length - 1));
Sb.Append("]}");
return Sb.ToString();
}
aspx:
<td style="height: 23px; padding-left: 2px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 120px; height: 23px;">
<telerik:RadComboBox runat="server" ID="ddlGiftType" MaxHeight="190px" Width="95px"
EnableEmbeddedSkins="false" AutoPostBack="false" HighlightTemplatedItems="true"
OnSelectedIndexChanged="ddlGiftType_OnSelectedIndexChanged" DropDownWidth="340px"
TabIndex="2" Skin="EnhOutlook" onBlur="SetNoRecordsFoundFlag()" OnClientSelectedIndexChanged="BindListToCombo">
<HeaderTemplate>
<table style="width: 300px" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 100px;">
Name
</td>
<td style="width: 200px;">
Description
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table style="width: 300px" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 100px;">
<%# DataBinder.Eval(Container.DataItem, "Short")%>
</td>
<td style="width: 200px;">
<%# DataBinder.Eval(Container.DataItem, "Description")%>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadComboBox>
</td>
<td style="height: 23px;">
<span class="txtbold" style="padding-right: 4px">Subtype: </span>
<telerik:RadComboBox runat="server" ID="ddlSubtype" Width="58px" HighlightTemplatedItems="true"
EnableEmbeddedSkins="false" DropDownWidth="280px" TabIndex="3" Skin="EnhOutlook"
onBlur="SetNoRecordsFoundFlag()" Enabled="false" EnableLoadOnDemand="False" OnClientSelectedIndexChanged="onclientclickofsubtype">
<HeaderTemplate>
<table style="width: 260px" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 60px;">
Name
</td>
<td style="width: 200px;">
Description
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table style="width: 260px" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 60px;">
<%# DataBinder.Eval(Container.DataItem, "Short")%>
</td>
<td style="width: 200px;" id="tdSubtypeDescription">
<%# DataBinder.Eval(Container.DataItem, "Description")%>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadComboBox>
</td>
</tr>
</table>
</td>
<td>
<asp:HiddenField ID="hdnSubType" runat="server" />
</td>
jquery starts here..
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(OnEndRequest);
function OnEndRequest(sender, args) {
var combo = $find("<%=ddlSubtype.ClientID%>");
var selvalueSubType = document.getElementById("ctl00_cntMaster_tabContainer_tpGiftSearch_ddlSubtype").value;
var selvalue = combo._value;
BindListToCombo(combo, null);
Getselectedvalue(selvalue, combo);
}
function Getselectedvalue(selvalue, sender) {
var list = $get('<%= hdnSubType.ClientID %>').value;
var jsonData = JSON.parse(list)
$.each(jsonData, function(a, items) {
$.each(items, function(b, item) {
if (item.SubtypeID == selvalue) {
sender.set_text(item.Short);
sender.set_value(selvalue);
return false;
}
});
});
}
function BindListToCombo(sender, eventArgs) {
debugger;
var list = $get('<%= hdnSubType.ClientID %>').value;
var jsonData = JSON.parse(list)
var cntrlSubType = $find("<%=ddlSubtype.ClientID %>");
if (cntrlSubType != null) {
if ($get('<%=ddlGiftType.ClientID %>').value != "CGA"
&& $get('<%=ddlGiftType.ClientID %>').value != "CLAT" &&
$get('<%=ddlGiftType.ClientID %>').value != "CLU" &&
$get('<%=ddlGiftType.ClientID %>').value != "CRU") {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
$find("<%=ddlSubtype.ClientID %>").clearItems();
$find("<%=ddlSubtype.ClientID %>").disable();
comboItem.disable();
// cntrlSubType.clearItems();
// cntrlSubType.set_text("");
// cntrlSubType.set_value("");
// cntrlSubType.disable();
}
else {
$find("<%=ddlSubtype.ClientID %>").enable();
cntrlSubType.clearItems();
cntrlSubType.set_text("");
cntrlSubType.set_value("");
$.each(jsonData, function(a, items) {
$.each(items, function(b, item) {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
if ($get('<%=ddlGiftType.ClientID %>').value != null) {
if (item.Short1 == $get('<%=ddlGiftType.ClientID %>').value) {
comboItem.set_text("<table style='width: 260px' cellspacing='0' cellpadding='0'><tr><td style='width: 60px;'>" + item.Short + "</td><td style='width: 200px;'>" + item.Description + "</td></tr></table>");
comboItem.set_value(item.SubtypeID);
cntrlSubType.get_items().insert(b, comboItem);
// comboItem.enable();
cntrlSubType.commitChanges();
}
}
});
});
// var comboItem = cntrlSubType.findItemByValue(1);
// comboItem.select();
}
}
}
function onclientclickofsubtype(sender, eventargs) {
var selvalueSubType = document.getElementById("ctl00_cntMaster_tabContainer_tpGiftSearch_ddlSubtype").value;
var text = selvalueSubType.split("<table style='width: 260px' cellspacing='0' cellpadding='0'><tr><td style='width: 60px;'>");
var seltext = text[1].split("</td><td style='width: 200px;'>");
var selvalue = sender._value
sender.set_text(seltext[0]);
sender.set_value(selvalue);
}
thanks
page on load()
{
hdnSubType.Value = GetJSONString(GetGiftSubtypes().Tables[0]);
output:
/*{"Table" :
[{"SubtypeID" : "5","Short" : "S","Description" : "Standard","ListOrder" : "1","GiftTypeID" : "2","Short1" : "CGA"},
{"SubtypeID" : "6","Short" : "C","Description" : "Commuted","ListOrder" : "2","GiftTypeID" : "2","Short1" : "CGA"},
{"SubtypeID" : "7","Short" : "D","Description" : "Deferred","ListOrder" : "3","GiftTypeID" : "2","Short1" : "CGA"}
,{"SubtypeID" : "8","Short" : "F","Description" : "Flexible","ListOrder" : "4","GiftTypeID" : "2","Short1" : "CGA"},
{"SubtypeID" : "11","Short" : "E","Description" : "Seed Money","ListOrder" : "5","GiftTypeID" : "2","Short1" : "CGA"},
{"SubtypeID" : "1","Short" : "G","Description" : "Grantor","ListOrder" : "1","GiftTypeID" : "3","Short1" : "CLAT"},
{"SubtypeID" : "4","Short" : "N","Description" : "Non-Grantor","ListOrder" : "2","GiftTypeID" : "3","Short1" : "CLAT"},
{"SubtypeID" : "1","Short" : "G","Description" : "Grantor","ListOrder" : "1","GiftTypeID" : "4","Short1" : "CLU"},
{"SubtypeID" : "4","Short" : "N","Description" : "Non-Grantor","ListOrder" : "2","GiftTypeID" : "4","Short1" : "CLU"},
{"SubtypeID" : "2","Short" : "I","Description" : "Net Income","ListOrder" : "4","GiftTypeID" : "6","Short1" : "CRU"}
,{"SubtypeID" : "3","Short" : "M","Description" : "Net Income with Makeup","ListOrder" : "5","GiftTypeID" : "6","Short1" : "CRU"}
,{"SubtypeID" : "5","Short" : "S","Description" : "Standard","ListOrder" : "1","GiftTypeID" : "6","Short1" : "CRU"}
,{"SubtypeID" : "9","Short" : "F","Description" : "Flip","ListOrder" : "2","GiftTypeID" : "6","Short1" : "CRU"}
,{"SubtypeID" : "10","Short" : "G","Description" : "Flip with Makeup","ListOrder" : "3","GiftTypeID" : "6","Short1" : "CRU"}]}*/
}
public static string GetJSONString(DataTable Dt)
{
string[] StrDc = new string[Dt.Columns.Count];
string HeadStr = string.Empty;
for (int i = 0; i < Dt.Columns.Count; i++)
{
StrDc[i] = Dt.Columns[i].Caption;
HeadStr += "\"" + StrDc[i] + "\" : \"" + StrDc[i] + i.ToString() + "¾" + "\",";
}
HeadStr = HeadStr.Substring(0, HeadStr.Length - 1);
StringBuilder Sb = new StringBuilder();
Sb.Append("{\"" + Dt.TableName + "\" : [");
for (int i = 0; i < Dt.Rows.Count; i++)
{
string TempStr = HeadStr;
Sb.Append("{");
for (int j = 0; j < Dt.Columns.Count; j++)
{
TempStr = TempStr.Replace(Dt.Columns[j] + j.ToString() + "¾", Dt.Rows[i][j].ToString());
}
Sb.Append(TempStr + "},");
}
Sb = new StringBuilder(Sb.ToString().Substring(0, Sb.ToString().Length - 1));
Sb.Append("]}");
return Sb.ToString();
}
aspx:
<td style="height: 23px; padding-left: 2px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 120px; height: 23px;">
<telerik:RadComboBox runat="server" ID="ddlGiftType" MaxHeight="190px" Width="95px"
EnableEmbeddedSkins="false" AutoPostBack="false" HighlightTemplatedItems="true"
OnSelectedIndexChanged="ddlGiftType_OnSelectedIndexChanged" DropDownWidth="340px"
TabIndex="2" Skin="EnhOutlook" onBlur="SetNoRecordsFoundFlag()" OnClientSelectedIndexChanged="BindListToCombo">
<HeaderTemplate>
<table style="width: 300px" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 100px;">
Name
</td>
<td style="width: 200px;">
Description
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table style="width: 300px" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 100px;">
<%# DataBinder.Eval(Container.DataItem, "Short")%>
</td>
<td style="width: 200px;">
<%# DataBinder.Eval(Container.DataItem, "Description")%>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadComboBox>
</td>
<td style="height: 23px;">
<span class="txtbold" style="padding-right: 4px">Subtype: </span>
<telerik:RadComboBox runat="server" ID="ddlSubtype" Width="58px" HighlightTemplatedItems="true"
EnableEmbeddedSkins="false" DropDownWidth="280px" TabIndex="3" Skin="EnhOutlook"
onBlur="SetNoRecordsFoundFlag()" Enabled="false" EnableLoadOnDemand="False" OnClientSelectedIndexChanged="onclientclickofsubtype">
<HeaderTemplate>
<table style="width: 260px" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 60px;">
Name
</td>
<td style="width: 200px;">
Description
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table style="width: 260px" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 60px;">
<%# DataBinder.Eval(Container.DataItem, "Short")%>
</td>
<td style="width: 200px;" id="tdSubtypeDescription">
<%# DataBinder.Eval(Container.DataItem, "Description")%>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadComboBox>
</td>
</tr>
</table>
</td>
<td>
<asp:HiddenField ID="hdnSubType" runat="server" />
</td>
jquery starts here..
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(OnEndRequest);
function OnEndRequest(sender, args) {
var combo = $find("<%=ddlSubtype.ClientID%>");
var selvalueSubType = document.getElementById("ctl00_cntMaster_tabContainer_tpGiftSearch_ddlSubtype").value;
var selvalue = combo._value;
BindListToCombo(combo, null);
Getselectedvalue(selvalue, combo);
}
function Getselectedvalue(selvalue, sender) {
var list = $get('<%= hdnSubType.ClientID %>').value;
var jsonData = JSON.parse(list)
$.each(jsonData, function(a, items) {
$.each(items, function(b, item) {
if (item.SubtypeID == selvalue) {
sender.set_text(item.Short);
sender.set_value(selvalue);
return false;
}
});
});
}
function BindListToCombo(sender, eventArgs) {
debugger;
var list = $get('<%= hdnSubType.ClientID %>').value;
var jsonData = JSON.parse(list)
var cntrlSubType = $find("<%=ddlSubtype.ClientID %>");
if (cntrlSubType != null) {
if ($get('<%=ddlGiftType.ClientID %>').value != "CGA"
&& $get('<%=ddlGiftType.ClientID %>').value != "CLAT" &&
$get('<%=ddlGiftType.ClientID %>').value != "CLU" &&
$get('<%=ddlGiftType.ClientID %>').value != "CRU") {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
$find("<%=ddlSubtype.ClientID %>").clearItems();
$find("<%=ddlSubtype.ClientID %>").disable();
comboItem.disable();
// cntrlSubType.clearItems();
// cntrlSubType.set_text("");
// cntrlSubType.set_value("");
// cntrlSubType.disable();
}
else {
$find("<%=ddlSubtype.ClientID %>").enable();
cntrlSubType.clearItems();
cntrlSubType.set_text("");
cntrlSubType.set_value("");
$.each(jsonData, function(a, items) {
$.each(items, function(b, item) {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
if ($get('<%=ddlGiftType.ClientID %>').value != null) {
if (item.Short1 == $get('<%=ddlGiftType.ClientID %>').value) {
comboItem.set_text("<table style='width: 260px' cellspacing='0' cellpadding='0'><tr><td style='width: 60px;'>" + item.Short + "</td><td style='width: 200px;'>" + item.Description + "</td></tr></table>");
comboItem.set_value(item.SubtypeID);
cntrlSubType.get_items().insert(b, comboItem);
// comboItem.enable();
cntrlSubType.commitChanges();
}
}
});
});
// var comboItem = cntrlSubType.findItemByValue(1);
// comboItem.select();
}
}
}
function onclientclickofsubtype(sender, eventargs) {
var selvalueSubType = document.getElementById("ctl00_cntMaster_tabContainer_tpGiftSearch_ddlSubtype").value;
var text = selvalueSubType.split("<table style='width: 260px' cellspacing='0' cellpadding='0'><tr><td style='width: 60px;'>");
var seltext = text[1].split("</td><td style='width: 200px;'>");
var selvalue = sender._value
sender.set_text(seltext[0]);
sender.set_value(selvalue);
}