I've got a MVC5 page with 2 links / buttons and 1 Grid. Due to some dynamic display problems I cannot have more than 1 grid, so I'm changing the binding of the grid to show either Company Info or Company Income.
That works great.
Now I've got an export control that will call function ExportData in my Controller, but for the function to know which data set to export, I need to tell which data is currently bound. Because the jquery is client-side and razor is server-side, I'm having some difficulty in telling razor the current value.
So I've added a parameter called 'typeOfContent', but how can I populate the value of this? In other words, in the code below, I want to add something where the ???? is (either CompanyInfo or CompanyIncome).
I don't think Razor will be able to read the value of the hidden HTML control?
Not sure how else I can tell ExportData which type of data is currently visible
#model int
Show Info
Show Income
....
#Html.Hidden("TypeOfContent", "Temp");
#using (Html.BeginForm("ExportData", "MyController",
new { CompanyID = Model, typeOfContent = ???? },
FormMethod.Post))
{
<div id="MyGrid">
#{Html.RenderAction("MyPartial", "MyController", new { CompanyID = Model});}
</div>
}
....
<script>
$(function () {
bindCompanyInfo();
$('#btn-link1').on('click', function (e) {
bindCompanyInfo();
$('#TypeOfContent').val("CompanyInfo");
})
$('#btn-link2').on('click', function (e) {
bindCompanyIncome();
$('#TypeOfContent').val("CompanyIncome");
})
function bindCompanyInfo() {
...
};
}
function bindCompanyIncome() {
...
};
}
I think this can allow you to set and reset the value with javascript and post ok.
#model int
Show Info
Show Income
....
#using (Html.BeginForm("ExportData", "MyController", FormMethod.Post))
{
#Html.Hidden("TypeOfContent");
#Html.Hidden("CompanyID", Model);
<div id="MyGrid">
#{Html.RenderAction("MyPartial", "MyController", new { CompanyID = Model });}
</div>
}
Related
I have used MVC kendo grid and I have bind the dropdown to grid. Now I have to get the dropdownchange event to populate other grid items by using dropdown selection.
columns.ForeignKey(c => c.CountryID, (SelectList)ViewBag.Countries).Title("Select Country");
$("#ddlTables").change(function () {
//You will get change event here
//Add debugger here and see
//Do your code here
});
columns.ForeignKey(c => c.CountryID, (SelectList)ViewBag.Countries,new {#id = "ddlCountry"}).Title("Select Country");
Here is the code replace this with your code and try to do your stuff and if still facing issue let me know
You can do it using an editor template as follows.
change the column as follows
columns.Bound(c => c.CountryID).Title("Country").EditorTemplateName("Countries").Width(300);
after that create a partial view inside views/shared/EditorTemplates with name Countries as follows
#using System.Collections
#(Html.Kendo().DropDownList()
.DataValueField("COUNTRYNAME")
.DataTextField("COUNTRYNAME")
.Name("CountryID")
.BindTo((IEnumerable)ViewBag.Countries)
.OptionLabel("Select Country")
.Filter(FilterType.Contains)
.Events(e =>
{
e.Change("CountryChange");
})
)
After this you can write jquery as follows
<script>
function CountryChange()
{
//You will get change event here
}
I'm quite new to angular and wanted to know how to make it so i can have 1 page that you put the info you want to filter in the table and when you press "search" it will lead you to the second page where you see the table after its filtered.
i my question is odd but i really couldn't find any answer how to do this online.
I cant share code as its confidential to my work.
Something that looks like this site : https://maerskcontainersales.com/
I have tried using mock data but still couldn't put my head into the right thing to do.
There can be multiple ways how you can achieve this.
Using Provider
Suppose you have two pages and , serach-page is where you will enter your filters and result-page is where the table renders.
In search-page, you will create inputs( ex: textbox, dropdown etc ) and have ngModels for all of them, or you can use Angular reactive forms i.e FormGroup and FormControls. Users will select their input and click on search button, which will read values from models or controls and store them in the provider.
search-page.component.html
<form [formGroup]="searchForm" (submit)="search()">
<input formControlName="country" />
<input formControlName="city" />
...
<input type="submit">
</form>
search-page.component.ts
export class SearchPage {
...
search() {
const country = this.searchForm.get('country').value
...
// get rest of the values
...
this.searchService.setData({ country, city });
this.router.navigate(['/result']); // '/result' is path on the result-page
}
...
}
search.service.ts
#Injectable()
export class SearchService {
_data : any;
set data(val) {
this._data = val;
}
get data() {
return this._data;
}
}
result-page.component.ts
export class ResultPage {
...
ngOnInit() {
const filters = this.searchService.getData();
// filters will be your data from previous page
}
...
}
Using RouterParams
search-page.component.html
// same as before
search-page.component.ts
export class SearchPage {
...
search() {
const country = this.searchForm.get('country').value
...
// get rest of the values
...
this.router.navigate(['/result', { country, city }]); // '/result' is path on the result-page
}
...
}
result-page.component.ts
export class ResultPage {
...
constructor(route:ActivatedRoute) {
this.country = route.snapshot.paramMap.get("country")
// alternatively you can also do below
route.paramMap.subscribe(filters => {
// you will have your filters here
});
}
...
}
And once you have values of filters in result-page, use them to get data or filter data if already fetched, then render the table accordingly.
Let me know if I wasn't clear.
The simple solution I would suggest you to use a filter component and a results component a third container component. This component will get the filter criteria as an input variable and will output the filter criteria (using an output variable) when you press the "filter" button.
The container app will look like this:
<filterComponent (onFilter)="changeFilter($event)" [data]="someDate" *ngIf="!filterCriteria"></filterComponent>
<resultsComponent [data]="someDate" [filterCriteria]="filterCriteria" *ngIf="!!filterCriteria"></resultsComponent>
The filterCriteria that is sent to the second tableComponent will come from the eventEmmiter of the first tableComponent. The filterCriteria variable will be initiate to null and this will allow you to switch from one table to the other.
I try since one hour or more to change the localization of the date column filter type language. And I can't.
Here what I have :
On my _Layout : kendo.culture("fr-FR");
And when I load a page (anywhere on the app) :
But in the filter combo :
What is happening and what am I missing ?
Edit :
I forgot to say that the date filters are the only ones with this problem, string and number filters are correct.
You need to load in the French version of the Kendo message script file:
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/messages/kendo.messages.fr-FR.min.js"></script>
Sample Dojo
EDIT
Dojo updated with date example.
NOTE: Date filter options are also in the specified language.
Found it !
I don't understand what exactly is the problem here...
I load the good culture file, number and string filters are ok, but not the date.
But in the kendo settings I have the good so...
$(document).ready(function () {
$(".k-grid").each(function () {
var grid = $(this).data("kendoGrid");
if (grid) {
grid.bind("filterMenuInit", onFilterMenuInit);
}
});
});
function onFilterMenuInit(e) {
if (this.dataSource.options.schema.model.fields[e.field].type === 'date') {
var filters = new Array();
var raw = kendo.ui.FilterMenu.prototype.options.operators.date;
for (var property in raw) {
if (raw.hasOwnProperty(property)) {
filters.push({ value: property, text: raw[property] });
}
}
e.container.find("select:eq(0)").data("kendoDropDownList").dataSource.data(filters);
}
}
I have some code, where when the user clicks on the "x" icon then call the CancelPendingQuote action method passing along the requestId in the requestUrl. The action method is hitting but the value is not included in the requestIdEncrypted parameter, thus the action method parameter has a null value.
Pending List
#using (#Html.BeginForm("CancelPendingQuote", "Quote", new { requestIdEncrypted = request.RequestIdEncrypted }, FormMethod.Get, new { enctype = "multipart/form-data", #id = "removeRequest" }))
{
<span data-bind="click: function(data, event){ userWarning_Dialog('#removeRequest_dialog', event); }">
<img src="~/Areas/Waybill/Content/Images/Normal_Size/posta_delete_20px.png" />
<img src="~/Areas/Waybill/Content/Images/Normal_Size/posta_delete_mouseover_20px.png" style="display:none" />
</span>
}
Knockout userWarning function that submits the form. This is called when image "x" is clicked.
removeRequest: function (model, event)
{
var form = $("#removeRequest").closest("form");
$(form).submit().error(function (messageObj) {
// if fail return error message
$(".information-bar").trigger("ErrorText", messageObj.message);
});
$("#removeRequest_dialog").dialog("close");
},
Action method
[Authorize]
public ActionResult CancelPendingQuote(string requestIdEncrypted)
{
int requestId = Convert.ToInt16(Decryption.Decrypt(requestIdEncrypted));
_controllerContent.QuoteService.Value.CancelPendingQuoteRequest(requestId);
return RedirectToAction("Dashboard");
}
Any Ideas?
There's a couple things here. For one, you need to make sure that the names of the object being posted to the server match up with the Controller's parameter. For instance, if you send this Javascript object up:
{ requestIdEncrypted: "exampleString" }
or
{ requestIdEncrypted: viewModel.requestId() }
then your Controller method should accept the input.
Secondly, from your code it's not evident to me how the data is being posted. $(form).submit().error(function (messageObj) is a little confusing: is this line responsible for submitting the form? Is it a function that would be called if the form submission is unsuccessful? Is it working? It's not clear to me what you're trying to do with this. You may have to figure out another way to attach an error handler to the form, if this is what you're trying to do - unless it's working alright.
I have a leftMenu section where I want to display 4 menus which are categorized by each subject. Every menu is a list and I want them to be displayed in the same View. I created 4 JSON files and to each one of them a Collection and a Model.
Usually i do it like this, first i define in router
this.mainMenuCollection = new MainMenuCollection();
this.mainMenuView = new MainMenuView({el:'#nav', collection:this.mainMenuCollection});
So, now I have these 4 collections defined in the router which I want in one view:
this.allcategoryMenuCollection = new AllCategoryMenuCollection();
this.natcategoryMenuCollection = new NatCategoryMenuCollection();
this.intcategoryMenuCollection = new IntCategoryMenuCollection();
this.topcategoryMenuCollection = new TopCategoryMenuCollection();
usually i render the collection in the View like this:
$(this.el).html(this.template({mainmenu:this.collection.toJSON()}));
Please help
Send in the collections as an object when you create your view:
this.mainView = new MainView({
el:'#nav'
});
this.mainView.collections = {
allcategoryMenuCollection: this.allcategoryMenuCollection
natcategoryMenuCollection: this.natcategoryMenuCollection
intcategoryMenuCollection: this.intcategoryMenuCollection
topcategoryMenuCollection: this.topcategoryMenuCollection
}
Access your collections inside the view by calling this.collections.collectionName
This may not seem like a semantically accurate way to do it, but to take advantage of backbone automatically assigning the model and collection properties in options, I do this:
var view = new MyView({
collection: {
comments: new CommentsCollection(),
images: new ImagesCollection()
}
});
Works for me. Otherwise you have to put a line in the initialize function to extend this, or use a base class. Personally I find this more elegant, even if it's missing a couple of pluralised properties.
Then, later on, you can use this.collection.comments.toJSON() for your template properties.
There's nothing wrong with housing a number of sub-views within an outer view. Your outer view could be something as simple as this. If you need to wait for all of your collections to be fetched before you render you could try:
var MyView = Backbone.View.extend({
initialize : function (options) {
var done, collections = options.collections;
done = _.invoke(collections, 'fetch');
$.when.apply($, done).done(this.onDataReady);
},
onDataReady : function () {
// Make a second pass at render after setting the flag.
this.ready = true;
this.render();
},
render : function () {
if(this.ready === true) {
// Now render the whole lot.
} else {
// Any non-data depending rendering.
}
}
});
Then you can either initialize the outer view and pass an array of collections in:
var view = new MyView({
collections: [...]
});
If you don't need all the collections to have fetched their data before hand it's even simpler. Just pass in the collections array and set them up as you need:
var MyView = Backbone.View.extend({
initialize : function (options) {
this.collectionA = options.collections[0];
},
render : function () {
}
});