I have a kendo grid "GridProjects" (See attachement: Part HTML). At the initialization, the column set (name, field, ...) and the sorted column list are retrieved from my BD on the gridHelperService.
To update the column set, I used the attribute "k-columns" on my HTML. However, I couldn't do the same thing for the sorted columns since the sort proprety is inside datasource.
I Know that I can use k-data-source, but in my case, it doesn't work because my dataSource transport and filter is binded with some variables on the controller.
Every thing is explained at this attachement: Projects Kendo Grid
I can't figure out how to fix this, if anyone can give me a hit, I'll appreciate.
Thanks!
I don't know much about your setup but based upon the image. Here is what you can try where you want the sort to happen. I don't know the columns your setup has but if you have firstName I would do sort like this.
$scope.GridProjects.dataSource.sort({field: "FirstName", dir: "asc"});
Inside the $scope you can get access to the kendo-grid="GridProjects" and then its dataSource and then sort it.
My problem was that my settings (columns) are loaded after my grid was created.
I changed my code to created the grid after my settings are loaded. To do, I called my function that creates the grid on my callback function (onSuccess).
Related
I got requirement to set column title per condition.
No Grid method allows me to set column title after table gets rendered.
I tried with setting new title via manipulating its value in options.
But after that, I'll need to call refresh() method to show my new title.
Because in the grid, I always have some columns hidden dynamically.
Refresh() method will make these hidden columns showing again on the screen and I don't want it.
So, is there a way to set new value to column title?
Thanks.
For hiding individual columns, you can use the hideColumn, showColumn and isHidden methods.
You can also use the visible column property to set column visibility at initialization time.
There is no setTitle() method currently implemented, but you can email Shield UI's support and ask them to implement that for you. Depending on their load, they might do it real quick.
Until that is implemented, you can always update the title by using jQuery.
I'm trying to add columns to a ExtJS grid in initComponent() using this.columns.push().
This is working fine, but when I destroy the view and create it again the columns are duplicated. It seems ExtJS is keeping some state of the previous instance. I even tried to reset the columns array in destroy() but can't eliminate this strange behaviour.
See this Sencha Fiddle for the code.
Try this approach, it should work
var grid, columnsArr = [];
grid.reconfigure(undefined, columnsArr);
the first parameter is a store reference. pass a reference to new store if you wish to change the store as well
I have an array of objects that I want to show in ng-grid. Each row has a boolean property isVisible. In the ng-grid I want to show only the rows where isVisible is true. The other rows should be completely hidden.
I have tried using a rowTemplate and databinding a ng-show to isVisible. That hides the content of the row, but leaves the actual row in place, showing an empty row.
I have tried using filterOptions, but can't figure out the correct syntax to do such a filtering. I couldn't find any good documentation on how to set it.
I have even tried modifying the gridTemplate in the ng-grid source, by trying to add a filter on ng-repeat=\"row in renderedRows\", but I haven't gotten that to work either.
I guess I could modify the array itself, by temporarily removing rows, but I would prefer not to do it that way, since I have to be able to show the rows again (It is actually an expander that I'm doing, that should hide/show sub-rows)
Try also conditionally setting the height of the row in the template to '0' based on isVisible or use a CSS class with ng-class. Play with the CSS of it until you get the desired effect and then you can use that in your template.
This sounds like the type of thing that would benefit from using height and CSS animations actually so it opens and closes with an animated style. If you have a jsFiddle sample I'd be happy to try and help.
Edit: After looking at how the grid actually lays out it's rows (absolutely positioned) you only really have two options I can think of:
1) Filter the data you are binding to the grid through a function like dataVisible() but keep the full data list internally in the controller so you can show/hide easily
2) Submit a patch to the ng-grid project (or fork it) with the filtering capability you are looking for. Out of the box it doesn't appear to support this scenario.
Folks,
I am using ng-grid to display a list of items.
I want to give my users ability to rearrange the rows in the list.
i.e move the rows up and down as they please.
Now,
However when I update the grid data in the backend i.e say change the index of a particular row, that row does not automatically change locations in the front-end.
What am i missing here ?
I have created a plunker to describe the problem
http://plnkr.co/edit/s1hrTSqF2zeZo3Btaln0
The grid doesn't use the index of the array to order it, so even if you are changing it, because the data is still there nothing happens.
What you could do is define an order field and update the value then changing the values as shown in this plukr. The order field you can hide it from the grid if required using columnDefs to explicitly defined which column should be shown.
Regards
I have a requirement to create a custom form field that is basically an extjs grid. The user should be able to click a result in the grid. This clicked result should then become the fields value. Also, this field needs to extend Ext.form.field. Here's what I got:
Ext.define('MyApp.field.Grid', {
alias: 'widget.GriedField',
extend: 'Ext.form.field.Base',
I'm a lot of confused on how to add a grid to form field base. Looks like form field base's template expects HTML. How do I get it accept a component?
If you just need to select a value from a list of items. Why not use a combobox?
If you need to select multiple items. There is an example of how to use the MultiSelect ux component in the documentation examples.
http://docs.sencha.com/ext-js/4-1/#!/example/multiselect/multiselect-demo.html
If you really must use a grid. Then I wouldn't bother with trying to create a field type and cause yourself grief.
Add a listener to your grids selectionchange event and update a hidden field in your form with the value you want from the grid. Job done.
I ended up putting the grid on a form indirectly through creation of dependencies on my model.
My model has master-detail, which the detail is just a store reference. I found that using associations did not work for me.
So, in adding a field to a form, I have something that manages changed events for the model (master record) and the detail stores.