How to get a json response from a jqgrid custom button. Here is my code
$("#jqGrid").navButtonAdd('#jqGridPager', {
id: "btnCustom",
caption: "",
title: "Test Title",
buttonicon: 'fa fa-file-excel-o',
onClickButton: function () {
window.location.href = "/Controller/Action";
//need to get a responce
},
position: "last"
});
You will need to replace the
...
window.location.href = "/Controller/Action";
...
with ajax like
$.ajax({
url : "/Controller/Action",
dataType : "json",
success : function(response, status, jqXHR) {
// response is your json data
}
});
Related
I have the following search box for getting data from backend:
<select class="form-control kt-select2" id="megaagent_rainmaker_select" name="param" multiple="multiple" style="width: 100%"></select>
This is my select2 javascript code:
var rainmakerSelect = function () {
// Private functions
var demos = function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
// multi select
$('#megaagent_rainmaker_select').select2({
language: "es",
placeholder: "Escriba y seleccione",
allowClear: true,
maximumSelectionLength: 1,
ajax: {
url: '/admin/megaagent/getrainmaker',
type: "get",
dataType: 'json',
delay: 150,
data: function (params) {
return {
_token: CSRF_TOKEN,
search: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
}
return {
init: function () {
demos();
}
};
}();
jQuery(document).ready(function () {
rainmakerSelect.init();
});
I get results returned and I can select one without problem.
After I select a value, I send update request to backend, this is my payload:
{
"_token": "bPl0hZJQxw5wAxNCqVOOKqrXXwkD5AZZOFPumrpC",
"mc_id": "11",
"megaagent_id": "16",
"megaagent_name": "David Cortada",
"megaagent_business_name": "bsame cambio",
"megaagent_uma_id": "umaid",
"megaagent_api_key": "apikey",
"param": "963",
"megaagent_phone_number": "phone",
"megaagent_email": "email",
"megaagent_address": "address",
"megaagent_facebook": "fb",
"megaagent_instagram": "inst",
"megaagent_twitter": "twi",
"megaagent_linkedin": "link",
"megaagent_image": "image",
"megaagent_status": "Activo"
}
What I want to achieve is to change param name to other on post request (example: "megaagent_rainmaker_id" = "963",.
I changed it in <select name="param"> but that breaks the search, no results are returned when I type in search box.
Does anyone knows the solution for this?
Regards
I want to implement individual form for ajax call. I want to have a command, which opens new popup window with one field, user fills this field and then clicks "Send" and then I do an ajax call to controller. My code:
$(document).ready(function () {
var grid = $("#memberList-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("MemberSearchList", "RandomPoolSelection"))",
type: "POST",
dataType: "json",
data: function () {
var data = {
SearchMember: $('##Html.IdFor(model => model.SearchMember)').val(),
SelectionId: $('#SelectionId').val()
};
addAntiForgeryToken(data);
return data;
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function (e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: #(Model.PageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [#(Model.AvailablePageSizes)],
#await Html.PartialAsync("_GridPagerMessages")
},
scrollable: false,
columns: [
{
field: "PrimaryID",
title: "#T("PoolMemberList.Fields.PrimaryID")",
width: 150
},
{
field: "FirstName",
title: "#T("PoolMemberList.Fields.FirstName")",
width: 150
},
{
command:
{
text: "Exclude",
click: showExclude
},
title: " ",
width: 100
}
]
});
wndExclude = $("#exclude")
.kendoWindow({
title: "Excuse Reason",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
excludeTemplate = kendo.template($("#excludeTemplate").html());
});
function showExclude(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wndExclude.content(excludeTemplate(dataItem));
wndExclude.center().open();
}
and template :
<script type="text/x-kendo-template" id="excludeTemplate">
<div id="exclude-container">
<input type="text" class="k-input k-textbox" id="note">
<br />
</div>
</script>
how to implement sending this data (with ID) to controller?
A simple way to do what you want is using a partial view.
this is your command grid
{
command:
{
text: "Exclude",
click: showExclude
},
title: " ",
width: 100
}
and here your function :
function showExclude(e) {
$(document.body).append('<div id="excludeWindow" class="k-rtl"></div>');
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$('#excludeWindow').kendoWindow({
width: "80%",
title: 'excludeForm',
modal: true,
resizable: false,
content: "/YourController/GetPartial?id=" + dataItem.Id,
actions: [
"Close"
],
refresh: function () {
$("#excludeWindow").data('kendoWindow').center();
},
close: function() {
setTimeout(function () {
$('#excludeWindow').kendoWindow('destroy');
}, 200);
}
}).data('kendoWindow');
}
After clicking on the button, you load your window(popup) and call an action that loads a partial view to fill the content of the window.
You can pass whatever you want to your partial view (for example, here I just send Id)
public ActionResult GetPartial(Guid id)
{
var viewModel= new ViewModelExclude
{
Id = id,
};
return PartialView("_exclude", viewModel);
}
and the partial view is something like this:
#model ViewModelExclude
#using (Html.BeginForm("", "Your action", FormMethod.Post, new { id = "SendForm"}))
{
<input class="k-rtl" name="#nameof(Model.Id)" value="#Model.Id">
<button type="submit" class="btn btn-primary">Send</button>
}
and then call Your ajax after clicking on send button:
$("#SendForm").submit(function (e) {
e.preventDefault();
var form = $(this);
var formData = new FormData(this);
$.ajax({
type: "POST",
url: '#Url.Action("send", "yourController"),
data: formData,
contentType: false,
processData: false,
success: function (data) {
},
error: function (data) {
}
});
});
Your send action something like this:
[HttpPost]
public ActionResult Send(ViewModelExclude view)
{
....
return Json();
}
This is my datatable:
var table = $('.table').DataTable({
"serverSide": true,
"ajax": '{{ path('json') }}',
});
On an ajax request success, I would like to start at another page:
$.ajax({
method:'POST',
data: {
"id": id,
},
url:'{{ path('json') }}',
success : function (data) {
table.displayStart( 20 ).draw();
}
});
But it is not working.
You can use the page() function.
table.page(20).draw('page');
I tried to response the json from server like the official demo.
But the dropdown suggesion doesn't show up.
Could anyone tell me what I missed?
I only change the url from the demo code:
{
label: 'Ship Name2',
name: 'ShipName2',
width: 150,
editable: true,
edittype: "text",
editoptions: {
dataInit: function (element) {
$(element).attr("autocomplete","off").typeahead({
appendTo : "body",
source: function(query, proxy) {
$.ajax({
url: 'mysite',
dataType: "jsonp",
data: {term: query},
success : proxy
});
}
});
}
}
}, {
label: 'Ship Name',
name: 'ShipName',
width: 150,
editable: true,
edittype: "text",
editoptions: {
dataInit: function (element) {
$(element).attr("autocomplete","off").typeahead({
appendTo : "body",
source: function(query, proxy) {
$.ajax({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletepbs.php?callback=?&acelem=ShipName',
dataType: "jsonp",
data: {term: query},
success : proxy
});
}
});
}
}
}
P.S. My servlet return the same json which is exact the same as demo's.
Thanks!!
Edit 1: Is it possible that if I want to use typeahead in this demo, the response should not just be a json?
If I execute the url in the demo, I would get the following javascript instead of json:
<script type='text/javascript'>
jQuery(document).ready(function() {
if(jQuery.ui) {
if(jQuery.ui.autocomplete){
jQuery('ShipName').autocomplete({
"appendTo":"body",
"disabled":false,
"delay":300,
"minLength":1,
"source":function (request, response){
request.acelem = 'ShipName';
request.oper = 'autocmpl';
$.ajax({
url: "autocompletep.php",
dataType: "json",
data: request,
type: "GET",
error: function(res, status) {
alert(res.status+" : "+res.statusText+". Status: "+status);
},
success: function( data ) {
response( data );
}
});
}});
jQuery('ShipName').autocomplete('widget').css('font-size','11px');
jQuery('ShipName').autocomplete('widget').css('z-index','1000');
}
}
});
</script>
Could anyone tell me why?
The demo uses JSONP to obtain the data. If you are in local site you will need to remove calcback=? parameter.
The very basic testis is not to use ajax in typeahead, but array as data source. This way you will be sure that this work correct
I am facing an issue , below code bind the tree for first time , but not working binding the tree on second time :( but when i request third its bind again.
Means even request work .
please help me
Thanks in advance
Mobeen
// My Example Data
{"d":[{"_type":"ManageUPPRM.UserDocumentDTO","DocumentID":1804105651,"DocumentName":"Google Talk","hasChildren":true},{"_type":"ManageUPPRM.UserDocumentDTO","DocumentID":15854591701,"DocumentName":"desktop.ini","hasChildren":false},{"__type":"ManageUPPRM.UserDocumentDTO","DocumentID":15861429553,"DocumentName":"Jellyfish.jpg","hasChildren":false}]}
//Code
var datasource = new kendo.data.HierarchicalDataSource({
transport: {
read: function (options) {
var id = options.data.DocumentID;
if (typeof id == "undefined") {
id = "0"
}
$.ajax({
type: "POST",
url: "../ManageUPWebService.asmx/GetAllDocuments",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{DocumentID:'" + id + "'}",
success: function (result) {
// notify the data source that the request succeeded
options.success(result.d);
},
error: function (result) {
// notify the data source that the request failed
options.error(result.d);
}
});
}
},
schema: {
model: {
id: "DocumentID",
text: "DocumentName",
hasChildren: "hasChildren"
}
}
});
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
template: "<input type='checkbox' name='#=item.id#' data-text='#=item.DocumentName#' value='true' />"
},
loadOnDemand: true,
dataSource: datasource,
dataTextField: "DocumentName"
});
try this,
add a div with some id as the parent div of treeview
<div id="parent"><div id="treeview"></div></div>
and before binding the kendo tree
$("#treeview").remove();
$("<div id=\"treeview\" />").appendTo("#parent").kendoTreeView({
checkboxes: {
checkChildren: true,
template: "<input type='checkbox' name='#=item.id#' data-text='#=item.DocumentName#' value='true' />"
},
loadOnDemand: true,
dataSource: datasource,
dataTextField: "DocumentName"
});