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...");
Related
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.
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" })
How can I configure a kendo ui grid with asp.net mvc to display a checkbox?
At the moment I just see true/false values...
Use Client template for that column. Somethigs like
columns.Bound(c => c.BooleanColumn).ClientTemplate("<input type='checkbox' #= BooleanColumn ? checked='checked' : '' # disabled='disabled' ></input>");
It appears that my Kendo UI window feature to allow for close, minimize or maximize does not work at all.
I can resize, and expand it using drag, but clicking on either of the 3 buttons icons does not work.
Here is my basic setup on the cshtml file
#{Html.Kendo().Window()
.Name("window")
.Title("Update user")
.Actions(actions => actions
//.Custom("custom")
.Minimize()
.Maximize()
.Close()
)
.Content(#<text>
fun sample
</text>)
.Draggable()
.Resizable()
.Width(600)
.Visible(false)
.Modal(true)
.Render();
}
All other Kendo UI features work, such as tabstrip and grid.
Is there a possibility of crippleware being applied to the current Kendo app I am using?
According to the Telerik site for the account I am using, the DevCraft Complete license has expired.
Or is it the case of not importing the correct kendo links in the _layout.cshtml page?
Many thanks for your help,
RC
I am making my first steps with KendoUI for MVC. I have a very simple model that reads a table "Products" from the database and passes it to the view as a strongly type model.
I am using the Model to bind it to the autocomplete to get the suggested values. This works almost fine. This is done using the following Razor syntax:
#(Html.Kendo().AutoComplete()
.Name("productAutoComplete")
.DataTextField("Name")
.BindTo(Model)
.Filter(FilterType.StartsWith)
.Placeholder("Select the product")
.Suggest(true)
)
The problem that I have is that the dropdown list that has the suggestions for the autocomplete appears on top of the textbox itself (instead of right below it).
Please see the image below without typing anything in the autocomplete field:
And with the autocomplete in action:
Do you have any suggestions?
Thanks in advance,
Lefteris
I have overcome the problem by using the latest jQuery library (1.9.1) instead of the one shipped with KendoUI (1.7.1).
I am still not sure why this was not working with 1.7.1 (it is ok with 1.9.0+).
In any case KendoUI latest version (Q1 2013) ships with 1.9.1 jQuery. Unfortunatelly this doesn't seem to be available yes as a trial for KendoUI Complete for ASP.NET MVC
I hope this solution helps someone else.
Lefteris