I am replacing a jQuery DataTable that performs client side processing. I would like to add a Details column, such as the following:
When one of the Details buttons is clicked, the Details View for that particular record is opened.
The following is the code that used to accomplish this:
<td class="action-button-column">#Html.RenderLinkAsButton(ButtonTypes.View, Url.Action("Details", "Controller", new {id = model.Id, area = "Area"}), Enums.ButtonSize.Small)</td>
Can I use/add RenderLinkAsButton in a DataTable column?
I know that I can use the following code to create a button that will perform the same thing:
columns: [
{
data: "Id",
title: "Details",
render: function (data) {
var myUrl = '#Url.Action("Details", "Controller")?Id=' + data;
return '';
}
}
]
However, I would like to include the icon, in this case an opened folder, to be consistent with other Index Views that use client side processing DataTables.
I just had to add the following with a leading space: fa-folder-open
columns: [
{
data: "Id",
title: "Details",
render: function (data) {
var myUrl = '#Url.Action("Details", "Controller")?Id=' + data;
return '';
}
}
]
Related
I am passing in a JSON array to my JTable and am trying to use AJAX to show the data with no page load. This is an asp.net core mvc app with a C# back-end. The data loads, but as i said i do not have the ability to sort and all results are shown instead of only 10 per page as I request in the sorting param.
What do I ned to change here?
[Route("api/ca")]
public JsonResult Index()
{
var ListData = _context.CIModel.FromSql("StoredProcedureName").ToList();
return Json(new { Result = "OK", Records = ListData, TotalRecordCount = ListData.Count });
}
$('#btnTest').click(function () {
$('#jTableTest').jtable({
paging: true,
pageSize: '10',
sorting: true,
defaultSorting: 'Name ASC',
actions: {
listAction: function (postData, jtParams) {
return $.Deferred(function ($dfd) {
$.ajax({
url: 'https://localhost:44328/api/ca?jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
type: 'GET',
dataType: 'json',
success: function (data) {
$dfd.resolve({ Records: data.records, Result: data.result, TotalRecordCount: data.TotalRecordCount });
},
error: function () {
$dfd.reject();
}
});
});
}
},
fields: {
name: {
title: 'Name',
width: '35%'
},
phone: {
title: 'Phone',
width: '15%'
},
yrsexp: {
title: 'Experience',
width: '15%'
}
}
});
$('#jTableTest').jtable('load');
});
Sorting and paging are both SERVER side operations. You need slight changes on both client and server.
On the client, in this example you don't need to write your own deferred function, Just give jTable the URL. It will then pass, paging (jtStartIndex and jtPageSize) and sorting (jtSorting) parameters to the server. These parameters are in the jtParams argument passed to the deferred function, so you have to forward them in you ajax call.
One the server, you need to respond to these sorting and paging parameters. Do note, that on a paged reply, TotalRecordCount is the total number of unpaged records. not the number returned. It is used by jTable to show the total number of pages.
I am currently trying to change asp.net GridView Control to jQuery DataTable with Ajax. In my project, the home page has a justified image grid as shown below:
Each picture works as a link, when the user clicks on a specific image it will redirect the user to another page based on a product Id.
The jQuery DataTable code works for a regular table that has rows & columns. But I want to create my own table inside that jQuery DataTable in order to get the same image grid + links mentioned above.
My code is like this:
1- In Code behind (Default.aspx.cs) I use a simple web method to retrieve data from Database.
[WebMethod]
public static SalesOrderDetail[] BindDatatable()
{
DataTable dt = new DataTable();
List<PDetail > details = new List<PDetail>();
using (SqlConnection con = new SqlConnection(#"server=Server\SQLEXPRESS;integrated security=true;database=MyDb"))
{
using (SqlCommand cmd = new SqlCommand("SELECT Id, PName,ImgUrl FROM Products ORDER BY Id", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dtrow in dt.Rows)
{
PDetail p = new PDetail();
p.Id = Convert.ToInt16(dtrow["Id"].ToString());
p.PName= dtrow["PName"].ToString();
p.ImgUrl = Convert.ToInt16(dtrow["ImgUrl"].ToString());
details.Add(p);
}
}
}
return details.ToArray();
}
2- In (Default.aspx) page , there is one table:
<table class="table table-striped table-bordered table-hover" id="TableId"
cellspacing="0" align="center" width="100%">
</table>
3- The jQuery DataTable code looks like this:
$(document).ready(function ()
{
$('#TableId').DataTable(
{
"language":
{
"processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
},
"processing": true,
"serverSide": true,
"ajax":{
url: "Default.aspx/GetData",
contentType: "application/json",
type: "GET",
dataType: "JSON",
data: function (d) {
return d;
},
dataSrc: function (json) {
json.draw = json.d.draw;
json.recordsTotal = json.d.recordsTotal;
json.recordsFiltered = json.d.recordsFiltered;
json.data = json.d.data;
var return_data = json;
return return_data.data;
}
}, success: function (data) {
for (var i = 0; i < data.d.length; i++) {
$("#TableId").append("<tr><td><img src="+data.d[i].ImgUrl+"></td></tr>");
}
}
});
});
By the way, the above code is server side processing (paging).
Can anyone tell me or guide me some instructions?
Thanks
I don't recommend you to use the jQuery DataTable for your requirement. Usually this is used instead of HTML tables due to their user-friendliness in handling data. However this implementation should work fine for you. I will give you a couple of links that might suit you for an image grid too at the bottom.
$('#TableId').DataTable({
"processing": true, // show progress bar while loading
"serverSide": true, // process is done on server side
"pageLength": 12, // page size
"ajax": {
"url": "", // your url here
"type": "POST", // since you need to pass data for the request
"datatype": "json",
"data": function (d) {
d.parameter1 = "some value";
d.parameter2 = "another value";
}
},
"columns": [
{
"data": "ImageName",
"name": "Image_Name",
"className": "className",
"defaultContent": "Image Not Found"
},
{
"data": null,
"className": "class1 class2",
"orderable": false,
"render": function (data, type, row) {
var someUrl = "example.com/api/" + data.someVal;
return '< a href="'+ someUrl +'" id="'+ data.Id +'"><img src="'+ data.imageUrl + '" ></a>;
}
},
]
});
Justified,js
Masonry
I personally haven't used these but worth giving a try :)
I want to do Something like
$.ajax({
url: '/Home/AjaxTest',
data: {
id: #Model.Prop
},
type: 'post',
cache: false,
success: function (response) {
console.log(response);
}
...
However, It didn't work. I know that if I have a hidden field for it, like
#Html.HiddenFor(model => model.Id)
then I can get the property value by
data: { id: $('input[name="Id"]').val() },
Still I wonder. Are there any way else to access the Model property more directly?
data: { id: "#Model.Prop" } // may or may not need quotes depending on data type.
If you do this, it will be the value of the Model.Prop field at the time of rendering the page so any modifications to inputs using that property will not be reflected.
If you want the actual data from an input control that has been rendered using EditorFor, etc:
data: { #(Model.Prop.GetType().Name): $('input[name="#(ViewData.TemplateInfo.HtmlFieldPrefix + "." + Model.Prop.GetType().Name)"]').val() }
This will render the javascript using the property name as the json index and the same name but including the model (and any containing models) prefix as the name of the element to find the value of.
Yes you can do if you follow the Model pattern of java script.
This is your java script file.
var JSModel = (function(){
var model = {};
var init = function(){
//Perfome your operations
};
return {
init:init,
model :model //return beacuse we want to acccess it in cshtml
};
})();
$(document).ready(function() {
JSModel .init();
});
Now in cshtml, you will do this:
//Invlude your JS file here and then
<script>
JSModel.model = #Html.Raw(Json.Encode(Model)); // You will get the model in your js file. it will in JSON form
</script>
I have been trying to pull in information from my web API into my application.
Currently i am just trying to pull in data not submit it yet. The API is working and running as a service on my system.
It is returning data in json format an example of the data returned by the WEB API.
[
{
"$id": "1",
"id": "6c32e378-0f06-45da-9dda-0515c813cd5d",
"application_name": "FDB INTERFACE",
"description": "Interface for FDB decision support",
"active": true,
"tbl_update_header": []
},
{
"$id": "2",
"id": "58f68624-3803-43ff-b866-0a507ea85459",
"application_name": "HPM",
"description": "Helix Health Practice Manager",
"active": true,
"tbl_update_header": []
},
This is my page just to try and get the some data to display
<html>
<head>
<title></title>
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "http://localhost:9981/API/Application",
processData: true,
data: {},
dataType: "json",
error: function (jqXHR, textStatus, errorThrown) {
// debug here
alert(jqXHR);
},
//error: function(error, data){
// console.log(error)
//},
success: function (data) {
//Clear the div displaying the results
$("productView").empty();
//Create a table and append the table body
var $table = $('<table border="2">');
var $tbody = $table.append('<tbody />').children('tbody');
//data - return value from the web api method
for (var i = 0; i < data.lenght; i++) {
//adda new row to the table
var $trow = $tbody.append('<tr />').children('tr:last');
//add a new column to display name
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].id);
//add a new column to display description
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].description);
}
//display the table in the div
$table.appendTo('#productView');
}
});
</script>
</head>
<body>
<div id="productView"></div>
</body>
</html>
The page loaded but is empty and no error is returned from any section.
I run the web page from chrome/FF/IE none of them show error in dev mode and VS shows no errors. I am not sure if i am parsing the data wrong or calling to the wrong part of the json to display the data.
I must be doing something silly at this point but just cant get pass this part.
you can also set this property in your js file before ajax call
$.support.cors = true;
There is a typo in your success method...
success: function (data) {
//Clear the div displaying the results
$("productView").empty();
//Create a table and append the table body
var $table = $('<table border="2">');
var $tbody = $table.append('tbody /').children('tbody');
//data - return value from the web api method
for (var i = 0; i < data.length; i++){
//adda new row to the table
var $trow=$tbody.append('<tr />').children('tr:last');
//add a new column to display name
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].application_name);
//add a new column to display description
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].description);
//add a new column to display active
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].active);
}
//display the table in the div
$table.appendTo('#productView');
It should be data.length and not data.lenght.
Success. The issue was with CORS. also with the spelling mistake of data.length
The code works fine and the results are what i was wanting to get . Thank you all for your assist.
To fix the issue i had to enable CORS in iis server side to allow cross domain access.
Your code above has a success function, but not an error function.
Try setting an error function, and then see what happens :
data: {},
dataType: "json",
error: function(jqXHR, textStatus, errorThrown ) {
// debug here
alert(jqXHR);
},
success: function() ...
I'm using Kendo UI Autocomplete with an ASMX Service which returns a string array like this :
<ArrayOfString>
<string>One string</string>
...
</ArrayOfString>
All works fine except that the items list opens twice. One click close one list and the "second behind" is still open.
When the list's opening we can see the second list opens behind the first.
Any idea ?
JS Code:
<input id="autoCompleteTest" />
<script>
var dataSource = new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
data: {
startswith: function(){
return $("#autoCompleteTest").data("kendoAutoComplete").value();
}
},
url: "WebService.asmx/GetStrings",
type: "POST",
}
},
schema: {
// specify the the schema is XML
type: "xml",
// the XML element which represents a single data record
data: "/ArrayOfString/string",
// define the model - the object which will represent a single data record
model: {
// configure the fields of the object
fields: {
// the "title" field is mapped to the text of the "title" XML element
value: "text()"
}
}
}
});
$("#autoCompleteTest").kendoAutoComplete({
minLength: 3,
dataValueField : "value",
dataTextField : "value",
dataSource: dataSource
});
</script>
C# Code:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public String[] GetStrings(string startswith)
{
using (var dataContext = new DataClassesDataContext())
{
var query = from x in dataContext.product where x.shortName.StartsWith(startswith) select x.shortName;
return query.ToArray();
}
}
I've run into a similar issue and posted here
Please confirm that your autocomplete control is not located inside of another control that forces the Kendo control to render a second time.
do you client code when dom is ready for kendo multiselect:
$(document).ready(function () {
..yourcode.});
see: http://docs.telerik.com/kendo-ui/controls/editors/multiselect/overview#accessing-an-existing-multiselect