I'm reading an Angularjs Kendo UI application and I'm trying to figure out what's happening.
In the following code:
<div id="my-grid">
<div kendo-grid="controllerName.myGrid"
k-options="controllerName.myGridConfig">
</div>
</div>
It's obvious from the documentation what k-options stands for but I can't find anything related to kendo-grid attribute.
Per the Kendo UI Angular documentation here: http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-creation-in-angularjs:
The directives kick in on attributes like kendo-widget-name.
Therefore, the kendo-grid attribute will create a Kendo UI Grid widget.
A little further down the page, the section Widget Options in HTML says:
You can specify any options supported by Kendo UI widgets in element attributes by converting the option name from camelCase to dash-separated-words, and prefixing it with k-.
So to configure the Kendo UI grid, you will likely need to set the specific grid attributes using the k-[attr-name] syntax.
There are examples for creating widgets and setting properties on that page, and while they don't specifically use the Grid as an example widget, the same principals will apply for creating and configuring your Grid widget.
Related
i like to confess that i am not very good in angular and still learning. i have to load huge data and has to show by dropdown. i would prefer if i could do the pagination at dropdown end. i am working with a custom dropdown which is good and taken from this site http://developers.dss.ucdavis.edu/angularjs-serachable-multiselect-dropdown-directive/
but the above custom multi select dropdown lack one feature for showing pagination link. so the problem is user can not show minimum data and click on other link on demand to load next set of data. just wonder anyone mind to add code in the custom directive which add pagination feature there.
so at a time i can load 20 data and click on next pagination link to load next 20 data. i have seen people already developed angular pagination directives. here is one similar link http://angularjs4u.com/pagination/top-5-angularjs-pagination-demos-2014/ hence i am new in angular so do not understand how to add custom pagination directive in another custom multi select dropdown directive.
it will be really good help if some one show me how to achieve it. thanks
With the same UI Bootstrap that they use in that blog there is a pagination directive.
Here's a Plunkr
A few key points here are:
The normal ng-repeat is set as filtered variable to allow for update of search filter along with paginated.
ng-repeat="item in filtered = (allItems | filter: ...
In the same repeat after the filter you set a "limitTo" to set pagination on the list
... ) | limitTo:limit:begin
Then you just need to follow the ui bootstrap pagination
<uib-pagination total-items="filtered.length">
I am creating a custom angular directive to disable elements like input,anchor,button etc for a page containing kendo grids...
Directive works fine on other elements but not on kendo grids...few columns of the grid is having anchor tags need to disable them...
My question here is
How to apply custom logic present in my directive after kendo grid render completed...by emiting or broadcasting some action on databound event or etc...or by watching a rootscope value and changing it...
What would be the best approach i can take...will update the question soon with some codes...posting this from mobile...
I'm trying a pretty unusual approach of rendering a UI Bootstrap tab via AngularJS.
What I'm trying to do is:
Custom directive -- (That creates a) --> UI Bootstrap Markup -- (That renders) --> A Tab
I know that two directive shouldn't edit the same DOM node, so I used
- Priority attribute
- Terminal attribute
To allow my directive to be the first ones that are compiled and only then the Bootstrap directive should work on the DOM node.
My initial markup is something like:
<mytabcontainer>
<mytab title="Tab">Content</mytab>
<mytabcontainer>
That will convert to this Bootstrap markup
<tabset>
<tab heading="Tab">Content</tab>
</tabset>
I correctly transform the custom markup to the Bootstrap one, but it doesn't get correctly displayed.
Here is a Fiddle that shows my current progress: Fiddle
Unfortunately this is the only approach I can use because of previous decisions so please don't just tell me to directly use Bootstrap markup
I have problems with Kendo PanelBar in combination with ng-repeat and modifiying dynamically the datasource!
You can see a small demo here:
http://trykendoui.telerik.com/#IT-SCHMITZ/OrEK/2
After clicking the button "Add new album" you can see, that there was added a new item to the panelbar. Unfornately it is not correctly rendered.
Regards,
Daniel
This cannot work with ng-repeat once the widget is initialized. A workaround would be to use the dataSource argument, but since the PanelBar does not currently support a live data source you need to use k-rebind to rebuild the widget when the data changed.
Here's an example: http://trykendoui.telerik.com/#mishoo/Udep
I'm using Angular JS along with Kendo UI (with the Kendo Angular Directives) for a project I'm working on. Currently, I'm loading data into a Kendo UI Grid which contains a foreign key field. I'd like to map this to display user-friendly text rather than a Guid.
So from:
Value ForeignColumn
Some Value [Guid]
To
Value ForeignColumn
Some Value Foreign Value Name
I'd like to load the foreign key values used in the mapping using ajax. If the values are already loaded at the time of initializing the grid, this works just fine (there's an example of this in the JSFiddle below). I've read that Kendo UI doesn't support doing this automatically with ajax, so you have to preload the values before initializing the grid. However, what I'm seeing is that even if I do this, the grid doesn't get updated, even though the data source does reflect the changes based on the loaded values (seen through the batarang extension for Chrome).
I'm doing the following calls to attempt to trigger the refresh:
$scope.myGridOptions.dataSource.read();
JSFiddle with comments on different attempts: http://jsfiddle.net/ernestopye/64nwD/3/
I've added comments for some of the different attempts I've made to get this to work. Am I doing something wrong? Or could this be an issue with Kendo UI's Angular directives? I'm fairly new to both Kendo and Angular, so I'm guessing it's probably the former.
Thanks for any help.
Mihai Bazon provided a solution through a GitHub issue. There's an undocumented attribute called k-ng-delay which helps facilitate this exact scenario. He's working on adding it to the docs, and provided an example.
<div id="grid" kendo-grid k-ng-delay="gridOpts" k-options="gridOpts"></div>
I forked my JSFiddle example and updated it to use k-ng-delay: http://jsfiddle.net/ernestopye/ceKXg/2/
Hope this helps someone!