Sometimes I like to use the HTML5/Javascript implementations of the Kendo framework because you can do some things a little easier. In this case I need to know the number of results so I can either display a kendo grid or not, however other times I need to modify the datasource based on user input on the client side. Unfortunately you can't get the number of results or modify the datasource (as far as I know) using the MVC wrappers. How can I call the controller using the Javascript implementation of the Kendo datasource?
I was able to get this working using the following code:
Controller:
public ActionResult GetStuff(string parameter)
{
// Get your data here ...
var data = GetData(parameter);
return Json(data, JsonRequestBehavior.AllowGet);
} // end
Markup/cshtml:
<div id='myGrid'></div>
<script>
$(document).ready(function () {
// Define the dataSource, note that the schema elements are specified
var dataSource = new kendo.data.DataSource({
dataType: "json",
type: "GET",
transport: {
read: '#Url.Action("MethodName", "ControllerName", new {parameter = myParameter} )'
},
schema: {
data: "Stuff",
total: "TotalNumberofStuff",
errors: "ErrorMessage"
}
});
}
// Call fetch on the dataSource - this gets the data - the fetch method will make only one call.
// Please note that the datasource fetch call is async, so we must use it's results within the fetch function.
dataSource.fetch(function () {
var numberOfItems = dataSource.total();
if (numberOfItems == 0) {
// If 0 items are returned show the label that says there are no items
$("#myGrid").append("<p><label style='font-size: small; color: red;'>-- No Items --</label></p>");
}
else {
$("#myGrid").kendoGrid({
dataSource: dataSource,
height: function () {
return (numberOfItems >= 1 && numberOfItems <= 5) ? null : "225";
},
columns: [
{ field: "StuffId", title: "Id", width: 150 },
{ field: "Stuff", title: "Stuff", width: 150 }
]
});
}
});
</script>
Related
Js Grid External Pager is not working.
I have tried working with Aspo.net Mvc, Back end is sql server
This is my Pager configuration
pageLoading: true,
paging: true,
pageSize: 15,
pageButtonCount: 5,
pagerContainer: "#externalPager",
//pagerFormat: "current page: {pageIndex} {first} {prev} {pages} {next} {last} total pages: {pageCount}",
pagePrevText: "<",
pageNextText: ">",
pageFirstText: "<<",
pageLastText: ">>",
pageNavigatorNextText: "…",
pageNavigatorPrevText: "…",
My controller returns
controller: {
loadData: function (filter) {
var d = $j.Deferred();
$j.ajax({
type: "POST",
url: '#Url.Action("LoadData", "User")',
data:filter,
dataType: "json",
success: function (response) {
var da = {
data: response.response,
itemsCount: response.response.length
}
d.resolve(da);
}
})
//.done(function (response) {
//console.log("response", response.response.length)
//var da = {
// data: response.response,
// itemsCount: response.response.length
//}
//console.log("da", da)
//d.resolve(da);
//});
return d.promise();
}
My Dom
<div id="grid"></div>
<div id="externalPager" class="external-pager"></div>
My Css
<style>
.external-pager {
margin: 10px 0;
}
.external-pager .jsgrid-pager-current-page {
background: #c4e2ff;
color: #fff;
}
</style>
The pager does not load. I am using the external pager. I have used exactly as same as the sample given. But the pager does not seem to load. Am I missing out on something. Any help is appreciated
Are you trying to lead at least one "full" page? If there isn't more than one page, you won't get a page. Also, if you don't return the total quantity of results, it also won't know to add a pager.
You have to return the data in the following format for the pager to work correctly with the data loading correctly.
{
data: [{your list here}],
itemsCount: {int}
}
It's barely in the documentation, as it's inline and not very obvious. (Bolding mine.)
loadData is a function returning an array of data or jQuery promise that will be resolved with an array of data (when pageLoading is true instead of object the structure { data: [items], itemsCount: [total items count] } should be returned). Accepts filter parameter including current filter options and paging parameters when
http://js-grid.com/docs/#controller
add new div with ID in my case I had used nbrdeclar it's will work
success: function (response) {
$("#nbrdeclar").text("Nombre de déclarations :"+response.length);
}
I have some search filters for a query in my application. From the filters I want to render the json results into a kendo grid. For that reason I don't use the default DataSource.Read() of the grid but an Ajax request and I bind the results to the grid like that:
Kendo grid:
#(Html.Kendo().Grid<List<SearchSpecialtiesResult>>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Hidden();
columns.Bound(c => c.Code).Width(100);
// Some other columns
})
//Some events and filtering options
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
// other model values
})
)
)
Set the dataSource on Ajax success
var datasource = new kendo.data.DataSource({ data: resultData });
$("#grid").data("kendoGrid").setDataSource(datasource);
The binding happens correctly however to other places that I use the DataSource.Read() the grid shows a loading effect that I can't find how to reproduce to my page and I use to this place some other loading effect we use on Ajax requests. Is there any way to reproduce it in my case?
I had such cases in my application too. The way I handled them was also by kendo.ui.progress($("#gridDame"), true). For the sake of the completion of the answer I will post the way I handled them and the way I am handling them now with the DataSource.Read() of the grid by passing the filter input values as additional data to my Read request.
First way:
I had a general Ajax call for all my gridRequests
function getGridData(uri, payload, gridName) {
return $.ajax({
url: uri,
type: "POST",
contentType: "application/json",
data: payload,
beforeSend: function () {
window.kendo.ui.progress($("#"+ gridName), true);
}
}).done(function (result) {
return result;
}).always(function () {
window.kendo.ui.progress($("#" + gridName), false);
});
}
I called it on my button click with the parameters of my search form
$("#searchFormBtn").bind("click", function (e) {
e.preventDefault();
// ... Get the filter input values and strignify them as json ...
return getGridData(url, filterInputValuesStrignifiedAsJson, "grid")
.done(function (result) {
if (result.success) {
var datasource = new kendo.data.DataSource({ data: result.data });
$("#grid").data("kendoGrid").setDataSource(datasource);
} else {
//Handle error
}
});
});
Second way:
I set my Datasource.Read() like this:
.Read(read => read.Action("ActionName", "ControllerName").Data("getFilterInputValues"))
and always Autobind(false) in order not to read on first load
In the function getFilterInputValues I get my search form values like that:
function searchModelData() {
return {
DateFrom: $("#DateFrom").data("kendoDatePicker").value(),
DateTo: $("#DateTo").data("kendoDatePicker").value(),
Forever: document.getElementById("datesForever").checked === true ? true : false,
SearchCommunicationType: { Id: $("#SearchCommunicationType_Id").val() },
SearchBranch: { Id: $("#SearchBranch_Id").val() },
CompletedById: { Id: $("#CompletedById_Id").val() },
SearchOperationType: { Id: $("#SearchOperationType_Id").val() },
AcademicPeriodSearch: { Id: $("#AcademicPeriodSearch_Id").val() },
AcademicYearSearch: $("#AcademicYearSearch").val(),
Name: $("#Name").val(),
ContactValue: $("#ContactValue").val(),
AddressValue: $("#AddressValue").val()
};
}
Finally I trigger the DataSource.Read() of my grid on the button click
$("#searchFormBtn").bind("click", function () {
var grid = $('#grid').data("kendoGrid");
if (grid.dataSource.page() !== 1) {
grid.dataSource.page(1);
}
grid.dataSource.read();
});
With Datasource.Read() obviously works correctly and the spinning effect you mention in your question.
You're looking for kendo.ui.progress. Click here for Telerik's documentation.
Before running the ajax call add the following to show the loading effect:
kendo.ui.progress($("#gridName"), true);
After success or failure add the following to remove the loading effect:
kendo.ui.progress($("#gridName"), false);
You can do it manualy
<div id="UrGrid"></div>
<div class="chart-loading"></div>
in event:
var loading = $(".chart-loading", e.sender.element.parent());
kendo.ui.progress(loading, true);
...work with data...
kendo.ui.progress(loading, false);
The Problem
So i am currently trying to implement a color picker inside of a Kendo grid, that will hopefully send the chosen color to my Sql Table. Unfortunately, It doesn't seem as though the Update controller is being reached. I am relatively new to Kendo UI, so there might be some incredibly dumb errors shown.
Questions
I guess my main question would be: How can i call the update method when update is clicked on the grid. Essentially, the color picker and the edit command are showing up in beautiful fashion. I just want to know how i can be sure that the method is being called when 'Update' is clicked, seeing as it is not reaching my controller. Feel free to ask if you need to see more code or perhaps a screen shot.
Code
Config.cshtml ( Grid )
#model IEnumerable<STZN.Models.AGCData.ErrorCode>
#{
ViewBag.Title = "Config";
}
#section HeadContent{
<script src="~/Scripts/common.js"></script>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
editable: "inline",
selectable: "row",
dataSource: {
schema: {
model: {
id: "error_code",
fields: {
color: { type: 'string' }
}
}
},
transport: {
read: {
type: "POST",
dataType: "json",
url: "#Url.Action("ErrorCodes")"
},
update: {
type: "POST" ,
dataType: "json",
url: "#Url.Action("UpdateErrorCodes")",
}
}
},
columns: [
{ command : [ "edit" ] },
{
field: "error_code", title: "Error Code",
},
{
field: "error_description", title: "Error Description"
},
{
field: "color",
width: 150,
title: "Color",
template: function (dataItem) {
return "<div style = 'background-color: " + dataItem.color + ";' </div>"
},
editor: function (container, options) {
var input = $("<input/>");
input.attr("color",options.field);
input.appendTo(container);
input.kendoColorPicker({
value: options.model.color,
buttons: false
})
},
}
]
});
});
</script>
}
Update Controller
public JsonResult UpdateErrorCodes(ErrorCode model)
{
using (var db = new AgcDBEntities())
{
db.Entry(model).State = System.Data.Entity.EntityState.Modified;
db.SaveChanges();
db.Configuration.ProxyCreationEnabled = false;
var data = db.ErrorCodes.Where(d => d.error_code == model.error_code).Select(x => new
{
error_code = x.error_code,
description = x.error_description,
color = x.color,
});
return new JsonResult()
{
JsonRequestBehavior = System.Web.Mvc.JsonRequestBehavior.AllowGet,
};
}
}
I actually managed to fix my issue by adding an additional input attribute to my editor function in the "color" field. It looks like this:
input.attr("data-bind","value:" + options.field);
There are still some present issues (unrelated to the fix/server update) , but as far as updating to the server, It work's as intended.
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
maximumSelectionSize: 1,
placeholder: "Click here and start typing to search.",
data: function(query) {
queryData{!randomJsIden}(query);
},
matcher: function (term, text) {if (text.toUpperCase().indexOf(term.toUpperCase()) == 0){return true;}return false;}
});
function queryData{!randomJsIden}(query){
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.AutoCompleteV2_Con.getData}','{!sObjVal}','{!labelFieldVar}','{!valueFieldVar}',query.term,
function(result, event){
//if success
if(event.status){
var data = {results:[{ id: 1, text: "Ford" },
{ id: 2, text: "Dodge" },
{ id: 3, text: "Mercedes" },
{ id: 4, text: "Jaguar" }]}
query.callback( data);
}
},
{escape: true}
);
}
</script>
How to initialize query call back data to data attribute in select2 .
I cannot use data directly .In above example i am using sample data .
query : function(query){
queryData{!randomJsIden}(query);
}
I want to replace this by data attribute like this : the below one is not working
data : function(query){
queryData{!randomJsIden}(query);
}
here is the fiddle :
http://jsfiddle.net/Lnf8j/303/
Let me know any ideas from you
There are couple of issues in your code
you cannot name a function using flower braces as it is reserved notation symbol in javascript function queryData{!randomJsIden}(query), instead name it as function queryData(query){ ... }
if your adding a callback for data of your select2 then you need to return that data constructed from queryData() function.
data: function(query) {
return queryData(query);
},
function queryData(query){
...
return data;
}
If i'am not wrong,data is sourced to select2 via asynchronous call inside queryData(), which means the data is returned at unpredictable time,so you need to restrict the user from accessing the select2 component until data is feeded to it.
which means you either need to prefetch the data or disable the select2 field until data is returned from remote call.
Working Demo # JSFiddle
I have a property grid :
periods.each(function(record){
var tempPropGrid = me.getView().add(
{
xtype:'propertygrid',
width: 80,
header: false,
title: 'prop grid',
//for some reason the headers are not hiding, we may need to deal with this using CSS
//hideHeaders: true,
enableColumnResize: false,
sortableColumns: false,
nameColumnWidth: 1,
source: record.data,
sourceConfig: {
periodScrumMaster: {
editor: Ext.create('Ext.form.ComboBox', {
tdCls: 'red',
store: team,
queryMode: 'local',
displayField: 'personName',
valueField: 'personName',
listeners: {
'expand' : function(combo) {
var gridvalues = this.up('propertygrid').getSource();
combo.getStore().clearFilter(true);
combo.getStore().addFilter({property: 'teamName', value: teamName});
combo.getStore().addFilter({property: 'periodName', value: gridvalues.periodName});
var totalFTE = team.count();
console.log(totalFTE);
var teamStore = Ext.getStore('personPeriods');
console.log('store');
console.log(teamStore);
},
}}),
displayName: 'Scrum Master'
},
},
That has a render listener:
beforerender: function(){
debugger;
var gridValues = this.getSource();
// console.log(record);
//debugger;
// filter periods for this period only
periods.filterBy(function(record,id){
if(record.get("periodName") === gridValues.periodName){
return true;
}});
// filter teamMembers for this period and team
var view = this.up();
var vm = view.getViewModel();
var store = vm.getStore('teamMembers');
store.filterBy(function(record,id){
if(record.get("periodName") === gridValues.periodName) {
return true;
}});
//store.clearFilter(true);
store.addFilter({property: 'teamName', value: teamName});
// get FTEs assigned to this team in this period by counting records
var resourcedFtes = store.count();
// Here I check the record in the periods store to make sure the data matches up with how many resourcedFte there is an update it if required
// This is super bad and will need to refactor
periods.each(function(record,idx){
var value = record.get('resourcedFte');
if(value != resourcedFtes){
record.set('resourcedFte',resourcedFtes);
record.commit();
vm.data.parentController.saveParent();
}});
// Need to call save parent so that the record is updated when we update it above
//Clear everything so that we can start fresh next period
store.clearFilter(true);
//periods.clearFilter(true);
Basically there is some logic to check if the data is correct/up to date and if its not it updates it. This works fine, but the data is not then loaded into the grid. I have to refresh after rendering the grid for it to load correctly.
Is there a way I can call a refresh or reload method on the property grid to load the data again inside an if statement?
If I understand your question, I would suggest you to programm the store proxy so that it returns the whole changed record.
Is your store parametered with autoLoad enabled?
(sorry I can't (yet) comment)