Populating a Kendo Grid when searching - asp.net-mvc

Question

I need to populate Kendo grid from search button. I write personal ID and I should get other information in the grid, but after writing the ID in the textbox and clicking search, I get
"Server was unable to process request. ---> Procedure or function
'PROS_CRA_PUBLIC_GET_DOCUMENT_LIST_BY_PN' expects parameter '#PN',
which was not supplied."
Controller
public ActionResult Search(string personalID, [DataSourceRequest]DataSourceRequest request)
{
var serviceclient = new PersonalInfoServiceClient();
DataSourceResult result = null;
try
{
var items = serviceclient.GetRegistryInfoForPerson(personalID);
result = items.ToDataSourceResult(request);
}
catch
{
throw;
}
finally
{
serviceclient.Close();
}
return Json(result, JsonRequestBehavior.AllowGet);
}
View (part of it)
<div id ="search">
#using (Html.BeginForm("Search", "Main")){
<p> personal number: <input type="text" name="Searchtext" id="SearchString" /> <input type="submit" value="search" name="btnSearch" id="btnSearch" /></p>
}
<div id="civil">
#(Html.Kendo().Grid<PersonalIDCheckerMvCKendo.Models.PersInfo>()
.Name("Grid")
.AutoBind(false)
.Columns(columns =>
{
//columns// })
.Groupable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(c=> c.personalID))
.Read(read => read.Action("Search", "Main").Data("test"))
)
)
</div>
<script>
$("#btnSearch").on('click', function test() {
console.log("click");
var searchText = $("#SearchString").val();
if (searchText == "") {
alert("You must enter a search value");
return;
}
$.ajax({
url: '#Url.Action("Search","Main")',
data: { personalID: searchText},
type: 'POST',
dataType: "json",
success: function(result) {
var grid = $('#Grid').getKendoGrid();
grid.dataSource.data(result);
grid.refresh();
}
});
});
</script>
Model
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ServiceModel;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;
using System.Runtime.Serialization;
using DataAnnotationsExtensions;
namespace PersonalIDCheckerMvCKendo.Models
{
[DataContract(IsReference=true)]
public class PersInfo
{
[DataMember]
[DisplayName("Personal#")]
public string personalID
{
get
{
return _PersonalID;
}
set
{
if (_PersonalID != value)
{
_PersonalID = value;
}
}
}
private string _PersonalID;
[DataMember]
[DisplayName("Name")]
public string FirstName
{
get
{
return _FirstName;
}
set
{
if (_FirstName != value)
{
_FirstName = value;
}
}
}
private string _FirstName;
[DataMember]
[DisplayName("Lastname")]
public string LastName
{
get
{
return _LastName;
}
set
{
if (_LastName != value)
{
_LastName = value;
}
}
}
private string _LastName;
//etc
thanks

Answer 1

You are not passing the personalID.
Add a javascript function that will be responsible for passing the data needed by the controller function, for example
function additionalData() {
return {
personalID: '#Model.personalID'
};
}
then change the DataSource of your grid to make use of the javascript function
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false)
.Read(read => read.Action("Search", "Main")
.Data("additionalData"))
)
also make sure that the
[DataSourceRequest]DataSourceRequest request
parameter is placed first in your controller function, for example
public ActionResult Search([DataSourceRequest]DataSourceRequest request
, string personalID)
also make sure that you are binding the columns of the grid with the properties of the object returned (In your case PersonalIDCheckerMvCKendo.Models.PersInfo). For example
.Columns(columns =>
{
columns.Bound(pi => pi.Name);
columns.Bound(pi => pi.Surname);
// Some other columns.
})
*Update
To assist you I added one of my working grid examples. Here is my grid
#(Html.Kendo().Grid<ClientSearchResult>()
.Name("Grid")
.HtmlAttributes(new {style = "height:400px; cursor:pointer"})
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false)
.Read(read => read.Action("RefreshGrid", "Client")
.Data("additionalData"))
.PageSize(20)
)
.Columns(columns =>
{
columns.Bound(c => c.ClientId);
columns.Bound(c => c.Name);
columns.Bound(c => c.PolicyNumber);
columns.Bound(c => c.ClaimNumber);
columns.Bound(c => c.Status);
columns.Bound(c => c.IsCompany);
})
.Pageable(page => page.Enabled(true).PageSizes(new[] {10, 20, 30, 40}))
.Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Events(events => events.Change("grid_selected"))
)
My javascript function
function additionalData() {
return {
cellNumber: '#Model.CellNumber',
name: '#Model.Name',
policyNumber: '#Model.PolicyNumber',
claimNumber: '#Model.ClaimNumber',
brokerCode: '#Model.BrokerCode',
brokerName: '#Model.BrokerName'
};
}
and my controller function
public ActionResult RefreshGrid([DataSourceRequest] DataSourceRequest request
, string cellNumber, string name
, string policyNumber, string claimNumber
, string brokerCode, string brokerName)
{
if (cellNumber == string.Empty && name == string.Empty && policyNumber ==
string.Empty && claimNumber == string.Empty && brokerCode == string.Empty &&
brokerName == string.Empty)
return Json(new List<ClientSearchResult>());
else
{
List<ClientSearchResult> searchResult =
ClientMaintenance.ClientSearch(cellNumber, name, policyNumber, claimNumber,
brokerCode, brokerName).ToList();
var result = searchResult.ToDataSourceResult(request);
return Json(result);
}
}

Answer 2

I fixed it
changed the controller to this:
public ActionResult Search([DataSourceRequest]DataSourceRequest request, string searchString)
{
var serviceclient = new PersonalInfoServiceClient();
DataSourceResult result = null;
if (!String.IsNullOrEmpty(searchString))
{
try
{
var items = serviceclient.GetRegistryInfoForPerson(searchString);
result = items.ToDataSourceResult(request);
}
catch
{
throw;
}
finally
{
serviceclient.Close();
}
}
return Json(result, JsonRequestBehavior.AllowGet);
}
View :
Textbox:
#Html.TextBox("SearchString")
Function:
<script type="text/javascript">
$(document).ready(function(){
$("#btnSearch").click(function (e) {
$.ajax({
url: '#Url.Action("Search","Main")',
type: 'POST',
dataType: "json",
success: function (result) {
$("#Grid").data("kendoGrid").dataSource.read();
$("#Grid").data("kendoGrid").refresh();
e.preventDefault();
}