Develop Reference

Kendo datasource parse Json as undefined

I tried to binding remote DataSource for my Kendo DropDownList, but the Kendo Datasource could parse the json response correctly. The result turns out to be "undefined" and recognize every single charachter in the data as a selection. I have no idea where the bug is, please help me!
Responce from controllor:
"[{"CODE_ID":"A","CODE_NAME":"Free"},{"CODE_ID":"B","CODE_NAME":"Borrowed"},{"CODE_ID":"U","CODE_NAME":"Unable"},{"CODE_ID":"C","CODE_NAME":"To be Borrowed"}]"
HTML Result
Front-end js code for Kendo DropDownList
$(document).ready(function () {
$("#search_category").kendoDropDownList({
dataTextField: "CODE_NAME",
dataValueField: "CODE_ID",
dataSource: {
transport: {
read: {
type: "GET",
url: "/BookData/GetDataList",
data: { name: "category" },
dataType: "json"
}
},
},
});
}
BookDataControllor
[HttpGet()]
public JsonResult GetDatalist(string name)
{
string result;
try
{
switch (name)
{
case "category":
result = codeService.GetDataList("CODE_ID, CODE_NAME",
"BOOK_CODE", "CODE_TYPE = 'BOOK_STATUS'");
break;
default:
return Json(false);
}
return Json(result, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(false);
}
}
back-end class CodeService
private DataTable GetDataTable(string sql)
{
DataTable dt = new DataTable();
using (SqlConnection conn = new SqlConnection(this.GetDBConnectionString()))
{
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataAdapter sqlAdapter = new SqlDataAdapter(cmd);
sqlAdapter.Fill(dt);
conn.Close();
}
return dt;
}
public string GetDataList(string col, string src, string cond)
{
DataTable dt = GetDataTable(string.Format(#"SELECT {0} FROM {1} WHERE {2}",
col, src, cond).ToUpper());
string result = JsonConvert.SerializeObject(dt);
return result;
}

You are returning CODE_ID and CODE_NAME in your controller, but the values you're referencing on the front-end are Category_Name and Category_ID. Change them to reference the correct column names:
$('#search_category').kendoDropDownList({
dataTextField: 'CODE_NAME',
dataValueField: 'CODE_ID',
dataSource: {
transport: {
read: {
type: 'GET',
url: '/BookData/GetDataList',
data: { name: 'category' },
dataType: 'json',
success: function (response) {
console.log(response);
}
}
}
}
});

It seems that even returning your data with Json(result) as JsonResult, the response content could be a string, which the DataSource is not handling the right way.
Try enrusing that it will be json with parse method:
$(document).ready(function () {
$("#search_category").kendoDropDownList({
dataTextField: "CODE_NAME",
dataValueField: "CODE_ID",
dataSource: {
transport: {
read: {
type: "GET",
url: "/BookData/GetDataList",
data: { name: "category" },
dataType: "json"
}
},
schema: {
parse: function(data) {
// Here you can check what 'data' really is
console.log(data);
return JSON.parse(data);
}
}
},
});
}

How to create Dynamically Jquery Datatatable with Headers in MVC

I'm trying to create a Monthly report in MVC. For that I need to create the days of user selected month as it's heading. But When I try to set it by sing the jquery It show some errors.
Cannot use 'in' operator to search for '61764' in [{"Name":"Abel John","Father Name":John,"Sex":"Male","Date of Birth ....
I'm new to Jquery and MVC . here Is my code . Please help me to solve the issue.
$.ajax({
type: "POST",
url: '#Url.Action("GetLeaveDeatais", "LeaveDetails")?year=' + date,
contentType: "application/json; charset=utf-8",
year: { year: '2013' },
contentType: 'application/html; charset=utf-8',
success: function () {
}
})
.success(function (result) {
$('#divDetails').html(function () {
var cols = [];
var dataSet = result;
var my_columns = [];
$.each(JSON.parse(JSON.stringify(dataSet)), function (key, value) {
var my_item = {};
my_item.data = key;
my_item.title = key;
my_columns.push(my_item);
});
var table = $('#example').DataTable({
columns: my_columns
});
}
);
});
My Controler
public string GetLeaveDeatais(string year)
{
List<DataRow> list = new List<DataRow>();
DataTable dt = new DataTable();
MusterRoll mstRoll= new MusterRoll();
dt = clsBD.GetEmpLeaveDeatils("2019-05-1");
if (dt != null)
list=dt.AsEnumerable().ToList();
JavaScriptSerializer js = new JavaScriptSerializer();
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}
Please find me to get a solution soon.
Thanks in Advance

Returning data from WebMethod to ajax

I need to return DataTable to Ajax from c#(WebMethod).
I'm sending 'Value" to WebMethod. Value is received and used as a parameter for a procedure in the code below(getObj.getValuesTableAdapter(Value);).
Then procedure returns datatable(dtObj) and ajax should receive it back in the "success" part.
I need help with these code. I tried everything but failed.
I can't return DataTable directly from [WebMethod] like this. I need to convert DataTable to JSON before sending to client somehow.
This is my c# code:
[WebMethod(EnableSession = true)]
public static DataTable GetObject(int Value)
{
LogicTableAdapters.getValuesTableAdapter getObj = new LogicTableAdapters.getValuesTableAdapter();
DataTable getObj = getObj.getValuesTableAdapter(Value);
DataTable dtObj = new DataTable();
dtObj.Columns.AddRange(new DataColumn[4]{
new DataColumn("ObjectID", typeof(string)),
new DataColumn("ObjectName", typeof(string)),
new DataColumn("ObjectValue", typeof(string)),
new DataColumn("ParentID", typeof(int)),
});
foreach (DataRow dr in getObj.Rows)
{
dtCh.Rows.Add(dr["ObjectID"].ToString(), dr["ObjectName"] == DBNull.Value ? null : dr["ObjectValue"].ToString(), dr["ParentID"].ToString());
}
return dtObj;
}
This is my ajax:
$(document).on('click', ".Btn", function () {
header = $(this).closest('tr').find('.ColumnID').text()
console.log(Value);
$.ajax({
type: "POST",
url: "MyAdmin.aspx/GetObject",
data: JSON.stringify({ 'Value': Value }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
//code that should receive datatable to be displayed
},
error: function () {
}
});
});
Thanks in advance !

try following
create a class for sending data to frontend
public class DataForClientSide
{
public string id { get; set; }
public string name { get; set; }
public string value{ get; set; }
}
Edit Your webmethod as follow
[WebMethod(EnableSession = true)]
public static DataForClientSide[] GetObject(int Value)
{
List<DataForClientSide> details = new List<DataForClientSide>();
LogicTableAdapters.getValuesTableAdapter getObj = new LogicTableAdapters.getValuesTableAdapter();
DataTable getObj = getObj.getValuesTableAdapter(Value);
DataTable dtObj = new DataTable();
dtObj.Columns.AddRange(new DataColumn[4]{ new DataColumn("ObjectID", typeof(string)), new DataColumn("ObjectName", typeof(string)), new DataColumn("ObjectValue", typeof(string)), new DataColumn("ParentID", typeof(int)),
});
foreach (DataRow dr in getObj.Rows)
{
DataForClientSide Info= new DataForClientSide();
Info.id = dr["ObjectID"].ToString();
Info.name = dr["ObjectName"].ToString();
Info.value = dr["ObjectValue"].ToString();
//multiple data as u want. . . . .
details.Add(Info);
}
return details.ToArray();
}
Write following code in your ajax function to get values
success: function (data) {
if(data.d.length>0)
{
$.each(data,function(i,values){
//you can get all values as per each iteration as follow
//to get id
values.id;
//to get name
values.name;
//to get value
values.value;
});
}
}

Client side error TypeError: a is undefined

I get data from Webmethod & it need to bind to a table.But my Jquery function not success.Not call webmethod because of Ajax call error.
My Webmethod is
[WebMethod, ScriptMethod]
public static List<UploadedFiles> GetAllUploadedFiles()
{
List<UploadedFiles> UploadedFilesDetails = new List<UploadedFiles>();
try
{
SqlCommand comGetAllFiles = new SqlCommand("SP_GetAllUploadedFiles", conDB);
comGetAllFiles.CommandType = CommandType.StoredProcedure;
if (conDB.State == ConnectionState.Closed)
conDB.Open();
SqlDataReader rdr = comGetAllFiles.ExecuteReader();
DataTable dt = new DataTable();
dt.Load(rdr);
foreach (DataRow r in dt.Rows)
{
UploadedFilesDetails.Add(new UploadedFiles
{
Id = (int)r["Id"],
UserId =(Guid)r["UserId"],
FilePath = r["FilePath"].ToString(),
Date =(DateTime) r["Date"]
});
}
}
catch(Exception ee)
{
}
finally
{
conDB.Close();
}
return UploadedFilesDetails;
My Ajax Function
<script>
$(function () {
LoadUploadFiles();
});
function LoadUploadFiles() {
var url = '<%=ResolveUrl("WebMethods.aspx/GetAllUploadedFiles") %>';
$.ajax({
url: url,
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (Result) {
alert("x");//<-- This alert firing
$.each(Result.d, function (key, value) {
alert(Result.d); //<-- Thisone not firing
$("#uploaddata").append($("<table><tr></tr></table>").val
(value.Id).html(value.FilePath));
});
},
error: function (e, x) {
alert(x.ResponseText);
}
});
}
</script>

Error with loading datasource and convert it to json_data

I have a problem with converting datasource to json_data. Here is my code:
In my default.aspx.cs:
[WebMethod]
public string GetJson()
{
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row = null;
DataTable dtEmployee = new DataTable();
dtEmployee.Columns.Add("EmpId", typeof(int));
dtEmployee.Columns.Add("Name", typeof(string));
dtEmployee.Columns.Add("Address", typeof(string));
dtEmployee.Columns.Add("Date", typeof(DateTime));
//
// Here we add five DataRows.
//
dtEmployee.Rows.Add(25, "Rk", "Gurgaon", DateTime.Now);
dtEmployee.Rows.Add(50, "Sachin", "Noida", DateTime.Now);
dtEmployee.Rows.Add(10, "Nitin", "Noida", DateTime.Now);
dtEmployee.Rows.Add(21, "Aditya", "Meerut", DateTime.Now);
dtEmployee.Rows.Add(100, "Mohan", "Banglore", DateTime.Now);
foreach (DataRow dr in dtEmployee.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dtEmployee.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}
And here is in my default.apsx page:
var data2 = { };
function GetJsonData(callback) {
$.ajax({
type: "POST",
async: true,
url: "Default.aspx/GetJson",
//contentType: "application/json; charset=utf-8",
//data: '{name:""}',
dataType: "json",
cache: false,
success: function(msg) {
callback(msg);
},
error: function(err) {
alert('error');
}
});
}
data2 = GetJsonData();
$(function() {
$("#MainTree,#SubTree").jstree({
"json_data": {
"data": data2,
},
"plugins": ["themes", "json_data", "ui", "dnd"]
});
});
When I hide "data", ofcourse it won't create node. But now I want to call method GetJson from default.aspx.cs to get json_data from datasource. It always show "..Loading".. I'm using jsTree and just .net framework 2.0..Please help me to find out the solution for this..Thanks

Use Default.aspx/GetJson instead of Default.aspx.cs/GetJson.

In addition to changing the filename(as #Alex Filipovici mentioned), your method needs to be static.
[WebMethod]
public static string GetJson()
{
}
EDIT:::
This is what I did and got results back:
$(document).ready(function () {
$("[id$=_btnPostReminder]").click(function () {
var a = "";
var remindertext = "";
var re = "";
var res = "";
$.ajax({
type: "POST",
url: "Default.aspx/GetJson",
contentType: "application/json; charset=utf-8",
dataType: "json",
success:
function Ret(response) {
var Result = response.d
alert(Result)
return false;
},
error: function (data, status, jqXHR) {
alert(jqXHR);
}
});
return false;
});
});