Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
140
Regarding combo box property
posted

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;

border-radius: 5px;

}

div#layout .left {

padding-left: 20px;

background-color: #EEE;

border-radius: 10px;

}

div#layout .header {

background-color: #2CBDF9;

}

div#layout .footer {

background-color: #2CBDF9;

}

.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) {

var i, item;

for (i = 0; i < components.length; i++) {

item = components[i];

if (item.Id === val) {

val = item.SumitomoPartNumber;

}

}

return val;

}

</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>&nbsp;&nbsp;

@(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>

<tr>

<td>

<h4> Project</h4>

</td>

<td>

@(Html.Infragistics().ComboFor(m => m.ProjectItem)

.ID("projectCombo")

.Width("270px")

.DataSource(Model.Projects)

.ValueKey("Id")

.TextKey("ProjectCode")

.NullText("Select a Project")

//.ValidatorOptions(options => options.OnBlur(false).OnChange(false).OnSubmit(true).BodyAsParent(false))

.DataBind()

.Render()

)

</td>

</tr>

</table>

<br />

@*<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>

 

<br />

<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"))

.DataBind()

.Render()

)

<input type="hidden" name="pageSize" id="pageSize" value="" />

<input type="hidden" name="pagenumber" id="pageNumber" value="" />

</div>

</div>

</fieldset>

 

<script>

$(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);

pageNumber.val(0);

});

});

$("#exportsubmit").igButton({ labelText: $("#exportsubmit").val() });

</script>

<script>

var updates, loadingIndicator;

$(function () {

$.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 customerId = $("#customerCombo").igCombo("value");

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');

});

});

</script>

}

Parents
No Data
Reply
  • 16310
    Verified Answer
    Offline posted

    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.

Children