I am having 2 Json files i.e. Products.json and Promotions.json. Both are having the same structure i.e. fields are same just the values are different.
When the page gets loaded the grid is bound with the data in Products.json as follows:
<!--dataSource gets the Products.json data -->
<div data-role="grid" data-columns="[{field:'code',title:'Code'} .... data-bind="source: dataSource"></div>
after which on button click I want to clear the current records of grid and add data of Promotions.json
<div data-role="grid" data-columns="[{field:'code',title:'Code'} .... data-bind="source: applyPromotionsDataSource"></div>
I am able to read both the dataSources successfully, also I am successfully able to get the "click" event as well..
Questions
How shall I clear the existing dataSource of the grid?
How shall I bind the new dataSource to the grid? (using what method?)
the method setDataSource() works well, but if datasource is different also in columns it goes on error cause it can't find the column "xxxNewDataSourceColumn"... There is a method to refresh also the columns?
I got the solution for the above issue.
I went through the documentation of grid and came across the setDataSource() method and added it on the button click event.
That worked well.
Those looking into this issue, Thanks!! :)
-Hardik
Related
I am creating a project using angular and material. In my project i want to add customised footer row in material table on click of button and delete that row on click of delete button.
Here is my code:
https://stackblitz.com/edit/angular-dshjiz-beqnrj?file=src/app/table-basic-example.html
You need to push data in datasource
this.dataSource.data.push({id: 1, name: 'test'})
There is stackblitz example
You need to push data as mentioned by Armen. You also need to call renderRows() method of the table as per suggestion https://material.angular.io/components/table/overview#1-write-your-mat-table-and-provide-data
Please check your updated stackblitz example
Same method can be implemented to delete the row. Just make sure the renderRows method calls everytime the table updates.
I use dhtmlx to build grid in my project. enableDistributedParsing or enableSmartRendering are ways to load big data, dom table cell nodes will be append to grid table.
But after I check the event list of dhtmlx, I cant find anyone to bind to the loaded event.
How could I know the big data have been loaded? And how could I bind new events to the lines which is appended to the grid table before all data have been loaded?
follow is my example code:
var grid = new dhtmlXGridObject(container_id);
grid.setImagePath("/AM/img/");
grid.enableTreeCellEdit(false);
grid.enableAutoWidth(true);
grid.enableAutoHeight(true);
grid.enableDistributedParsing(true,100,250);
grid.parse(data,'json');
$('#' + container_id).find('.objbox tr').hover(function(){
$(this).toggleClass('hover');
},function(){
$(this).toggleClass('hover');
});
// well, how to bind hover to `tr` after new lines appended to table?
Anyone helps?
Check for onXLE grid event that fires right after data is loaded to the grid. You can fire a call there if you want to manipulated newly loaded grid rows.
Hope this will help.
I have two separate tabs (Tab A & Tab B). These two tabs share a single store wherein each are in their respective indices. [0] - A , and [1] - B.
My controller initializes the load upon click on its menu leaf such as:
oMe.control({
'#role-permission-grid-panel': {
edit: oMe.save,
beforerender: oMe.loadData,
},
'#roles-applicationtype button': {
click: oMe.filterByApplication
}
});
applicationtype button is the filter where tab switching of loaded data happens.
When trying to catch the value of the current filter, the controller successfully shows which one was clicked. However, this no longer refreshes the grid panel data.
SampleGridPanel /view:
console.log('Application',oController.sDefaultToggle);
Simply put, I update the data from SampleController, and try to catch it from my SampleGridPanel by calling filterApplication. My SampleGridPanel only loads the store once due to initComponent. I want to pass the updated data (in this case the selected tab) from the controller to the view. How do I notify my view that this change occurred when it only identifies data on initial load?
I'm also a bit confused. On my controller, when calling oMe.loadData beforerender, it knows the last tabbed value, but when I call oMe.loadData from a custom filter function, it no longer reloads the entire store. It only loads the filtered information based on the filter value.
You could listen to the activate and deactivate events of the tabpanel. These are also available in older versions of ExtJS.
If you are using ExtJS 6, you should really consider using ChainedStore.
A Store contains the data.
The grids aren't bound to the store, but to a ChainedStore each.
The ChainedStores have their source set to the store, and use different filter to only get the data that should be shown in their respective grid.
Please note that as of ExtJS 6.0.1 there were bugs in ExtJS that exhibited when combining ChainedStore with GroupingFeature or CellEditing. These should be fixed in ExtJS 6.0.2.
I'm trying to implement a Kendo UI master/detail grid using the kendo angular directives:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<kendo-grid options="gridOptions">
<div k-detail-template>
???
</div>
</kendo-grid>
</div>
</div>
In the controller, I've configured gridOptions on $scope to retrieve data from a rest service. This works fine. The grid displays this data. Now upon expanding a row, in detailInit function (defined on $scope.gridOptions) I make a second rest request to retrieve the child data associated with the expanded record. I want to display this data in the detail template.
My question is, how do I bind the HTML in the k-detail-template to the data returned from the second request? I tried assigning this data to $scope but then if I expand one row and then another row, both rows render the same detail. This is understandable as both detail rows will be bound to same scope.
In the following example on the Telerik website they bind to the dataItem.FieldName, but I don't think this is appropriate for me as I am not displaying a grid in the detail template.
http://demos.telerik.com/kendo-ui/grid/angular
I'm a newbie to Angular so apologies if I'm missing something obvious. Please let me know if you have any suggestions.
Thank you.
I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you
Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.