Kendo UI ComboBox Loading delay - asp.net-mvc

I am working on web application (shipping domain) and using kendo UI for look and feel. While using kendo combo box I am facing an issue. In the database we have thousands of records in Vessel table which is bounded to a combobox, It took near about 6 sec to load if user wants to see all vessels (first time), but it took the same amount of time to get load second time also (that's the problem here) even it doesn't hit the Action method in controller (second time). I think its kendo's default functionality for combobox that if all records got loaded at 1st time (without filter) it will not send request to server to get the response for same request till we enter something in combobox filter, but if the combo box is getting load from the cache then it should't took the same time (6 sec) to load the combo box. I have searched for caching opting in kendo combobox documentation but no luck :( till now.
Here is my kendo combobox code:-
#(Html.Kendo().ComboBoxFor(i => i.VesselId)
.Name("VesselId").HtmlAttributes(new { style = "width:100%" })
.DataTextField("VesselName")
.Placeholder("Select Vessel...")
.DataValueField("VesselId")
.Filter(FilterType.Contains)
.AutoBind(false)
.MinLength(1)
.Value(proFormaVesselId)
.Text(proFormaVesselName)
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("GetFilteredVessels", "Common");
})
.Schema(schema =>
{
schema.Data("Data").Total("Total");
});
})
.Events(eve => eve.Change(#<text>
function () {
if (this.value() && this.selectedIndex == -1)
{
var dt = this.dataSource._data[0];
this.text('');
}
}
</text>
))
)
here is action method:-
public JsonResult GetFilteredVessels([DataSourceRequest] DataSourceRequest request)
{
var data = _IVesselService.GetVessel().Select(x => new
{
VesselId = x.VesselId,
VesselName = x.Status == (byte)enumRecordStatus.Accepted ? x.VesselName : (x.Status == (byte)enumRecordStatus.Draft ? x.VesselName + "(D)" : x.VesselName + "(R)")
}).OrderBy(x => x.VesselName);
var result= Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
result.MaxJsonLength = int.MaxValue;
return result;
}
please don't get confused with this line of code result.MaxJsonLength = int.MaxValue; previously i was getting error about the json lenth it too high issue, so I have settled it like this.
Now Combo box got loaded and took 6 sec but second time when I tried to load the same records (All records) it took 6 sec again even the breakpoin which I have placed on the GetFilteredVessels ActionMethod doesn't got hit. If combo box it getting load from cache then why it took 6 sec ?
I hope you understood my problem if not please comment I can explain more.
Thanks in advance.

as per #David Shorthose suggestion I found a temporary solution for this problem. Please refer to this Demo I am not selecting this as answer because may be someone or me can provide better solution for this, lets hope for the best. I am still looking doing research on it

Related

Ag grid react: How to specify start page, pagination

I'd like to know id there is a way to open an ag-grid on the last page upon start. The page size is 10000 and the extra rows should go in the first page, not the last. (So the last page and everything else except for the first page should have 10000 rows)
I've done some research online and didn't really find what I was looking for. I tried implementing the getRows method below but the results are the same.
getRows (params) {
// Use startRow and endRow for sending pagination to Backend
params.startPage = (this.state.fileNames.length / 1000);
params.endPage = 1;
this.apiService().subscribe(response => {
params.successCallback(
response.data, response.totalRecords
);
})
}

Conditional statements using vue.js with html element

Im new to vue.js, and Im trying to do a simple if with a date field within my ASP.NET MVC project.
I've seen examples on vue tutorials where the condition is done in the js file, but Im not convinced that this would help me.
I currently have a date field in my ViewModel that has two drop downs. This is for an application form that asks a person how long have they lived at their address. They can select up to 11 months and 6+ years. I have a button that allows them to add another address. When you click this button, the viewModel for the date fields are repeated so they can add another one (stored in a List).
However I want to wrap this around a condition that says only if the date entered is less than 6 years then the button would appear. Like I said, at the min it is there always.
my code for the address and its button is:
<fieldset>
<legend>Please provide all your addresses in the last 6 years</legend>
#Html.EditorFor(m => m.PreviousAddresses)
</fieldset>
<button class="button">Add another previous address</button>
What im trying to do is something like v-if="PreviousAddress < 6" but I dont think thats right. Can someone help with the syntax?
EDIT: The validation works on the back end. Just need the client side to work with it:
[Minimum(72, ErrorMessage = "Please enter 6 years address history")]
public int TotalAddressHistoryInMonths
{
get
{
int totalMonths = CurrentAddress?.Duration?.TotalPeriodInMonths ?? 0;
if (PreviousAddresses != null)
{
foreach (ResidencyInputViewModel residency in PreviousAddresses)
{
totalMonths += residency?.Duration?.TotalPeriodInMonths ?? 0;
}
}
return totalMonths;
}
}
The solution you have appears to be correct, but can you post the rest of your code. Seeing the data object should help.

Telerik MVC grid sort order preserve

