sharing data between the directives angularjs - angularjs-directive

I have a page with 2 directives. one directive(Directive-1) is responsible for loading data grid(using KENDO-GRID) and another directive has buttons to print, export as Excel, PDF files etc.
From Directive-2, when export button is clicked, I need to get an access to the kendo Grid DATA that is part of Directive-1
What is the best way to implement Export functionality of the kendo-GRID DATA, where both grid data and export functionality are written as seperate directives?
Questions:
1. How do I share data from directive-1 to directive-2 for export?
2. Should I grab the data from directive-1 and put it in Parent controller and then pass that data from parent controller to directive-2? if yes, what is the efficient way of doing it?
issue Explanation as image

Related

Angular 2+ multiple HTML template for one component

I have the following scenario. I am writing a complex component that is using three-js:
The component manages complex mouse interactions and updates other elements in the DOM using two-ways data binding: variables, JSON objects, mouse interactions, etc.
I start using the component in few part of my application but I needed to substantially modified the threed-viewer.html so I made a copy of the whole component ending up having duplicates that are hard to maintain.
All flavours of the component share 80% of the javascript code and bindings but they have substantial UI differences. So I had the though of create different 3 basic component (minimal javascript code) that I can inject into the threed-viewer.html using a selector and a variable to decide which template to load:
this does not compile as the html files have all the variables and bindings from the original components but they are not present in the typescript files.
Another solution could be to have a single html managed via ngIf but it will result in a long, messy, difficult to manage file. Is this the only option I have in Angular. Any other idea?
Thank you.
You can have a shared service and then add three different components but js code won't be duplicated as it will be in the service.
Use two way bindings in all 3 components using the service variables, functions and objects
I have did long time ago - the pages and article editor. Two different templates, same code.
I used articles component as "parent", and extended it to news editor.
Looks like this:
#Component({template: 'blah blah blah'}) export class parent {}
#Component({template: 'blah2 blah2 blah2'}) export class child extends parent {}
Hopefully this is the solution you were looking for.
Two different components, two templates, one code.
Of course, you can have the "parent" abstract class for both where you can save all methods you need.
It's OOP baby ;)

Rendering an email preview in Vue

I'm creating an internal messaging app in Vue and would like to expose a limited number of predefined variables for a user to choose from when sending a templated message (name, department, etc.).
I'm planning on displaying the rendered variables in a "preview" component which ideally would take the raw html, complete with {{variables}}, fetch the values for the variables and render the preview.
Judging from https://v2.vuejs.org/v2/guide/components there are a number of options that would seem to work, is there an objectively better/worse solution?
I was facing same issue while creating a chart editor.
Instead of sending HTML to the component, you can send a object which consists of your variables as a prop to the component and then render the HTML inside preview components.That will provide live preview feature to the user.

React with MVC data annotations and unobtrusive validation

We are currently looking to experiment with modern frontend frameworks like react on an MVC4 project. We use data annotations in our models and we have a lot of forms that use unobtrusive validation on the UI.
The main thing is finding a way to use react to generate the content while still being able to make use of features like unobtrusive validation. As I understand it, it really is just a bunch of data-val attributes dynamically generated when using HTML helpers like TextAreaFor, ValidationMessageFor with the attributes getting values from the data annotations in the model classes.
I've tried several things including
ReactDOM.render(
#using (Html.BeginForm("xyz", "xyz", FormMethod.Post))
{
#Html.TextBoxFor(x => x.Email)
which results in the input box not being editable for some reason.
I'd prefer to do something more like
ReactDOM.render(
<form><input type="text" data-val="#Model.datannotations[1].val" /></form>
Is that possible? How does one get the data-val values from the model anyway? What is the best way to achieve this?
it should not be possible.
These are two differents ways to delvelop the ui.
The razor way is preprocessing the markup code in server side to fill it.
And react works in another flow using the lifecycle methods, you should have already loaded the data-anotations values for accessing it on render.
Therefore, to make this works you have to run razor engine first to fill the markup and next using react engine.
I don't recommend use this approach because it's too hard to develop on it and the developers team have to keep that flow in mind while they are developing
Note this
ReactDOM.render(<ComponentMustHaveJSX/>)

Form input based AngularJS routing

I have an html page that takes form input. Based on the form variables input into the form, I want to navigate to different URLs using AngularJS routing. Can anyone provide some information as to how I can do this?
There can be multiple approaches to this. Two obvious choices are to use $routeProvider if you are using ngRoute for routing or $stateProvider if you use angular-ui-router. In both cases, the paradigm remains the same.
Essentially you can map your form date from $scope to the states/routes in your app.config. From there, you can pass the templateURLs and map them to whatever HTML page you want it to load.
Please reach out for further clarification . All the best.

How can I import html content to pdf template?

I created a pdf template with open office draw. it has textboxes and I can set values with acrofield. But I can't import a html content to template.
I can convert html contents to pdf file; but for template, how can I do it?
My problem is with template; also my html content have to map on page, for example center of page.
Thanks
I am not quite sure if I understand your question, but it seems like you need some kind of template where you will enter your content.
My thinking goes to OpenXML as the best fit. But since it is rather complex you can save some time by using third party tools.
From my experience, Docentric gives you good value for the money. You can prepare a template in Word and then merge it with data from any source that can fit into .NET object. Your document can be converted to pdf or xps if required.
Templates are generated in MS Word (2007 or newer) using special Docentric Add-in for template generation. All MS Word formatting can be applied here. Placeholders for data are set where the data will appear at runtime.
The process is straight forward so even end users can design reports. Developers then focus on bringing data in from various sources (database, XML). Chech the product documentation for ideas how to use it.