Actually my requirement is want to create form controls like textbox, dropdown, date/time picker etc..
The above controls i want create using JSON , I will have all the Meta Data in the form of JSON.
Using that JSON i can able to create the controls using Angular Directive, Now i want to modify the any of the controls in the VIEW
I need to change the Control as well as the JSON. Here i need to use two way binding.
Please anyone help me to achieve this or Provide any examples likewise.
Thanks in advance.
I'm not sure if I understand the question, but if you're just needing to convert an object literal on your scope to JSON, angular.toJson should fit your needs.
$scope.object = {
foo: 'bar'
}
var result = angular.toJson($scope.object);
Bind $scope.object to your control using ng-model and use angular.toJson in your controller to convert the scope object to JSON to use elsewhere as needed.
Related
This works:
var editor = $("#htmlEditor").data('ejRTE');
The question is what does .data('ejRTE') do?
It retrieves the widget which is part of this html:
<textarea id="htmlEditor" value.bind="entity.content"
ej-rte="e-width:100%"
ref="textArea"
style="height: 220px"></textarea>
How do I retrieve it without jQuery.
jQuery.data() Store arbitrary data associated with the specified element and/or
return the value that was set.
So basically the widget stores some data in the element htmlEditor indexed ejRTE, I bet it is a custom object used by this tool.
var editor = $("#htmlEditor").data('ejRTE');
then editor will hold the object stored by the widget for this element
If you set data like this $(#myWidget).data('foo', 'myFoo') then jQuery will create an object called 'jQuery224059863907884721222' on myWidget which it uses to store the value.
I am guessing that the number is an arbitrary datetime value.
I stepped through the jQuery code, and it's not practical to replace it. I thought it might be just a line or two of code.
Using this article posted on CodeProject.com, "Using KnockoutJS in your ASP.NET applications" as a guide I am attempting to create a reusable, data-loaded drop down list using ASP.NET 3.5 Web Forms, but that leverages KnockoutJS for client-side data-binding. Multiple, independent instances of this drop down should be able to live independently in the same page.
So far the CodeProject.com post has been invaluable in directing me on how to set things up and I am successfully passing the updated ViewModel data back and forth between the server and client as a JSON string and converting it to and from an object (both on the server and client). What I am hanging up on is what should be the simple part; binding the ViewModel to the drop down list!
So I begin by loading the JSON string into a hidden field. It includes a list of Regions and a single SelectedRegion.
<input type="hidden" id="ddlRegionKO_hdnRegionListVMStorage" value="{"Regions":[{"RegionName":"Mid Atlantic USA","RegionId":2},{"RegionName":"Mid West USA","RegionId":10},{"RegionName":"North Central USA","RegionId":5},{"RegionName":"North East USA","RegionId":1},{"RegionName":"North West USA","RegionId":7},{"RegionName":"Other","RegionId":9},{"RegionName":"South Central USA","RegionId":6},{"RegionName":"South East USA","RegionId":3},{"RegionName":"South West USA","RegionId":8}],"SelectedRegion":{"RegionName":"North Central USA","RegionId":5}}" />
I then run convert this string into a Javascript Object using the ko.utils.parseJson() function.
var stringViewModel = document.getElementById("ddlRegionKO_hdnRegionListVMStorage").value;
var ddlRegionKO_pnlRegionDDLContainer_ViewModel = ko.utils.parseJson(stringViewModel);
Then I convert the property definitions into ko.observable and ko.observableArray methods (this is one of those sections that will be need to be refactored, but as a proof of concept it suffices).
//
// Convert all the model properties to KO Propety/Methods
for (var propertyName in ddlRegionKO_pnlRegionDDLContainer_ViewModel) {
switch(propertyName.toUpperCase())
{
//
// Multiple Region objects are stored as an array in the regions property.
case "REGIONS":
ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName] = ko.observableArray(ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName]);
break;
//
// Only a single region may be selected at any time.
case "SELECTEDREGION":
ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName] = ko.observable(ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName]);
break;
};
};
Given this, I would expect the drop down list to be populated and the SelectedRegion selected when the applyBindings method is called ...
ko.applyBindings(ddlRegionKO_pnlRegionDDLContainer_ViewModel);
I have put this all together at JSFiddle ... here ... I suspect that I may be overlooking something but I cannot see what it might be. Everything looks right to me.
If anybody can see something that I am overlooking I would be extremely grateful!
Thanks,
-g
You don't need to specify the model name in your bindings. Instead of options:ddlRegionKO_pnlRegionDDLContainer_ViewModel.Regions, just use options:Regions, etc.
<select id="ddlRegionKO_ddlRegionList"
data-bind="options:Regions,
optionsText:'RegionName',
optionsValue:'RegionId',
value:SelectedRegion,
optionsCaption:'Choose Region ...'">
</select>
Working fiddle
Edit: You were also missing an optionsValue binding that specified which property you want to be bound to the value of each option. I updated the fiddle to include this change.
Edit 2: Well, your selected region in your json is an object. I looked over the knockout documentation about binding and I didn't see a way to bind a selected value to an object, so if it's possible for you to modify the json, you can just specify the id of the selected value.
<input type="hidden"
id=".."
data-bind="..a bunch of array stuff... ,"SelectedRegion":5}"
/>
See what I did there? I replaced the object
'SelectedRegion':{'RegionName':'North Central USA','RegionId':5}
with just:
'SelectedRegion':5
Updated fiddle is here. But this won't help with your textbox situation because it will show the ID instead of the text in your textbox. It's a bit late here so I'm not really sure how to fix that off hand, but you might look here for some inspiration. Good luck.
I was wondering how I would go about converting data when I call the set or save methods on a model. Specifically converting the inputted date string to epoch time.
I know I could just convert it in the view, but as far as I know, that wont work very well with my validations.
The model code is here if you are interested.
Thanks for any help!
What I can gather you have two options:
1 Convert them in your view
This means you can roll your own conversions for the view or use something like Backbone.modelbinder to make the conversions for you. Then you have to modify your validate method to accept an epoch date. Personally I would prefer this one, I think that it's suitable for the UI to handle verifying user input's well-formedness and conversion to the right unit and let the model handle validating if the values are within the accepted limits.
2 Convert them in your model
Backbone doesn't offer this out-of-the-box. If you set something to be something, there is no easy way to convert it to something else, especially between validate and set. Basically your best bet would be to roll your own set -function with something like
// Inside the set function
...
if (!this._validate(attrs, options)) return false; // real line in the set func
// insert something like this, after validate you know the values are eligible for conversion
attrs = this.convert(attrs); // a custom func that converts attributes to right units
...
// set continues as usual
Hope this helps!
You can overwrite the sync method in your model:
, sync: function(method, model) {
if(method === 'update'){
// change you model here
}
}
This will be invoke bevor data is send to the backend server. The "method" indecates 'create' or 'update'.
According to the sources, validate is the only callback that is called before set and save. You can to set the values in your validate method directly on the attributes object. Unfortunately you cannot make any changes to attributes at this point.
You can use a plugin like backbone.getters.setters to do this since it looks like it won't be a feature added to backbone.
I'm using jqgrid for which I create column definitions on server as dynamic objects and serialize them using Json.Encode:
html.Raw(System.Web.Helpers.Json.Encode(ColumnDefinition);
I have problem with applying custom formatter, as my serialized column definition is:
{"name":"Icon","index":"Icon","hidden":false,"formatter":"iconFormatter","unformat":{}}
Problem is in quotes which are added to all keys and values to respect JSON specification, and those around iconFormatter are problem in my case as I want that to be my function.
Is there a simple solution for this?
It seems to me that you have the same or close problem as described here. You will have to replace the string values of the formatter properties to the function reference. Pragmatic way is to search for the strings like "iconFormatter" (search for all custom formatters which you use) and replace there to the corresponding function refernce.
UPDATED: If you would be use template property inside of column definition (see here) you would be solve the problem in another way. Additionally you code will be shorter, more clear and better readable.
I am building a dynamic form to edit data in a json object. First, if something like this exists let me know. I would rather not build it but I have searched many times for a tool and have found only tree like structures that require entering quotes. I would be happy to treat all values as strings. This edit functionality is for end users so it needs to be easy an not intimidating.
So far I have code that generates nested tables to represent a json object. For each value I display a form field. I would like to bind the form field to the associated nested json value. If I could store a reference to the json value I would build an array of references to each value in a json object tree. I have not found a way to do that with javascript.
My last resort approach will be to traverse the table after edits are made. I would rather have dynamic updates but a single submit would be better than nothing.
Any ideas?
// the json in files nests only a few levels. Here is the format of a simple case,
{
"researcherid_id":{
"id_key":"researcherid_id",
"description":"Use to retrieve bibliometric data",
"url_template" :[
{
"name": "Author Detail",
"url": "http://www.researcherid.com/rid/${key}"
}
]
}
}
$.get('file.json',make_json_form);
function make_json_form(response) {
dataset = $.secureEvalJSON(response);
// iterate through the object and generate form field for string values.
}
// Then after the form is edited I want to display the raw updated json (then I want to save it but that is for another thread)
// now I iterate through the form and construct the json object
// I would rather have the dataset object var updated on focus out after each edit.
function show_json(form_id){
var r = {};
var el = document.getElementById(form_id);
table_to_json(r,el,null);
$('body').html(formattedJSON(r));
}
A much simpler approach would be to accept a form submission and output the data in JSON format. That way, there is no need to bind variables.
The solution has arrived. JQuery now has plugins for data binding and templates.
http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html
http://api.jquery.com/jQuery.template/
http://api.jquery.com/category/plugins/data-link/
There is another simple template engine that loads JSON data directly into the form. See http://plugins.jquery.com/project/loadJSON plugin. It works similar way as the one that Jack placed here but it uses plain HTML for template.
You can see instructions how to use it on the http://code.google.com/p/jquery-load-json/wiki/WorkingWithFormElements and live example on the http://jquery-load-json.googlecode.com/svn/trunk/edit.html?ID=17.