I'm using a kendo ui grid, and I want to bind the columns headers to a json file, instead of specifying it directly in the controller.
I created a function that successfully retrieves the array from the json file, and populate the scope:
function returnColumns(){
$http.get('app/data/headers.json')
.then(function(res){
$scope.myHeaders = res.data;
});
}
returnColumns();
And in the grid's options I'm referring the columns to that variable in the scope:
$scope.options = {
dataSource: {
type: "json",
transport: {
read: "app/data/myData.json"
},
pageSize: 10,
schema : {
data: "mySchema"
}
},
sortable: true,
pageable: true,
resizable: true,
columns:$scope.myHeaders
....
....
But the binding doesn't kick in, the headers are not updated.
Thanks!
Assuming you're only loading the headers once and it's okay to hide the table until the headers load, throw an ng-if="myHeaders" onto the kendo-ui grid element, remove columns from $scope.options and use k-columns on the element instead.
So:
<div kendo-grid k-options="options"></div>
becomes:
<div kendo-grid k-options="options" k-columns="myHeaders" ng-if="myHeaders"></div>
Related
I have 2 applications that use the free version of jqgrid.
The one that works has a Json array as follows;
Notice the value of data is [...]
For the application where the data does not get rendered;
Notice the value of data is NOT [...]. So what do I need to do to the data to get it in the correct format so that it will render?
EDIT
I think the data issue I raised originally was mistaken.
I have a jsFiddle of what I want and it works, see
https://jsfiddle.net/arame/cxh7zh3a/
But my code in my .Net MVC application does not. The grid is displayed with headers, but the data rows are not rendered.
var populateGrid = function (data) {
var grid = $("#grid");
grid.jqGrid({
data: data,
colNames: ["Contract No", "Title", ""],
colModel: [
{ name: "FullContractNo", label: "FullContractNo", width: 80, align: "center" },
{ name: "ContractTitle", label: "ContractTitle", width: 400, searchoptions: { sopt: ["cn"] } },
{ name: "Link", label: "Link", search: false, align: "center" }
],
cmTemplate: { width: 100, autoResizable: true },
rowNum: 20,
pager: "#pager",
shrinkToFit: false,
rownumbers: true,
sortname: "FullContractNo",
viewrecords: true
});
grid.jqGrid("filterToolbar", {
beforeSearch: function () {
return false; // allow filtering
}
}).jqGrid("gridResize");
$("#divLoading").hide();
}
var getGrid = function () {
var url = GetHiddenField("sir-get-selected-contract-list");
var callback = populateGrid;
dataService.getList(url, callback);
}
getGrid();
The code is a little different to the JsFiddle as the data is extracted from a Web API.
The data is correct however, as I put a breakpoint in and check it.
See
I have found the answer! I feel daft posting this, but for some reason I cannot fathom I had an old version of the jqGrid library. I had version 4.7 and the current version is 4.14.
With the right version it is now working.
I have a navigation grid, populated using the JSON data received from the controller.This data is stored as a JSON in database in single column.
$('#list-grid').jqGrid({
url: '#Url.Action("MyAction", "MyController")',
mtype: 'GET',
postData: { parameter1: para1, parameter2:para2 },
datatype: 'json',
gridview: true,
caption: ' ',
height: '100%',
multiselect: true,
rowNum: 5000,
viewrecords: true,
//colmodel and colnames
});
Now, I have added navigation bar to the grid.
jQuery("#list-grid").jqGrid('navGrid', '#list-grid3-pager',
{ edit: true, add: true, del: true, refresh: true, search: false, view: false, refreshtitle: "Clear filters", edittitle: "Edit selected record", addtitle: "Add new record" },
{
//this code executes on 'Submit' button in the dialog
//here, the selected row should be edited and edit should be reflected in the grid---in client-side
//then the whole grid has to be serialized,
//one more parameters has to be added
//and finally posted to the controller
}//edit option
Using a separate AJAX call, with a separate 'Save' button, I could have done like following to send the grid data, although this grid would still not have newly edited/added data:
$("#btnSave").click(function () {
var gridData = jQuery("#list-grid").getRowData();
var postGridData = JSON.stringify(gridData);
jQuery.ajax({
type: "POST",
url: '#Url.Action("MyAction2", "MyController")',
data: JSON.stringify({ parameter1: para1, gridValues: postGridData }),
contentType: "application/json; charset=utf-8",
dataType: "json",
});
}
My Question:
How do I add/edit rows in navigation grid, and after each add/edit Submit click, stringify the whole grid, (the added record should be there, and if any row has been edited, the string should contain the changed value and not the old one) , add a parameter and then pass it to the controller (just as you see in the ajax call) ?
Below is the code where I try to load some records using JSon Reader in the store.
I am unable to see this on the Grid.
Can you please point me out what am I missing as I don't want to use proxy/url for JSon.
var itemsPerPage = 10;
Ext.Loader.setConfig({enabled: true});
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging'
]);
Ext.define('Assemble', {
extend: 'Ext.data.Model',
fields: [
{name: 'lot_no', type: "string"}
],
idProperty: 'lot_no'
});
Ext.onReady(function() {
Ext.QuickTips.init();
var jsonString = '{"result":[{"lot_no":"MT6261"},{"lot_no":"MT6262"},{"lot_no":"MT6263"}]}';
// create the data store
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
proxy:{
type: 'ajax',
reader: {
type: 'json',
root: 'result',
model: Assemble
}
}
});
store.loadData(Ext.decode(jsonString));
console.log(store);
var pagingToolbar = Ext.create('Ext.PagingToolbar',{
pageSize: itemsPerPage,
store: store,
displayInfo: true,
displayMsg: ' {0}-{1}，{2}',
emptyMsg: "empty."
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
disableSelection: true,
loadMask: true,
columns: [
{
text : 'LOT_NO',
flex : 1,
sortable : true,
dataIndex: 'lot_no'
}
],
bbar : pagingToolbar,
renderTo: 'grid',
viewConfig: {
stripeRows: true,
enableTextSelection: true
}
});
store.loadPage(1);
});
Proxy has to use with url. So, you can't use the proxy like that. I removed the proxy, put the model in store and you have to load objects into store, but in your case contained rootProperty('result', I only get the main objects or you can remove the 'result' from the jsonString). Then, it worked. Chck this fiddle:
https://fiddle.sencha.com/#fiddle/11or
var jsonString = '{"result":[{"lot_no":"MT6261"},{"lot_no":"MT6262"},{"lot_no":"MT6263"}]}';
// create the data store
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
model: 'Assemble'
});
store.loadData(Ext.decode(jsonString).result);
Why are you even using a reader? Your data is local so just decode the string and pass in what you want:
https://fiddle.sencha.com/#fiddle/11qc
Also, your data is local so no need for a paging toolbar. In Ext JS 5+ the grid will use the buffered renderer (if the grid has a defined size from height/width configs or from a parent layout) so loading all the data into the store will not affect performance (other than creating the records). The grid will only render what is viewable plus a few on either side.
We are finaly migrating from Telerik MVC Extensions to Kendo and I am having a problem trying to apply a static pre filter to a kendo grid.
I am trying to filter out the rows that contain the word "Archived" in the status column.
How do I do this using Kendo?
Below is the Telerik MVC extensions method that I am trying to convert
#(Html.Telerik().Grid<MyViewModel>()
.Columns(columns =>
{
columns.Bound(m => m.Id);
columns.Bound(m => m.Status);
...
})
.DataBinding(......)
.Filterable(filtering => filtering.Filters(filters =>
{
filters.Add(m => m.Status).IsNotEqualTo("Archived");
}))
)
Here is one way of doing it from the clientside after getting back the initial dataSource demo showing client side filtering
With this example which is the the javaScript version we leverage the DataBound event and when the grid is rebound to the dataSource we run this function:
function onDataBound(e){
var grid = $('#grid').data('kendoGrid');
if(initialFilter)
{
grid.dataSource.filter( { field: "ShipName",
operator: "contains",
value: "Han" });
initialFilter = false;
}
}
initialFilter is a global variable which is a bool that will allow us to control this function and run it once. Otherwise this will keep going in a loop.
then applying the filter to the dataSource we have three parts to it.
{{fieldName},{operator},{value}}
So in this example I am looking at the ShipName, filtering where the value Han is contained in the shipName.
to attach this via the mvc version just add it to the events option
i.e.
.Events(event => event.DataBound("onDataBound"))
another way of doing this is to apply the filter during initialization of the grid and that way the data is filtered without having to go through the issues presented by the first version. filter at initialization
With this version I am merely changing the dataSource and applying the same filter as part of the dataSource setup like so:
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
Freight: {
type: "number"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShipCity: {
type: "string"
}
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
filter: {
field: "ShipName",
operator: "contains",
value: "Han"
}
},
So in your datasource configuration you would add something like this:
.Read(read => read.Action("",""))
.Model(model => {model.Id("ShipId");})
.Filter(filter =>
{
filter.Add(f => f.ShipName).Contains("Han");
})
Hopefully this gives you a good starting point but if you need any more info let me know and I will expand the answer for you.
Using Extjs 3.4
My web service respond with a json string: {"msg":"Some"}
I want to populate a grid with Some .
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
url: "my/json/url.json",
fields: [{name:"msg"}]
});
function StoreLoadCallback(records, operation, success){
if (success) {
console.log(records); // record is undefined
alert(records); // show 'undefined'
} else {
console.log('error');
}
}
function ajaxSearch_function(){
var query = Ext.getCmp('search').getValue();
store.load({
params: {query: query},
callback: StoreLoadCallback
});
}
var form = new Ext.FormPanel({
defaultType: 'textfield',
items: [{
fieldLabel: 'search',
name: 'search',
id: 'search'
}],
buttons: [{
text: 'Search', handler: ajaxSearch_function
}]
});
form.render('ajax-search_form');
var grid = new Ext.grid.GridPanel({
store: store,
columns: [{
id :'title',
header : 'title',
sortable : true,
dataIndex: 'title'
}],
});
grid.render('ajax-grid');
});
The web service respond well, I have tested with Curl.
The problem is populate the grid with the json response.
If you say that records variable in callback method is undefined, there is probably a problem with parsing the response. I guess it expects array instead of one single record. Try to change the contents of the json file from {"msg" : "Some"} to [{"msg" : "Some"}]
After you cross this hurdle (i. e. the response is correctly parsed), I see that your datagrid column refer to "title" rather than "msg". Title is not a member of the store, so the columns will show empty value anyway.
Also, it is not common to start method name with capital letters (except they represent "classes"), so it is kind of nicer to call the method storeLoadCallback instead of StoreLoadCallback.