Actually i am creating the whole grid dynamically. In that i need to achieve two way binding using angularjs.
I have looked many examples unable to find releted my requirement.
Here i am attaching one example for two binding concept. but this not my real requrement code. that is very difficult to create dojo. So i attached this Dojo Link.
In this link when ever updating existing data it's updating to the Kendo datasource as well as $scope value. but if i add any new record then it's updating only kendo datasource not updating the $scope. Please give me the solution for this based on this i think i can able to achieve my requirement.
Thanks in advance...
http://dojo.telerik.com/aTIba/8
I achived two way binding for this.http://dojo.telerik.com/aTIba/9
Related
I'm pretty new to angular, but I have managed to get most of the concepts down. However, I can't seem to figure out how I should go about solving my issue.
I have one component, that has other components as its children. I want to be able to loop through the child components, and add data to them separately, either before they are rendered, or after they are rendered.
The master component is an HTML version of a government form, and I have scattered throughout it a simple component that is supposed to display text from a database relevant to the field it is in.
If I was using something like jQuery, I would just attach an id to each component, and loop through them, adding data if the component id matches the key of the JSON object.
Is there any standard way to do something like this with angular?
You'd be better off "binding" any information you'd like to provide to your child components instead of implementing a vanilla/jQuery solution that involves querying the DOM and then manually manipulating the DOM.
Take a look at property-binding and two-way binding.
Here's a quick example:
<my-child-component [someProperty]="myValue"></my-child-component>
<my-menu-component [menu]="menuData"></my-menu-component>
You probably should rethink the way you are trying to do it, when you start with Angular you need to leave a lot of concept that you learnt in jQuery behind.
We don't manipulate the DOM directly in Angular, we manipulate the data that is bound to the template and that binding is what updates the DOM.
Tom added an answer as I was typing, he is saying what I was going to.
The angular way to achieve what you want is to use one-way data binding. Check out the example in the documentation.
In the example they have a child component in the template html of the app.
<bank-account bankName="RBC" account-id="4747"></bank-account>
You can one-way bind data by referencing a public property on the parent and using the square bracket syntax to indicate one-way binding like so:
<bank-account [bankName]="somePropertyOnTheParent" [account-id]="someOtherPropertyOnTheParent"></bank-account>
I have a template who is iterating on a list of numbers and create a form. I don't want the changes made to the forms propagated to the underlying values, therefore, i am using a one way-binding.
Unfortunately, it doesnt't seems to work : JSBin
Thanks you a lot !
Your problem is that the Binding is setup at the "list" level, so the oneWay binding does not apply to specific items and their properties.
Instead of a oneWay binding, you can create a computed property which generates a new copy of your list.
I am having a form, which comprises of several textboxes and one button.
I am using the Kendo UI MVVM format. How shall I get the value of each textbox and store it in an object on click of the button?
Will I have to use normal jQuery in order to get the values or is there some other way of getting the values from each of them?
Thanks
Hardik
Please take a look at these documentation pages:
http://demos.kendoui.com/web/mvvm/index.html
http://docs.kendoui.com/getting-started/framework/mvvm/observableobject
http://docs.kendoui.com/tutorials/mvvm-in-kendo-ui
These pages contain answers to most of the questions you'll have concerning Kendo UI MVVM. It would be silly and presumptuous of me to think that I could explain it better than the qualified and hard working individuals at Telerik that have so painstakingly compiled these documentation pages.
The gist of it is that you need to create an instance of the kendo.data.ObservableObject that has properties for the values you are working with. This is your view-model. Then in your markup for your text boxes, include values for the data-bind attribute that reference the properties in your observable object. Create a function in your view-model to handle the button's click event. Put a data-bind attribute in your button that binds the click event to your function. Finally, call kendo.bind(<element>, <observable object>), and that will connect the wires from your markup to your view-model object.
In your click event-handler, you can take the values of the view-model, and insert them into the object you need. You should not need to use "normal jQuery" for anything besides referencing the element to call bind on.
Quickly you can retrieve the value this way using JQuery:
$('#yourTextBoxID').data('kendoMaskedTextBox').value();
you can use this code:
$('#yourTextBoxID').val();
I am attempting to create a reusable backbone view that represents a select element, and supports the following:
Setting a selected value from a model
Binding other select views to it, so that when its value changes, other select views update their collections
I've seen a few different resources on this, such as
http://blog.shinetech.com/2011/07/25/cascading-select-boxes-with-backbone-js/
http://railsindirection.blogspot.com/2011/08/backbonejs-and-dependent-selects.html
However neither of them seems to support a generalized object that fulfills both purposes - they seem to be hackish.
Does anyone have any advice on how to go about creating this? Or maybe a link to someone else's code that solves this problem elegantly?
Thanks
I would recommend you to implement event aggreator this way.
http://lostechies.com/derickbailey/category/backbone-eventbinder/
so you bind the change event on your select list inside the first view to a method that triggres the update in the other views.
Hope this helps
Does anyone have idea how to remove options from dijit.form.ComboBox, I know how to do it from select, but the same principle is not working here. I could not find anything in the doc api. I tried with dojo.empty, same luck.
Thanks
Do you use a store with your dijit.form.ComboBox? If so (and the store is writable) you should be able to remove an item from the store and therefore the ComboBox should reflect those changes.
store.fetch({
query: {id: "123145"},
onComplete: function(item_array) {
store.deleteItem(item_array[0])
}
});
I know this works when using a dojo.data.ItemFileWriteStore and a FilteringSelect (which is very similar to a ComboBox). If you used declarative markup, the ComboBox might convert the html s to a data store and you might be able to find that store and do the same.
Also, I'm most familiar with v1.6 of the dojo toolkit. Newer versions use better data store types probably and they will probably have a more straightforward ways of deleting an item from a store than the older ItemFileWriteStore.
After invoking the code given by flauerpower, call:
reset() method on the combobox. This will also clear the selection.
1) Dojo Controls are store aware
2) reset will clear the text/selection from the control.
hope that helps