change angular datatables filter's look - angularjs

We are using angular datatable and in the backend webapi. We are using Light-column-filter http://l-lin.github.io/angular-datatables/#/withLightColumnFilter for serverside processing and it works perfectly as showed in the website. but we want to change the table filter's look to get more filter options (like contains, less than, greater than, equal) and its look like user friendly. it should be look like below image.
we want these type of filter in the angular datatables with serverside processing
image taken from www.ag-grid.com website but we want in angular-datatables with serverside processing. I spend a lot of time for this but didn't get any solution. please help and thanks in advance.

Related

Ideas to migrate from Symfony forms to Client side generated forms populated through AJAX requests

I've been working on a Symfony 3 project for a while and now have lots of quite complicated forms (mostly a filter bar changing from page to page depending on page type, input, and other factors). These forms are quite complicated, have lots of interrelated dropdowns, etc.
Because the project is quite old and I'd like to transition to SPA, I'm looking for the least painful way to get rid of Symfony forms and instead use AJAX requests to populate the data and so on... So basically React and REST API vs monolith.
Can you give me some suggestions on how would you approach this, or maybe you've been working on something similar? I have a gut feeling that I'd need to get rid of Symfony forms and start from scratch writing client-side HTML/js and API to populate the form.
Any advice appreciated,
Thanks.

One page wizard using angular formly

I'm creating form using angular formly with more than 50 fields and i have displayed fields using Advance layout. (link)
Now the form is so big and i want to divide it in small parts.
How can i
achieve one page wizard (eg- Sample Pattern ) using angular formly?
Or is there any other best way to show such big form in user friendly manner using angular formly? Please Suggest.
Another issue that i'm facing is most of the fields in the form are select field and data in this select field is coming from server. So the form is taking some time to load. How can i reduce the loading time of form?
You can easily use
http://angular-formly.com/#/example/bootstrap-specific/advanced-layout
and break up the form into a step manner for user friendly form.
I don't think formly-form takes time in rendering (negligible). You might need to tweak your server api to return data soon.

how to render multiple languages in AngularJS webpage?

I am new to AngularJS, I've a requirement where I should display the products of different countries in a single webpage with different languages(localized language of that countries). Response is coming in the single JSON file for all the countries.
I've tried to use Angular Translate but I was not successful. Could anyone suggest if there is any better way to do?
I use Angular Translate with Multi-language support and it's working fine,
You can check this link
Did you tried https://angular-gettext.rocketeer.be/ ?
we have implemented it by creating different js as per language

AngularJS - Better Implementation for hiding Dom elements based on Filter changes

I was writing a sample app to display a set of youtube videos using AngularJS and filtering the videos based on language. I am binding user action to ngFilter and hiding and displaying filter based on that.
Please see JS Fiddle for code ==> http://jsfiddle.net/saratchandramrs/kxk9p/
If the ideal place to put the DOM manipulation code is on the directive per this AngularJS post - click here
Should I be doing something with the directives in my example? or would it be a overkill or could someone help me understand if I am doing it right per AngularJS principles? or if there is a better way to do what I am doing?
Also, every time the filter value changes, the DOM reloads, is there a way we can accomplish this functionality with out the reload? or is it like hiding individual elements based on the filter value (similar to css style:"display:none")?
Side note: I am using Bootstrap 3 for UI styling.
Thanks for the guidance.
The problem with performance is that you load a iframe for youtube in the directive. Every time you filter, load data form youtube. Did you see http://devgirl.org/2013/03/21/fun-with-angularjs/ ?

AngularJS page validation

I am developing an AngularJS/Web Api application, is there any way that we can write any Page validations in C# code and can be called from AngularJS as a service call?
i.e. the C# code is converted to JSON object where the angularJS service read the JSON object to enable/disable other controls? With this approach i can keep all my validation logic in one centralised place.
I don't want to write the same validation logic in the Angular script.
Please suggest.
Thanks
If I understand you correctly, you want to have only server-side validation. And at the same time you want your validation to happen asynchronously at server. And for end-user it would seem like a client-side validation.
Whether you are using Web API or Spring java, it is possible. There is a framework that can greatly simplify it. Just download example and see how it works:
https://upida4net.codeplex.com
By the way, you can take a look at working example here: http://upida.cloudapp.net:8080/org.upida.example.angular/
I promise, you will be surprised with amount of code there.

Resources