Js Grid Pager does not load - javascript

Js Grid External Pager is not working.
I have tried working with Aspo.net Mvc, Back end is sql server
This is my Pager configuration
pageLoading: true,
paging: true,
pageSize: 15,
pageButtonCount: 5,
pagerContainer: "#externalPager",
//pagerFormat: "current page: {pageIndex} {first} {prev} {pages} {next} {last} total pages: {pageCount}",
pagePrevText: "<",
pageNextText: ">",
pageFirstText: "<<",
pageLastText: ">>",
pageNavigatorNextText: "…",
pageNavigatorPrevText: "…",
My controller returns
controller: {
loadData: function (filter) {
var d = $j.Deferred();
$j.ajax({
type: "POST",
url: '#Url.Action("LoadData", "User")',
data:filter,
dataType: "json",
success: function (response) {
var da = {
data: response.response,
itemsCount: response.response.length
}
d.resolve(da);
}
})
//.done(function (response) {
//console.log("response", response.response.length)
//var da = {
// data: response.response,
// itemsCount: response.response.length
//}
//console.log("da", da)
//d.resolve(da);
//});
return d.promise();
}
My Dom
<div id="grid"></div>
<div id="externalPager" class="external-pager"></div>
My Css
<style>
.external-pager {
margin: 10px 0;
}
.external-pager .jsgrid-pager-current-page {
background: #c4e2ff;
color: #fff;
}
</style>
The pager does not load. I am using the external pager. I have used exactly as same as the sample given. But the pager does not seem to load. Am I missing out on something. Any help is appreciated

Are you trying to lead at least one "full" page? If there isn't more than one page, you won't get a page. Also, if you don't return the total quantity of results, it also won't know to add a pager.
You have to return the data in the following format for the pager to work correctly with the data loading correctly.
{
data: [{your list here}],
itemsCount: {int}
}
It's barely in the documentation, as it's inline and not very obvious. (Bolding mine.)
loadData is a function returning an array of data or jQuery promise that will be resolved with an array of data (when pageLoading is true instead of object the structure { data: [items], itemsCount: [total items count] } should be returned). Accepts filter parameter including current filter options and paging parameters when
http://js-grid.com/docs/#controller

add new div with ID in my case I had used nbrdeclar it's will work
success: function (response) {
$("#nbrdeclar").text("Nombre de déclarations :"+response.length);
}

Related

Multiselect dropdown search is very slow with large data

Hi i am using multiselect dropdown, using select2 jquery 4.0.3
i am getting data using Viewbag and loading around 9000 data in viewbag below is the dropdown
#Html.DropDownListFor(m => m.Tags, ViewBag.tags1 as IEnumerable<SelectListItem> , "----Select tags----", new { #class = "Tags form-control", multiple = "multiple", #id = "Tags" })
<script>
$(document).ready(function () {
$("#Tags").select2({
placeholder: "Select Tags",
minimumInputLength: 3,
tags: true
})
});
</script>
ViewBag.tags1 contains my data , now my page load perfectly but while searching (type required data in dropdown search box) dropdown reacts very very slow.
It feels like system has got hanged, any action in that search box is very slow.
Any solution for this?
Need help.
Loading 9000 items and inserting it to DOM is a bad idea.
Please see the code below, it will be easy to implement. This will allow you to load the data by page.
You need to create an endpoint that returns JSON.
$(".js-data-example-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

Select2 - Can't select a value?

Release version (Select 4.0.1)
HTML
<select id="search_customers" style="width: 300px;"></select>
Javascript:
$("#search_customers").select2({
multiple: false,
allowClear: true,
ajax: {
url: "#Url.Action("
SearchCustomers ", "
Home ")",
dataType: 'json',
delay: 250,
data: function(params) {
return {
id: params.term, // search term
};
},
processResults: function(data, params) {
return {
results: data
} // Data is a List<T> of id an text
},
}
});
The dropdown works, and I can see my records, however, when I click on one of the options the box closes, and the selected record isn't shown. My box looks like this
I've tried everything I can think of. The issue appears in all browsers. The data being return is a list of id/text pairs.
Controller code
var customers = this.service.SearchCustomers(id).Select(x => new { id = x.CustomerID, text = x.CustomerName }).ToList();
return Json(customers, JsonRequestBehavior.AllowGet);
My customer ID's had leading spaces for some reason. (Old ERP system), so adding a .Trim() call to the select statement on the customer ID fixed it. Apparently select2 doesn't like " 56", but "56" is fine!

Javascript Kendo Datasource calling MVC Controller

Sometimes I like to use the HTML5/Javascript implementations of the Kendo framework because you can do some things a little easier. In this case I need to know the number of results so I can either display a kendo grid or not, however other times I need to modify the datasource based on user input on the client side. Unfortunately you can't get the number of results or modify the datasource (as far as I know) using the MVC wrappers. How can I call the controller using the Javascript implementation of the Kendo datasource?
I was able to get this working using the following code:
Controller:
public ActionResult GetStuff(string parameter)
{
// Get your data here ...
var data = GetData(parameter);
return Json(data, JsonRequestBehavior.AllowGet);
} // end
Markup/cshtml:
<div id='myGrid'></div>
<script>
$(document).ready(function () {
// Define the dataSource, note that the schema elements are specified
var dataSource = new kendo.data.DataSource({
dataType: "json",
type: "GET",
transport: {
read: '#Url.Action("MethodName", "ControllerName", new {parameter = myParameter} )'
},
schema: {
data: "Stuff",
total: "TotalNumberofStuff",
errors: "ErrorMessage"
}
});
}
// Call fetch on the dataSource - this gets the data - the fetch method will make only one call.
// Please note that the datasource fetch call is async, so we must use it's results within the fetch function.
dataSource.fetch(function () {
var numberOfItems = dataSource.total();
if (numberOfItems == 0) {
// If 0 items are returned show the label that says there are no items
$("#myGrid").append("<p><label style='font-size: small; color: red;'>-- No Items --</label></p>");
}
else {
$("#myGrid").kendoGrid({
dataSource: dataSource,
height: function () {
return (numberOfItems >= 1 && numberOfItems <= 5) ? null : "225";
},
columns: [
{ field: "StuffId", title: "Id", width: 150 },
{ field: "Stuff", title: "Stuff", width: 150 }
]
});
}
});
</script>

Kendo combobox takes time to load and open if datasource has a huge amount of data

I have tried using a Kendo Combobox with a datasource having a structure like:
{text: "12 Angry Men", value:"1"}
and the Kendo Combobox is initialised as:
$("#movies").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
height: 100
})
.closest(".k-widget")
.attr("id", "movies_wrapper")
;
$("#filter").kendoDropDownList({
change: filterTypeOnChanged
});
It is found that for data of about 40,000 objects the combobox takes a 3 sec delay to load and 6-7 secs of delay to open it each time.
I debugged the native code and found out that it does take some time to handle the animation for so many objects to be shown in the popup.
I therefore tried passing animation as false.
But this still did not reduce the delay.Can someone help solve this problem?
I had a similar issue myself with trying to load approx. 20000 items into a combobox.
The way round it is to use server filtering to only pull back a limited number of results. I find 100 is a decent enough number and if the result isn't there then the filter term needs to be a bit more specific to get the eventual correct item.
It obviously means more trips to the server to get the results but I find that is trade off worth taking.
$('#' + fullControlID).kendoComboBox({
dataTextField: 'Text',
dataValueField: 'Value',
filter: "contains",
autoBind: true,
ignoreCase: true,
minLength: 3,
change: function (e) {
$('#' + fullControlID).data("kendoComboBox").dataSource.read();
},
dataSource: {
serverfiltering: true,
serverPaging: true,
pageSize: 100,
transport: {
read:
{
type: "POST",
dataType: "json",
url: transportUrl,
cache: false,
data: {
filterText: function () {
var filter = $('#' + fullControlID).data("kendoComboBox").input.val();
if(filter === '{the place holder text ignore it}')
{
filter = '';
}
return filter;
}
},
}
}
}
});
above is some code that I use to do this with the appropriate controller/action (using mvc) behind the scenes.
if you need more info then let me know.
Note: (fullcontrolID is the id for the control that is the combobox).

Using Angular.JS to bind a JSON value to a Syncfusion Circular gauge

I am working on a project using Syncfusion Javascript gauge control to display a weekly pay bonus. The data is stored on a SharePoint list. I wrote a javascript to convert the sharepoint list from XML to JSON.
<script type="text/javascript">
$ajax({
url: "/_api/web/lists/GetByTitle('bonusEntry')/items?$orderby=Date desc&$filter=Department eq 'Meltshop'&$top=1",
type: "GET",
headers: {
"accept":"application/json;odata=verbose",
},
success: function (data) {
var newMsBonus = "";
for(i=0; i < data.d.results.length; i++){
newMsBonus = newMsBonus + "<div>" + data.d.results[i].ACrew + "</div>";
}
$('#oDataanalysisScoreBoard').html(newMsBonus);
},
error: function (error) {
alert("error: " + JSON.stringify(error));
}
})
Then the value is placed in this Div.
<div id="oDataanalysisScoreBoard"></div>
Basically what I would like to do is bind the data to the Syncfusion control which is set up like this:
$("#CircularGauge1").ejCircularGauge({
width: 500,
height: 500,
backgroundColor: "#3D3F3D",
readOnly: false,
scales: [{
ticks: [{
type: "major",
distanceFromScale: 70,
height: 20,
width: 3,
color: "#ffffff"
}, {
type: "minor",
height: 12,
width: 1,
distanceFromScale: 70,
color: "#ffffff"
}],
}]
});
Then the gauge is created inside this:
<div id="CircularGauge1"></div>
The gauge will build but I cannot get the gauge to recieve the value.
If anyone has any ideas on how I can make this work or things I'm doing I would greatly appreciate any input! Thanks everyone!
EDIT:
The synfusion software creates a gauge and changes the needle based on a number value thats given to it. My ajax call pulls a number entered into a Sharepoint list and then displays that in a div.
In the above code snippet you mentioned the passing value as “String”. If you pass the string value to the loop it will concatenate as string value only. But we need to pass the integer value to the Circular Gauge properties(width, height, distancefromscale) to take effect. Hence, change the code snippet with the following.
$.ajax({
url: "/Gauge/GetData",
type: "POST",
success: function (data) {
var newMsBonus = 0;
for (i = 0; i < data.length; i++) {
newMsBonus = newMsBonus + data[i].MajorDistanceFromScale; // Here i have used the MajorScale distanceFromScale value for the demo
}
$('#oDataanalysisScoreBoard').html(newMsBonus);
},
failure: function (error) {
alert("no data available");
}
});
And we have prepared the sample to meet your requirement with the MVC application including the “.mdf” database. We have created the table called “GaugeData” and added the two record. And using the “$.ajax” called the action method “GetData” and received the “JSON” data from the controller. Refer the following code snippet.
View Page:
$.ajax({
url: "/Gauge/GetData",
type: "POST",
success: function (data) {},
failure: function (error) {
}
});
Controller Page:
public class GaugeController : Controller
{
GaugeDataDataContext db = new GaugeDataDataContext();
public JsonResult GetData()
{
IEnumerable data = db.GaugeDatas.Take(500);
return Json(data, JsonRequestBehavior.AllowGet);
}
}
And then assigned the calculated value to the gauge property. Here, I have used the “MajorDistanceFromScale” value read from the database record and assigned to the gauge properties. Refer the following coding snippet.
var distanceValue = parseInt($("#oDataanalysisScoreBoard")[0].innerHTML);
$("#CircularGauge1").ejCircularGauge({
width: 500,
height: 500,
backgroundColor: "#3D3F3D",
readOnly: false,
scales: [{
ticks: [{
type: "major",
distanceFromScale: distanceValue,
height: 20,
width: 3,
color: "#ffffff"
}, {
type: "minor",
height: 12,
width: 1,
distanceFromScale: 70,
color: "#ffffff"
}],
}]
});
And also please refer the below attached sample for more reference.
GaugeListSample

Categories