I am trying to insert bootstrap in the dropdown list using Razor's #Html.DropDownListFor() in MVC but I didn't get the right answers(I searched for some answers but there they used form-control as the class) I want to use dropdown as a class in bootstrap but didn't get it. So hoping to get the answers here.
I am trying to get bootstrap for select tag
I believe there is no default style by Bootstrap for select tag. Refer boostrap-select do the code change as below.
#Html.DropDownListFor(m => m.Id, Model.Values, new { #class = "selectpicker" })
Related
I'm working with Select2 js(version 4.0.3) with ASP.NET MVC.
I have added reference of js and css files on Layout page.
<script type="text/javascript" src="~/js/select2.min.js"></script>
Here is my view page code where I'm using it.
<div class="col-sm-9">
#Html.DropDownListFor(m => m.PlatformIds, (MultiSelectList)ViewBag.Platforms, new { #class = "form-control select2", #multiple = true })
</div>
For instance, platforms having data like Vitro, Nop and Woo.
When user select any option, it sort in alphabetical order by default.
How can we stop that alphabetical order?
I have seen same issue over here: In multi-select, selections do not appear in the order in which they were selected
But don't know where to fix, as I'm using min js file.
I am trying to implement a very simple grid with ability to add a new row via a toolbar button. None of the samples provided in the documentation seem to work as expected.
#model Models.MyModel
#{
ViewBag.Title = "Simple Grid";
}
<div class="container-fluid">
<div class="row"></div>
<div class="row">
<div class="col-xs-11">
#(Html.Kendo().Grid<Models.MyModel>()
.Name("myGrid")
.ToolBar(toolbar => {
toolbar.Create().Text("Add New Row");
})
.Columns(columns => {
columns.Bound(p => p.Name).Width(200);
columns.Bound(p => p.Header1).Width(100);
columns.Bound(p => p.Header2).Width(100);
})
.Scrollable()
.Editable(ed => ed.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
.HtmlAttributes(new { style = "height:350px;" })
.DataSource(ds => ds
.Custom()
.Schema(schema => schema
.Model(model => {
model.Id("Id");
model.Field("Name", typeof(string));
model.Field("Header1", typeof(string));
model.Field("Header2", typeof(string));
})
)
)
)
</div>
</div>
</div>
The above is in a simple index.chtml page which uses a layout page and injects all the jQuery and KendoUI scripts.
When the page is loaded get a JS error Unable to get property 'nodeName' of undefined or null reference
Not sure why that happens, but hitting continue, displays an empty grid as expected.
Clicking the "Add new Row" toolbar button results in another JS error (same as above)
Question:
Am I missing a configuration option on the grid? Per documentation, this is supposed to work "out of the box". All I want to achieve is a simple grid which adds a new empty row everytime I click the "Add" button.
While it can be a bit tough to see at first, using the Custom() configuration requires more than just setting the .Schema() configuration. You can refer to samples in in the Custom DataSource documentation article for references to this. Every sample has at least the Transport field defined with a read configuration set so that the DataSource knows where to read the data.
Since you're doing CRUD operations here I also recommend that you set the other transport fields (Create, Read, Update, Destroy) to ensure that you can work with your controller and communicate with your backend properly.
As a quick note, if you search around the Telerik site for the error unable to get property 'nodeName' of undefined or null reference you start to get the hint that this error is due to an incorrect configuration of a component. It's not specific to the Grid, but it does pop up from time-to-time and the issue almost always boils down to configuration options.
Now, to fix this particular issue I'd recommend working with Ajax binding rather than custom binding. Ajax binding is super simple to work with and is perfect for this kind of scenario where you want a simple Grid added to the page without the more advanced configuration that comes from working with a more advanced feature. Plus you can work with your client-side model to set up validation etc., for your server-side (no need to set the schema manually).
Or, alternatively just set the transport field configuration to valid ActionResults or URLs to push information back and forth properly.
When first implementing any new product I always recommend following documentation closely and starting off with the smaller examples and building form there. If you're looking to work with a custom data source then I say start with a bigger configuration and remove pieces until you get the minimal piece that you're looking for.
MVC 5.2.2
Razor 3.2.2
Kendo MVC UI v2014.2.903
In Javascript, when I want to change the placeholder text of a ComboBoxFor, I thought I could do:
#model MyNameSpace.Models.Address
#(Html.Kendo().ComboBoxFor(model => model.ZipCode)
.Placeholder("Select Zip...")
.DataTextField("Text")
.DataValueField("Text")
.Suggest(true)
.BindTo(Model.MailCodes)
)
the javascript I use....
$("#Address_ZipCode").data("kendoComboBox").options.placeholder = "Select Postal...";
But this doesn't seem to affect the dropdownlist placeholder text at all.
What's the correct way do do this?
Here is my Kendo UI JSFiddle:
http://jsfiddle.net/devfingers/qy85emc8/5/
The awesome people at Telerik helped me:
$("#Address_ZipCode").data("kendoComboBox").input.attr("placeholder", "Select Postal...");
I have a question regarding using bootstrap combobox plugin in conjunction with knockout (and mvc).
I have a situation where I am using out of box MVC html helpers like Dropdownlisfor, textboxfor, etc in my template. I am using Knockout to bind a collection of data to the template. The mvc html helpers create a 'select' control for the DropDownlistfor helper. I need this to be rendered before I want to call my bootstrap plugin on the control so that all the necessary validation attributes, etc are set up. I initially used afterrender and in that method, I found the 'select' control and called the plugin on it.
Our issue is we dont want to do this every time we have to use the bootstrap combobox control in a similar way somewhere else. So, I have been researching about Custom Bindings (which I should have done already in the first place) and had a question about how I can use custom bindings in my stuation.
I found this article where he created a custom binding for bootstrap typeahead control. I can make a similar one to that for combobox. But I can only call it after the control is rendered. So, is there a way for us to specify KO to only perform custom binding "afterrender" instead of right away. That way, the select control is rendered and I can then call the plugin in the custom binding over the select control.
Here is some more info.
I have a table which uses a template
<table>
<tbody data-bind='template: {name: "editorRowTemplate", foreach: rules, afterRender: function(data) {{$root.view.templateRendered(data) } }'> </tbody>
</table>
I have the template which is similar to this
<script id="editorRowTemplate" type="text/html">
<tr class="dataRow" data-bind="attr: { id: 'EditorRow' + $index() }">
<td>
<div class="editor-field">
#Html.KnockOutDropDownListFor(rule => ruleTemplate.ReserveWordId, new List<SelectListItem>(), null,
new { #class = "combobox", data_bind = "options: $root.ReserveWords, optionsText:'Name', optionsValue:'ReserveWordId', attr : {id: $index(), name: $index()}" }, ((int)this.Model.Prefix).ToString())
#Html.KnockOutValidationMessageFor(rule => ruleTemplate.ReserveWordId, "*", new { data_bind = "attr : { 'data-valmsg-for': $index()}" }, ((int)this.Model.Prefix).ToString())
</div>
</td>
</tr>
</script>
I have my own html helpers (KnockoutDropDownListFor, etc) which generate a select control with specified KO bindings.
Please suggest what would be a good way to go about it.
Let me know if you need more info.
I'm not sure I fully understand the question. However you do not need to worry about waiting for the MVC helpers to render because this will happen server side and the knockout stuff will happen client side.
You also can use $(document).ready(function() {...}); if you want to make sure the DOM has loaded before doing anything.
I've found myself working on a .Net MVC3 project and sorely missing having Formtastic available in my rails apps.
Are there any good .Net MVC replacements for Formtastic?
I suggest using MVC3s HTML Helpers.
#model mynspace.MyModel
#Html.EditorForModel()
This html helper generates editor fields for every field in your model, choosing the most likely option. Editing the Editor template, you can change the way it is layed out as well. See this question on changing the template
It can of course be used more customizable by each field with things like:
#Html.Label("Daily Rate")
#Html.EditorFor(model => model.DailyRate)
#Html.ValidationMessageFor(model => model.DailyRate, "Please enter a valid Daily Rate (2 d.p.)")
This can be custom layed out by putting tags around it, i.e. things like <p> or <td>
You can also force an input type using options like:
#Html.TextBoxFor(model => model.DailyRate)
#Html.CheckBoxFor(model => model.DailyRate)
#Html.DropDownBoxFor(model => model.DailyRate, ViewBag.DailyRates)
see here for a full list of options
I have a project called FormFactory that lets you do much of the stuff formastic does http://formfactory.apphb.com/
It transforms model objects into PropertyVm objects, which are a viewmodel for an input basically. You could manually create the PropertyVms if you want.