I have a Django 4.0 model that includes some TextField fields. These are displayed in large text box in the corresponding admin form. How do I reduce the displayed size of a text field in a django admin form, e.g. to just one row?
I have tried setting the widgets dictionary on the form with a Textarea that has the number of rows and cols explictly set, as listed below. However this does not seem to work?
Model
class Product(models.Model):
"""
Product
"""
id = models.PositiveBigIntegerField(primary_key=True)
attributes = models.TextField()
Form and admin
class ProductForm(forms.ModelForm):
class Meta:
model = Product
exclude = ("id",)
widgets = {
"attributes": Textarea(attrs={"cols": 30, "rows": 1})
}
#admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
list_per_page = 10
form = ProductForm
You are missing "forms." before calling the widget...
Change:
widgets = {
"attributes": Textarea(attrs={"cols": 30, "rows": 1})
}
To:
widgets = {
"attributes": forms.Textarea(attrs={"cols": 30, "rows": 1})
}
(Not tested) Hope this helps :-)
Related
Some of my columns are not editable but I want all of the columns to display in the add form.
I was thinking that I can use the "beforeShowForm" event and call a javascript function that will dynamically change the column attribute back to editable so they will show up in the add form.
The typical approach for this is to make fields generally editable and hide them in edit dialog.
You can hide/show fields by looking for table rows which ids are being built like this:
tr_ColumnName
So in case you would have UserName column the id would be like this:
tr_UserName
Assuming you are using jQuery, you can wire-up this to your Lib.Web.Mvc configuration like this:
.Navigator(new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorOptions() { ... },
editActionOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorEditActionOptions()
{
...
BeforeShowForm : "function(form) { $('#tr_UserName', form).hide(); }"
},
addActionOptions: new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorEditActionOptions()
{
...
BeforeShowForm : "function(form) { $('#tr_UserName', form).show(); }"
}
);
I figured how to use the event beforeShowForm.
Note: I have a using statement at the top of the view, so do not need to use the full namespace
#using Lib.Web.Mvc.JQuery.JqGrid
Here is an example within the Navigator form:
.Navigator(new JqGrid.JqGridNavigatorOptions()
{ Add = true, Edit = false, Delete = false, Search = false },
null,
addActionOptions: new JqGridNavigatorEditActionOptions()
{
Url = Url.Action("Add"),
BeforeShowForm = "function () {$('#bob').jqGrid('setColProp',
'Place', {editable:true})
})
I have a Grid which has edit set to Popup.
In my grid model, I have defined a field level validation for uniqueness like below. How can I know which is the currently select row so I can avoid comparing my field value with the same row's value?
model: {
id: "id",
fields: {
id: {
nullable: false,
editable: false,
hidden : true
},
"timeStamp": {
type: "date",
validation: { // validation rules
required: true, // the field is required
unique: function (input) {
if (!input.is("[name=timeStamp]")) {
return true;
}
input.attr("data-unique-msg", '${msg.UNIQUE_TIME}' );
var data = grid.dataSource.data();
//HOW CAN I KNOW WHICH ROW Is currently selected?
I am also working with custom validators on a Kendo Grid Popup Window. I used the following code to obtain the model:
var m = $(input).closest('.k-popup-edit-form').data('kendoEditable').options.model;
I prefer this mechanism because I don't have refer to the grid object, making the code more portable from page to page.
Maybe a little tricky solution but it should work... Each record in a DataSource has a Unique Id assigned by Kendo UI. These uid, for popup editing is used in the window in such a way that Kendo UI can easily identify the record being edited without having to save the state. You should do the same.
Your function just need to do:
var uid = $(input).closest(".k-popup-edit-form").data("uid");
var item = grid.dataSource.getByUid(uid);
Now, item contains all the fields of the record being edited.
I am new to kendo ui grid development.
I have a requirement where I want to display data in kendo ui grid.
I am able to bind the data to kendo grid using java-script.
This is how I did it.
(document.getElementById(divId)).kendoGrid({
columns: cols,
dataSource: data,
change: onChange,
selectable: "multiple",
//selectable: "multiple cell",
schema: {
model: {
id: "ID"
}
}
}).data("kendoGrid");
The data is displayed in the grid.
Now, I want to create a blank first column in the grid that will display a image. How can I do this. The grid is bound to data dynamically. I have not specified any hard coded columns. All columns are created dynamically.
Please anyone can tell me on this.
You will have to explicitly define the columns because:
You want to add a columns that is not in the model.
The content of the column is an image that is not a KendoUI basic type that can be inferred from the model definition.
Said so, you have to add a column that is something like:
var cols = [
// Your other columns
...
{
title :"Image",
template: "<img src='my_image.gif'/>"
},
// More columns
...
];
In addition you might need to use an image that is not a constant but depending on the content of a column. Then you might do:
var cols = [
// Your other columns
...
{
title: "Status",
template: "# if (status) { # <img src='ok.gif'/> # } else { # <img src='nak.gif'/> # } #"
},
{
title : "Photo",
template: "<img src='#= image #'/>"
}
// More columns
...
];
Where depending on the value of field in your model called status I display the image ok.gif or nak.gif. Or directly use the content of the field image for generating the URL to the image being displayed.
Check here for an overview on KendoUI templates.
I have a dropdownlist of car brands:
#Html.DropDownListFor(
model => model.Brand,
new SelectList(
new List<Object>{
new { value = "Opel" , text = "Opel" },
new { value = "Lada" , text = "Lada" },
new { value = "BMW" , text = "BMW"}
},
"value",
"text"
As you can see, i was too lazy for making any classes, and thies code at the View.
How can i make a second dropdownlist: with car models ? I mean that user selects "Opel" and then can select "Corsa" or "Vectra" but not "X6" or "2110" ?
Looking for the most simple way to do it.
You want to make a cascading dropdown, probably using ajax.
This tutorial was almost made perfectly for you (car themed)
http://stephenwalther.com/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx
Below is the Javascript code used.
google.load("elements", "1", {packages : ["newsshow"]});
function loadNews(newsQuery)
{
//Load the news feed according to the topic selected
var options =
{
"format": "300x250",
"queryList" :
[
{
"title" : newsQuery,
"q" : newsQuery
}
]
}
var content = document.getElementById('content');
var newsShow = new google.elements.NewsShow(content, options);
}
The newsAddress value is a text box value entered by user. And based on the textbox value, the div element 'content' gets updated with a new element.
My problem is, every-time when I enter a value in text box (newsAddress), a news item in 'content' element is getting inserted one below the other. My requirement is to update the same news element based on the new search criteria.
How can this be done?