I am working on a feature where in the user could customize the grid (adding, grouping, sorting,aggregation etc) and then can save this as a template.
I am able to retrive the grid options on a button click as below.
JSON.stringify($scope.gridOptions)
however when I am using that as the grid option the grid loads but the grouping, sorting and aggregate is missing. if I analyze the grid option, I still have them.
You can use ui-grids Save and restore functionalities.
Save and Restore
Inject 'ui.grid.saveState' module.
Add 'ui-grid-save-state' to your grid html.
<div id="gridSaveState" ui-grid="gridOptions" ui-grid-save-state class="grid"></div>
Then you can use store the ui-grid states by saving the formatted JSON and also restore from that data.
I think for your case you can use the built-in save and restore state feature of angular-ui-grid. This will mean the grid will bring back the settings you want and display them correctly. You can also control which of these settings (e.g. sorting, filtering etc) are restored, and which not.
http://ui-grid.info/docs/#/tutorial/208_save_state
Some example code
$scope.gridOptions.onRegisterApi = function(gridApi) {
$scope.gridApi = gridApi;
// I store when the user changes a filter, but you could
// instead store on the user clicking a button or any other event
$scope.gridApi.core.on.filterChanged($scope, function() {
var state = gridApi.saveState.save();
SomeServiceOfMineForStoringStuff.storeState(state);
});
}
Later...
var savedState = SomeServiceOfMineForStoringStuff.getState();
if (savedState) {
$scope.gridApi.saveState.restore($scope, savedState);
}
Related
I've a razor view that shows some jobs data on the basis of some filter like date, description, city, country etc. etc. Data loads in grid and then user can open that specific job.
when user clicks to view some job, it redirects on another page. what I want is that when user comes back on this page again, it should have preserved selected filter and searched data accordingly. I tried tempdata but is of no use. Then i tried cookies but it does not allow me to keep object as it always wants a string as a value.
Any guesses please?
Just use the browser local storage and some javascript code before sending the query to your server.
In the event that trigger the query, just collect the data and store it like this with javascript:
function myFunctionToBeCallBeforeSendingTheQuery() {
var query = {
jobTitle: 'user typed text goes here',
countryId: 'the id goes here'
}
localStorage.setItem('query', query);
}
When the user come back to the page you need to execute the following javascript code after the page get loaded:
$(function() {
var query = localStorage.getItem('query');
if(query != null) {
// here you set the fields of your form with the preview stored data.
}
});
I want to make select tags editable on mouse over.
In my view I have few select options. I want to make them editable on mouse hover like this on the picture.
I had success on text fields but options are being a pain. As the options have Id and a Name property. So it should also keep track of Ids when a user makes a selection.
EG:
var ViewModel = {
selectedId = ko.observable(#Model.Id);
availableOptions = ko.observableArray(#Model.Options); // Options have {id, Name}
}
I am a newbie on KO. Anything will be a lot of help.
Thanks
Could not post picture sorry.But you guys get it :-)
Im building an asp .net MVC application that has a kendo grid. Users will be able to log in and customize the grid like group data using drag and drop or filter based on his/her needs. What I need to know is that is there an ability to save the changes a user makes to the grid so that the next time he logs in, he can directly see the customized grid instead of making the changes all over again.
thanks.
One possible way I can think of.
On Grid Events like group, select, sort fire a function that will collect grid properties as
JSON object
[{
sortable: true,
group : columnName,
OrderBy: asc
}]
call a event function
build a setting JSON object
Make a Ajax post to customer table
update gridSettings varchar(Max) field with the JSON object you built.
next time when customer logs in load grid properties from the field.
I have an ASP.NET MVC application with a topic page that shows a list of posts. A user can 'subscribe' to any topic, and I want this to be achieved via clicking on an image, to toggle their subscription on/off. The change in their subscription status needs to be reflected via the change in this image (illuminated image when they're subscribed, greyed out image when they're not).
The image will be rendered via CSS (I'm using a sprites.png file for this and will just specify 'subscribe-on' or 'subscribe-off' as the class name for the anchor/image tag).
My experience with AJAX under MVC is extremely limited, so am hoping that someone can recommend how to best achieve this? I understand the general concept of how it might work (I could use jQuery to bind an ajax call to the click event of the image, which performs the server-side operation, then I essentially want to change the class assigned to that image (to 'subscribe-on' if the user is now subscribed etc.) but I'm not familiar with the underlying code to achieve it.
I would also ideally like to toggle the title text of the anchor tag that wraps the image, so it prompts the user to either 'click to subscribe' or 'click to unsubscribe'.
Like you said, the steps you need are:
Bind to click event on image http://api.jquery.com/click/
Make ajax request to update data on server http://api.jquery.com/jQuery.post/
Handle ajax request on server.
Change class of image in callback function http://api.jquery.com/toggleClass/
Change title of image in callback function http://api.jquery.com/attr/
Example:
$('#subscribeimg').click(function() {
var that = $(this);
var id = // get id for topic
$.post('controller/action', { id: id }, function() {
that.toggleClass('subscribe-off subscribe-on');
that.attr('title', that.hasClass('subscribe-on') ? 'click to unsubscribe' : 'click to subscribe');
});
});
JS Fiddle Example without Ajax
MVC:
public ActionResult Subscribe(int id)
{
// Update database to subscribe/unsubscribe
}
What would be the easiest way to have the color of a text field in an ASP .NET MVC form changed according to a value just entered BEFORE form submission.
The color to be used is returned by a DB query.
For example:
The query returns Red if the number enter in the field is lower then the Quantity registered for the item in the DB.
Thanks
You can do it like in the example below, using jQuery :
//bind a function to the blur even of the text field
$("#the-imput-control").blur(function () {
var value = this.val();
//send the value to the server and then process the result.
$.getJSON("yourUrl", { key: value }, function(data) {
//return a json object with a property "color"
//and use its value to set the text field's color
$("#the-imput-control").css("color", data.color);
});
//you can of course use another ajax function depending on your needs.
});
You would like to have an event onclick for the submit button or on changing the quantity to retrieve the quantity of the product.
You can also load a color in the beginning but the stock may change during the user's input.
For example
User loads an order form, quantity in stock: 4, maybe you set the color to orange because it's low...
user fills out the form, some other users order 3 in total, 1 is left in stock
user would like to order 2 items.
user clicks on submit, you have your event checking the quantity and display a message/change the color of textbox
As I understood you would not have a postback if the amount in db is lower than the amount ordered.... but consider that users may not have javascript turned on, you should also implement in server side.
Personally I would just do it on server side, because on client side is just an extra functionality which you cannot rely on.
If it doesn't impose any security risk, it would be best to cache the available quantity for the products, instead to go to the server for validation. This way, the UI will be more responsive - and the user experience will be better. So, basically,
// JS
var availableQuantities = [10, 15, 30];
$(".the-imput-control").blur(function () {
var value = $(this).val();
var productIndex = $(this).parent().children().index(this); // sort of
$(this).toggleClass('invalid', (availableQuantities[productIndex] < value));
});
// CSS
.invalid { color: red; }