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.
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.
I am still not able to experience such an issue. Is there a part in your code where you handle other events related to the combos or change their style ? If so please send it to me. As far as the provided code is concerned it is working on my machine and I do not get to see the combo text disappears. I will highly appreciate if you could attach a working sample demonstrating this behavior in order to provide more insight.
Hello,
I am just checking if you had the time to prepare a working sample or if you have managed to resolve your issue. We will appreciate if you found a solution and post it in the forums so that all community members can benefit from it.