I populate a kendo grid from my model which works fine. I want to be able to change the datasource of the grid via an ajax call which is different from the initial load and subsequent trips to filter. My ajax call is returning the model data in json, but the data in the grid does not change. How do I change the datasource and rebind the grid?
Initial population and filtering
#(Html.Kendo().Grid(Model.Catalogs)
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax().ServerOperation(false)
.Read(read => read.Action("Index", "Catalog"))
)
Ajax call where I want to repopulate the grid with json. result.Catalogs does contain the proper data:
$("#btnPartNumberSearch").on('click', function () {
$.ajax({
type: "POST",
url: "Catalog/PartNumberSearch",
data: JSON.stringify({
PartNumber: $("#Partnumber").val()
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result.isCatalogSearch) {
$('#inventoryItems').hide();
$('#catalogItems').show();
$("#grid").data(result.Catalogs);
}
else {
$('#inventoryItems').show();
$('#catalogItems').hide();
$("#grid").data(result.Inventory);
}
},
error: function(){
alert("error");
}
});
});
Your syntax is off:
var grid = $("#grid").data("kendoGrid");
grid.dataSource.data(result.Catalogs);
or you could create a new datasource (might impact column settings):
var dataSource = new kendo.data.DataSource(result.Catalogs);
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setdatasource
Related
Sure this must be something stupid I'm doing but I'm having a real issue populating a select element and setting the selected value using Knockout to consistently work. I have a ASP.NET view which has a number of select options and I need to set the selected values with data from the server.
Sometimes these bind correctly but more often than not the selectedValue is not selected - is it the order I'm doing things in?
When using ko.mapping to setting observable properties I can't get this to work at all so have been setting individual observables values but even this doesn't work all the time.
<select data-bind="options: possibleValues, optionsText: 'Value', optionsValue: 'Id',value: selectedValue, optionsCaption: 'Select Value...'">
function ViewModel() {
var self = this;
self.selectedValue = ko.observable();
self.possibleValues = ko.observableArray();
function GetValues() {
$.ajax({
url:"http:/abc.com/api/GetValues",
dataType: "json",
type: "GET",
data: {},
success: function(data) {
$.each(data.values, function(i,option){
self.possibleValues.push(option);
});
}
}
function GetInitialValue() {
$.ajax({
url:"http:/abc.com/api/GetValue",
dataType: "json",
type: "GET",
data: {},
success: function(data) {
*using ko.mapping doesn't work at all?*
self.selectedValue1(data1.Id)
self.selectedValue2(data2.Id)
self.selectedValue3(data3.Id)
}
});
}
}
ko.applyBindings(new ViewModel());
I have the following view model in a separate .JS file:
var vm = {
ControllerName:ko.observable(),
getData: function () {
$.ajax({
type: 'GET',
url: '/'+this.ControllerName+'/GetData',
contentType: "application/json; charset=utf-8",
dataType: "json",
data:jsonData,
success: function(data){
// code to bind the data
}
});
} }
$(function () {
ko.applyBindings(C1ViewModel);
C1ViewModel.getVisibleAndInvisibleColumns(); });
I have to set the ControllerName observable with the current asp.net mvc controller name and use this observable in the getData function so that the controller name is always dynamic. Since we cannot execute server side razor code in .JS files I would have to pass the current controller name from my markup file where I can get the current controller name by writing server side razor code.
My question is how can I pass a value from my html to my view model, set it in an observable and use it as a global value throughout my view model? Is there any other way to achieve what I am trying to do above?
You can use script tags in your markup to declare a JS variable that sets the controller name. You can then access this is your .JS file:
CSHTML
<script>
var urlForController = "#Url.RouteUrl("DefaultApi",
new { httproute = "",
controller = "ControllerNameHere",
action = "GetData" })";
</script>
You can add additional logic in this code if the controller name varies on some specific criteria.
AJAX Call in JS:
$.ajax({
type: 'GET',
url: urlForController,
contentType: "application/json; charset=utf-8",
dataType: "json",
data:jsonData,
success: function(data){
// code to bind the data
}
});
I have four different tabs in one page and data for each tab is rendered by an ajax call using partial page. Data for tab is loaded by ajax post.
ajax call:
$('#movieDatabase').click(function () {
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'html',
type: 'POST',
url: '/Admin/GetMovieDatabase',
data: {},
success: function (data) {
$('#view16').html(data);
},
failure: function (response) {
alert('error');
$('#view16').html(response);
}
});
});
This ajax call rendered the partial page. Now I want to do is paging the movie came from database.For this I use PagedList.Mvc. But problem occurred in navigating movie from one page to another. It is done by:
#Html.PagedListPager((IPagedList)Model.MovieInforamtions, page => Url.Action("GetMovieDatabase", new { page }))
But when I click on next page it gives page not found error as I have not written any action in HTTPGet. And If I made above call by HTTPGet, I couldnot render all page but only partial page. My action is..
[HttpPost]
public ActionResult GetMovieDatabase(int? page)
{
var AdminGetMovieDatabaseViewModel = new AdminGetMovieDatabaseViewModel();
var allMovie = _AdminService.getAllMovieInfo();
var pageNumber = page ?? 1;
// if no page was specified in the querystring, default to the first page (1)
var onePageOfMovie = allMovie.ToPagedList(pageNumber, 5);
// will only contain 5 products max because of the pageSize
AdminGetMovieDatabaseViewModel.MovieInforamtions = onePageOfMovie;
return PartialView("MovieDataBasePartialPage", AdminGetMovieDatabaseViewModel);
}
Now How can I render the next page like in ajax call which is done previously?
I put the code in javascript section inside the partial view and works for me.
<script language ="javascript" type="text/javascript">
$('#movieDatabase').click(function () {
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'html',
type: 'POST',
url: '/Admin/GetMovieDatabase',
data: {},
success: function (data) {
$('#view16').html(data);
},
failure: function (response) {
alert('error');
$('#view16').html(response);
}
});
});
</script>
I am using Jquery ui tabs with asp.net webforms and I'm loading the content with ajax. I actually have two problems
I don't know how to load the content for the first tab load. Right now I use the tabsselect to load content via ajax.
$('#contentHolder').bind( "tabsselect", function(event, ui) {
// run ajax request
});
The build in spinner control only seems to work when I use actual paths for the href. But since I have to use pagemethods I need to use an id instead.
One
Two
Three
// ajax request to pagemethod
$.ajax...
Updated Code
// tab initializaztion
var $tabs = $('#followersTable').tabs({ spinner: 'Loading...' });
$tabs.bind("tabsselect", function(event, ui) {
//LoadTabContent(ui.index);
var request = {
'controlName': 'FollowersTab'
};
$(this).tabs({
ajaxOptions: {
type: "POST",
url: "ajax/Followers.aspx/LoadTabContent",
data: $.toJSON(request),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$(container).html(data.d);
},
error: function () {
}
}
})
});
For your first question:
$("your-tabs-selector-here").tabs( "load" , 0 ); this will force your tab first tab to be loaded via ajax.
If I didn't get it wrong; you could use [WebMethod] for your page methods and you can combine your page methods with UI Tabs ajaxOptions. You can play with ajaxOptions for return type and/or method name ..etc
$( "your-tabs-selector-here" ).tabs({
ajaxOptions: {
type: "POST",
url: "Default.aspx/PageMethodName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}
});
I've got a remote source which does not return id and value or label. How can I use it as a source for jquery's autocomplete plugin?
You should pass source a function that makes the AJAX request manually, and then performs some post-processing on the returned data:
source: function(request, response) {
$.ajax({
url: url,
data: request,
dataType: "json",
success: function(data) {
var processedData = $.map(data, function(item) {
return {
value: item._your_property, // Property you want to use for "value"
label: item._another_property // Property you want to use for "label"
}
});
response(processedData);
},
error: function() {
response([]);
}
});
}
Basically, use $.map to turn the array you get back into an array of objects that the autocomplete widget supports.
For a working example, check out the JSONP example on jQueryUI's demo page.