When I am selecting value in a combo box it is working properly. After the selection, when I move my cursor on the selected text of the combo box, the text is not remaining constant that is text is not displaying. when I move out the cursor from the combo box again the text is displaying. can you please sort out this problem for me. Here I am sending you the code which I have used.
<style type="text/css">
input.button-style {
margin-top: 10px;
}
.ui-iggrid th, .ui-iggrid th.ui-state-default, .ui-iggrid th.ui-state-hover, .ui-iggrid th.ui-state-active {
text-align: left;
white-space: pre-wrap;
div#layout {
background-color: #777;
padding: 15px;
border-radius: 5px;
/*border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;*/
div#layout .left p, div#layout .right p, div#layout .center p, div#layout h3 {
margin: 15px;
div#layout .center {
background-color: #EEE;
color: #555;
div#layout .right {
background-color: #555;
color: #EEE;
div#layout .left {
padding-left: 20px;
border-radius: 10px;
div#layout .header {
background-color: #2CBDF9;
div#layout .footer {
.hidden {
display: none !important;
.ui-datepicker {
width: 360px;
</style>
@section Body {
<h2>@ViewBag.Title</h2>
<script>
currencies = @Html.Raw(Json.Encode(Model.Currencies));
components = @Html.Raw(Json.Encode(Model.Components));
function formatCurrency(val) {
var i, item;
for (i = 0; i < currencies.length; i++) {
item = currencies[i];
if (item.Id === val) {
val = item.CurrencyCode;
return val;
function formatComponent(val) {
for (i = 0; i < components.length; i++) {
item = components[i];
val = item.SumitomoPartNumber;
</script>
<fieldset>
<div id="layout" style="width: 100%; height: 760px; display: block">
<div id="livepricereportdiv" class="left" style="width: 100%">
<br />
@using (Html.BeginForm("ExportToExcel", "CspModule", FormMethod.Post))
{
<table>
<tr>
<td><h4> Customer</h4></td>
<td>
@(Html.Infragistics().ComboFor(m => m.CustomerItem)
.ID("customerCombo")
.Width("270px")
.DataSource(Model.Customers)
.ValueKey("Id")
.TextKey("CustomerName")
.NullText("Select a Customer")
//.ValidatorOptions(options => options.OnBlur(false).OnChange(false).OnSubmit(true).BodyAsParent(false))
.DataBind()
.Render()
)
</td>
</tr>
<td>
<h4> Project</h4>
@(Html.Infragistics().ComboFor(m => m.ProjectItem)
.ID("projectCombo")
.DataSource(Model.Projects)
.TextKey("ProjectCode")
.NullText("Select a Project")
</table>
@*<legend>Export Format</legend>
<input type="radio" id="CurrentPage" name="exportType" value="false" checked="checked" />
<label for="CurrentPage">Current Page</label>
<input type="radio" id="AllPages" name="exportType" value="true">
<label for="AllPages">All Pages</label>*@
<input type="submit" id="exportsubmit" value="Export To Excel" />
<br /><br />
</div>
<div id="LivePricesGrid">
@(Html.Infragistics().Grid(Model.ComponentSalesPrices.AsQueryable())
.ID("LivePricesGrid")
.Width("100%")
.Height("500px")
.PrimaryKey("Id")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.RenderCheckboxes(true)
.AutoAdjustHeight(true)
.Columns(column =>
column.For(x => x.Id).HeaderText("Id").Hidden(true);
column.For(x => x.ComponentId).HeaderText("Component").FormatterFunction("function(val) { return formatComponent(val); }");
column.For(x => x.EffectiveStartDate).HeaderText("Effective Start Date");
column.For(x => x.EffectiveEndDate).HeaderText("Effective End Date");
column.For(x => x.CurrencyId).HeaderText("Currency").FormatterFunction("function(val) { return formatCurrency(val); }");
column.For(x => x.SellingPrice).HeaderText("Selling Price");
})
.Features(features =>
features.Sorting().Type(OpType.Local);
features.Paging().Type(OpType.Local);
//features.Filtering().Type(OpType.Local);
features.Selection().Mode(SelectionMode.Row);
features.Tooltips()
.Visibility(TooltipsVisibility.Always)
.ColumnSettings(cs =>
cs.ColumnSetting().ColumnKey("ComponentId").AllowTooltips(true);
cs.ColumnSetting().ColumnKey("EffectiveStartDate").AllowTooltips(true);
cs.ColumnSetting().ColumnKey("EffectiveEndDate").AllowTooltips(true);
cs.ColumnSetting().ColumnKey("CurrencyId").AllowTooltips(true);
cs.ColumnSetting().ColumnKey("SellingPrice").AllowTooltips(true);
.Style(TooltipsStyle.Tooltip)
.ShowDelay(100);
.DataSourceUrl(Url.Action("GetLivePricesbyCustomerIdandProjectId"))
<input type="hidden" name="pageSize" id="pageSize" value="" />
<input type="hidden" name="pagenumber" id="pageNumber" value="" />
</fieldset>
$(function () {
var grid = $("#LivePricesGrid"),
pageSize = $("#pageSize"),
pageNumber = $("#pageNumber");
pageNumber.val(0);
pageSize.val(0);
grid.on("iggridrendered", function (e, ui) {
pageSize.val(grid.igGridPaging("option", "pageSize"));
pageNumber.val(grid.igGridPaging("option", "currentPageIndex"));
});
grid.on("iggridpagingpageindexchanged", function (e, ui) {
pageNumber.val(ui.pageIndex);
grid.on("iggridpagingpagesizechanged", function (e, ui) {
pageSize.val(ui.pageSize);
$("#exportsubmit").igButton({ labelText: $("#exportsubmit").val() });
var updates, loadingIndicator;
$.ui.igValidator.defaults.showAllErrorsOnSubmit = true;
$("#customerCombo").on("igcomboselectionchanged", function (e, args) {
var customerId = $("#customerCombo").igCombo("value");
var postData = { "CustomerId": customerId };
$.getJSON("/CspModule/GetProjectsbyCustomerId", postData, function (returnData) {
$("#projectCombo").igCombo("option", "dataSource", returnData);
$("#projectCombo").on("igcomboselectionchanged", function (e, args) {
var projectId = $("#projectCombo").igCombo("value");
var postData = { "CustomerId": customerId, "ProjectId": projectId };
$.getJSON("/CspModule/GetLivePricesbyCustomerIdandProjectId", postData, function (returnData) {
$("#LivePricesGrid").igGrid("option", "dataSource", returnData);
$('.validateOptions').attr('disabled', 'disabled');
Hello venkatesh,
I followed your code carefully to get your idea and tried a similar scenario. However I was not able to reproduce the behavior you mentioned. You are trying to change the datasource of the projectCombo after selecting a value in the customerCumbo, does this work ok ? Please clarify at what exact time you see the text disappear - is this the time when you select a value and then do a mouse click outside of the combo ? Does this occur to both the combos or just one of them ?
I will highly appreciate if you clarify these things for me or if you send me a working sample demonstrating this behavior.
I will be glad to further investigate this issue for you.
after the value is selected in a combo box
When the mouse pointer Is moved on to the combo box after the selection
Again when I move mouse outside the combo box, the text is appearing
Thanks for the reply. The text is disappearing while moving cursor on that combo box after the selection of value in a combo box is done.