I wanted to create a kendo grid in my application using React and was successful in enabling sorting, filtering, pagination etc., as given in the demo.
What I want is to add a button to every row in the grid like Export PDF. On click of that button, it should export only that particular row to PDF. Is this functionality possible? All I have seen till now is exporting all the items to PDF. Kindly help.
I was finally able to achieve this by making use of Editing(Inline) in Kendo React grid- https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline/
to add a button to each row and capture the data item selected. Finally I made use of PDF export functionality of Kendo to export only that particular row data to PDF.
Related
In the application I have been working need to have a customize pagination option , so that the user can select how many records / page he want to display in the grid. Currently the ag community version has the option to place a dropdown to change the page size dynamically is available. This makes a call to paginationSetPageSize(newPageSize). So do we have any option available to display the custom pagination option along with the autopagination controls coming in the grid footer?. Please help.
Think my database have 6 fields. I only show 4 fields and it's data in grid using kendo UI.
I also add toolbar to that grid(Buttons that add and edit for data). When I click that Edit button the iframe only show that 4 fields that show in the grid. But I need to add extra field to that iframe. So is that can do in kendo UI ???
If can someone suggest a way to do that ??
I also using AngularJS to this project...
Finally I found the answer for this.....
I feel that I had search a wrong way..
The answer in here ...Answer
Using Sencha Architect Version 3.0.2
ExtJS 4.1
I am trying to make the selections in the Grid column headers stateful and save them in a cookie.
What I am after is the Columns menu that further dropdowns to list the columns in the grid with a Checkbox besides it. Selecting/Un-selecting this box will unhide/hide the respective column.
I want to save this setting so that next time the user loads the grid, a column that is unselected before is hidden and does not appear (until obviously cookies are cleared).
Example Fiddle Located here
Following is the menu I am talking about:
Set stateProvider and make the grid stateful:true with stateId, fiddle here: https://fiddle.sencha.com/#fiddle/a6s
I have just started with angularjs. Just wanted to know that if it is possible to create a sub grid inside another ng-grid. There would be some links in a column of the grid and when I click a particular link a grid corresponding to that link should be formed inside the already existing grid.The original grid would be having say 5 columns while the new grid will have say 4 columns. So something on the lines of colspan or something similar is what I look for.
If you are open for writing Angular Directive then you can use any grid ,other than ng-grid which has subgrid feature.
I know like Kendo Grid has subgrid feature and jqgrid has subgrid feature. I wrote a Grid using Google Closure library , this also has subgrid feature.
If I understand your question, you need something like master/details inside grid, it not part of base functionality. nggrid has fixed row height, for virtual scrolling purpose. On our project we have created custom grid plugin base on nggrid
Solution that we used is:
write custom sort function, which populate duplicated rows always below main
when we click expand button we duplicate current row n-times depend on subgrid height
in main row we create css overlay container which hides duplicated rows
load overlay container content via ajax
When we click hide button, we hide overlay, and remove duplicated rows.
Please point me to an Ext JS 4 code sample of a grid with records editable via a popup form. It seems to be a common use case, but I can only find editable grids with editing in place.
My approach:
Each row in the grid has an Edit button, which shows Ext.window.Window with an item Ext.form.Panel.
When the form is submitted I have all the fields, which correspond to a record in the grid store.
I get record using:
var storeRecord = grid.getStore().getAt(index);
But when I modify properties of this record, and hide the form window, the grid does not show updated values.
Am I missing some step? Do I need to force refresh? Or maybe there is a standard way to configure the grid with an editor as a form panel?
After two days of searches, trials and errors, I found the solution:
grid.getView().refresh();
I wish there was a faster way for Ext learning curve. :(