I have an old Telerik MVC grid(not Kendo). It's sortable:
.Pageable(pager => pager.Enabled(true).PageSize(20))
.Selectable()
.Sortable()
The problem is it doesn't preserve its state after navigation or page refresh. My goal is to preserve the sort state in one session. So if the user made a sort on one of the cells he should see that sorting even if he navigates elsewhere on the page, but after he logs out/ or closes the browser it can reset. How can I achieve this?
UPDATE
if (window.sortHelper) {
sessionStorage.sortSettings = JSON.stringify(e.sortedColumns[0]);
} else {
if (sessionStorage.sortSettings != 'undefined')
e.sortedColumns[0] = JSON.parse(sessionStorage.sortSettings);
window.sortHelper = true;
}
I did this so far in the OnBeforeDataBinding event, the logic seems to be good, but it doesn't work. Doesn't makes the grid sorted despite that the sortingColumns was set.
Any idea?

Issue with paging when deleting object when using DeletObject (Entity Framework)

I'm having an issue with paging when I delete an object using the DeleteObject method (Entity Framework). The deletion works fine, as it is supposed to, but the page number is updated to the next page. I mean, if I'm deleting a record that is on page 3 of my search results, after the deletion is completed, the page number is updated to "page 4", even though the search results still correspond to page 3!
I have checked everything I could think of, but I can't figure out what is wrong. Has anyone had this problem before? (I'm pretty new to MVC, Razor, etc).
Thank you!
Thanks for the reply, Gert Arnold and Moeri; I posted in a hurry going to a meeting and didn't add enough details.
As I went to grab the code to post here, I found the solution:
function DeleteRecord(SubscriptionID){
var URL = "#Url.Content("~")PubSub/DeleteSubscriber/" + SubscriptionID;
if(confirm("Are sure you want to delete this record?")){
$.get(URL, function (data) {
if(data=="True")
{
$("#SubscriptionContainer"+SubscriptionID).show();
$("#Subscription"+SubscriptionID).html("<b><i>Delete Successful! Refreshing list please wait........</i></b>");
window.setTimeout(function () {
GetPage($("#PageNumber").val() - 1); //Adding the "- 1" solved the issue
}, 2000);
}
});
}
}
To fix the code all I did was replacing GetPage($("#PageNumber").val(), with GetPage($("#PageNumber").val() - 1);

ASP.NET MVC, jQuery/AJAX cascading dropdownlist issues with LINQ2SQL?

The premise:
Get a dropdownlist's content based on the value selected in the first one.
Literal data returns successfully.
LINQ queries on a LINQ2SQL Datacontext fail.
Being a total rookie at this MVC/LINQ/jQuery stuff, I battled for HOURS on end trying to figure out what was wrong w/ my understanding of the code. When i hard coded my values, everything worked fine, but as soon as i tried to query a LINQ2SQL datacontext, all sorts of wierd stuff started to happen and, finally, when i duplicated the query results into a new object everything worked again! Forgive my lack of linguistic prowess when it comes to LINQ, but, I think it has to do with the "connectedness" of LINQ2SQL's data. When I create another list representing the queried data, all is well, but if i try to use the queried data itself, jQuery's world falls apart (and without erroring too - which made it hard to figure out).
I would basically like a reference to or an explanation of LINQ2SQL's "connectedness" and how/why it's a problem, especially in these remote/asynchronous calling situations!
See the code below - hope it makes sense & thank you in advance :)
Basic Layout:
<script type="text/javascript">
$(document).ready(function() {
$("#CaseTypeCategoryId").change(function() {
$.getJSON("/Cases/CaseNatures", { caseTypeCategoryId: $("#CaseTypeCategoryId option:selected").val() }, function(data) {
$("#CaseNatureId option").remove();
$("#CaseNatureId").fillSelect(data);
});
});
});
</script>
<p>
<label for="CaseTypeCategoryId">Case Type:</label>
<%= Html.DropDownList("CaseTypeCategoryId") %>
</p>
<p>
<label for="CaseNatureId">Case Nature</label>
<select id="CaseNatureId" name="CaseNatureId></select>
</p>
Controller.aspx
Initially it was just a SelectList() { new ListItem() { Text = "--Select A Case Nature--", Value = "" }}
and it worked just fine! Then I tried
public JsonResult CaseNatures(int caseTypeCategoryId)
{
return this.Json(_caseService.GetCaseNatures(caseTypeCategoryId)
.ToList());
}
This failed - no javascript errors, no compilation issues, couldn't figure it out until i tried dumping the data into a new list manually and i finally settled on:
public JsonResult CaseNatures(int caseTypeCategoryId)
{
List returnList = new List();
returnList.Add(new ListItem() { Text = "--Select A Case Nature--", Value = "" });
_caseService.GetCaseNatures(caseTypeCategoryId)
.ToList()
.ForEach(p => returnList.Add(new ListItem() { Value = p.CaseNatureId.ToString(), Text = p.CaseNatureText }));
return this.Json(returnList);
}
Look here - similar problem.
Use JsonRequestBehavior.AllowGet in your sentence:
this.Json(_caseService.GetCaseNatures(caseTypeCategoryId)
.ToList(),JsonRequestBehavior.AllowGet);

Resources