I have multiselect dropdown sending parameters to a controller to have the results returned to the view and bound by a isGrid . I can send 15 multiselect items with no issue, but if I send more than 15, I get the following error in my console. I wrote a simple .ajax call to do the same thing and I'm able to pass all the parameters and receive the results with no problem.
infragistics.ui.grid.framework.js:30 Uncaught Error: The remote request to fetch data has failed: ( 404 Not Found ) at $.<computed>.<computed>._renderData (infragistics.ui.grid.framework.js:30) at $.<computed>.<computed>._renderData (VM769 jquery-ui-1.10.4.js:401) at proxy (jquery-2.1.1.js:513) at Class._errorCallback (infragistics.datasource.js:36) at fire (jquery-2.1.1.js:3073) at Object.fireWith [as rejectWith] (jquery-2.1.1.js:3185) at done (jquery-2.1.1.js:8253) at XMLHttpRequest.<anonymous> (jquery-2.1.1.js:8598)
Here's my table tag
<table id="SitesGrid"></table>
And the javascript that processes the submit.
$("#ModifiedCriteriaDialogSubmitButton").on('click', function (evt) { evt.preventDefault(); popCountySelects(); refreshSitesGrid(); });
function popCountySelects() { var selCounty = $('#CountyLookups').val(); if (jQuery.isArray(selCounty)) { $('#hdnCounty').val(selCounty.join(',')) } else { $('#hdnCounty').val(selCounty) } }
function navigateToSite(siteId) { window.location = '/Checkpoint/Site/DisplaySite?cpsiteid=' + siteId; }
function navigateToCreateSite() { window.location = '/Checkpoint/Site/CreateSite'; }
function search() { common.displayLoadingDialog(); common.toggleWidget('SearchCriteriaWidget'); var parameters = $('#SiteSearchForm').serialize(); var url = searchURL + '/?ticks=' + new Date() + "&" + parameters; $('#SitesGrid').igGrid('option', 'dataSource', url); common.hideLoadingDialog(); }
function bindSitesGrid() { $("#SitesGrid").igGrid({ responseDataKey: 'Records', width: "100%", height: "400", autoGenerateColumns: false, primaryKey: "CpSiteId", fixedHeaders: true, columns: [ { key: "CpSiteId", headerText: "", hidden: true }, { key: "MasterRecordNumber", headerText: "MRN", dataType: "string", width: "10%", template: "<div class='text-left'><a style='cursor:pointer;' onclick='sitesView.navigateToSite(\"${CpSiteId}\");'>${MasterRecordNumber}</a><\div>" }, { key: "County", headerText: "County", dataType: "string", width:"10%" }, { key: "Roadway", headerText: "Roadway", dataType: "string", width: "10%" }, { key: "IntersectingRoadway", headerText: "Intersecting Roadway", dataType: "string", width: "15s%" }, { key: "Location", headerText: "Location", dataType: "string", width: "15%" }, { key: "Status", headerText: "Status", dataType: "string", width: "10%" }, { key: "SubmitDate", headerText: "Submit Date", dataType: "date", width: "10%" }, { key: "ApproveDate", headerText: "Approve Date", dataType: "date", width: "10%" }, { key: "FileNetDocumentId", headerText: "", formatter: formatViewSiteDocumentButton, width: "10%" } ], autoGenerateLayouts: false, features: [ { name: 'Sorting', type: 'remote', sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', columnSettings: [ { columnKey: 'FileNetDocumentId', allowSorting: false } ] }, { name: 'MultiColumnHeaders' }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', type: 'remote', pageSize: portalUI.pageSize(), pageSizeDropDownLocation: 'inpager' } ] });
var parameters = $('#SitesModifiedCriteriaForm').serialize(); var url = '/Checkpoint/Sites/Search/?ticks=' + new Date() + "&" + parameters;
$('#SitesGrid').igGrid('option', 'dataSource', url); }
function refreshSitesGrid() { common.displayLoadingDialog(); $("#SitesGrid").igGrid("destroy"); bindSitesGrid(); common.hideLoadingDialog(); }
Hello Ernest,
I’m glad to hear this would solve this issue. Let me know if you happen to come back to this issue in the future and need further assistance.
Regards,
Maya Kirova
Thanks for the reply Maya. I think the solution would be as you say to send it as a POST, but we haven't tried that yet as the issue isn't pressing and has been shelved for now. Thanks.
Thank you for posting in our forum.
When testing this with a simple $.ajax GET request do you also include the additional parameters that the grid would add due to the remote features enabled on it?
As the following features in the grid are set to be remote they will also include parameters specific to the features to the request’s query string:
Paging – page and pageSize parameters. For example: page=0&pageSize=25
Sorting – sort parameter . For example: sort(Col1:string): asc
Also since specific columns are defined the request will also include a select parameter with the names of the. For example: $select=Col1, Col2, Col3, Col4...
When using Get requests all parameters are send as part of the query string. However depending on the browser there is a certain amount of characters that can be send as part of the query string, which when exceeded may lead to errors.
If you need to send a really large amount of data as part of the request it is recommended to use POST requests, as then the data is not send as part of the query string but as part of the request body.
You can change the request type the grid uses via the related option: https://www.igniteui.com/help/api/2019.1/ui.igGrid#options:requestType , for example: requestType : "POST"
Let me know if that solves your issue.