How to define the columns in CRUD grid? - vaadin

I need to define which columns shall appear and their order in the CRUD grid.
If I use crud.getGrid().setColumns(...) then the edit column does not appear. If I include vaadin-crud-edit-column in the list then I get an exception cause this column does not exist (but I see it there!).
If I remove the un-needed columns (lot of trouble anyway!) I still can't change the column sequence.
Is there some way to sort this out?

For adding edit column to the Grid in Crud there is a helper method Crud.addEditColumn(grid) You can also use this method to add your edit column as a first column or last column depending how you configure the Grid.
private void customGrid() {
Grid<Person> grid = new Grid<>(Person.class);
Crud<Person> crud = new Crud<>(Person.class, grid, createPersonEditor());
PersonDataProvider dataProvider = new PersonDataProvider();
crud.setDataProvider(dataProvider);
grid.setColumns("firstName","lastName");
Crud.addEditColumn(grid);
add(crud);
}

Related

Is there a way to enable row editing on only new added rows within a Kendo grid?

So I have a standard Kendo grid in MVC with 2 non-editable columns. What I would like to achieve is to enable editing of all columns only within the newly added rows.
Example: There's 4 rows already in the grid, first 2 columns non-editable. User clicks "Add new", a new record appears in the grid with everything editable.
Try adding an editable function handler to your column definition, something like this:
{
field: "salary",
editable: function (dataItem) {
return dataItem.isNew();
}
}
Please note: you will need to have specified an id column in your model definition for this to work, for details see isNew documentation:
Checks if the Model is new or not. The id field is used to determine if a model instance is new or existing one. If the value of the field specified is equal to the default value (specified through the fields configuration) the model is considered as new.

Dynamic display of labels using thymeleaf

I am using Thymeleaf and have a requirement of displaying labels dynamically based on database hit.
Suppose we have a column "Race" in our database and table name is "Table1" and the corresponding entity name is "Table1". When user access the html page (home.html) which will hit the table and return the values of field "Race". So if table has 2 values then 2 labels would get display on the page with the values on them and if there are 3 values then 3 labels respectively. I need a Thymeleaf or js code to implement this.
Please help and thanks in advance.
First of all you need proper controller:
#RequestMapping("/home")
public String showHome(Model model) {
List<Table1> list = //Invoke method to get proper rows from db for example use Spring CRUD Repository
model.addAttribute("list", list);
return "home"
}
Inside of your HTML put:
<label th:each="entity: ${list}" th:text="${entity.race}"></label>

Creating Drop down list for a column which is defined as an Int in the SQL database - jqGrid ASP.NET MVC

I am using Entity Framework Database First approach in ASP.NET MVC.
I have created models from an existing database and everything works fine.
I am using jqGrid and trying to create a drop down list for a column which is defined as an Int in the database.
In the database, the values are either 0 or 1, so in the dropdown list I will have to show two values such as "Import" or "Export" based on whether it is 0 or 1.
Would I be able to handle this scenario in the jqGrid?
Please post any suggestions if you have!
I think you can handle this thing in colModal itself. there's is one option editOption you can specify with you colModal and based on the value you are getting from data you can specfy the text property of that column
In this case, the data for the grid should contain “One” or “Two” to be set in the column myname.
Now, with this setting
<script>
jQuery("#grid_id").jqGrid({
...
colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]
...
});
</script>
the data should contain the keys (“1” or “2”), but the value (“One”, or “Two”) will be displayed in the grid.
check this link for further help. You will get your answer. Because you didn't post your code(atleast you should have done that for ur that particular column) i can not say you are implementing the same way.

How to set a column to be sorted on page load dynamically using DataTables.net?

Iam using Asp mvc. I have this table,which is a dataTables,
in my page, columns of the table sometimes appear or not, depending on the users authotrization.
e.g i have this table with checkbox(it appears dynamically and is on the left-most column), that i want to be not sortable.
i also wanted to sort the first column in the left on default.
So whether, checkbox appears or not, i want the first non-check box column to be sortable.
Is this possible?.
I know this question has been here for long, hopefully you got it resolved.
I am not sure I get it clearly, but my advise is that you look at this page for ideas on how you can control sorting using datatables.net:
http://www.datatables.net/release-datatables/examples/advanced_init/sorting_control.html
If you use one of the DataTools you can even control which columns show or give users the opportunity to select the columns they want to see.
Look at the examples here:
http://www.datatables.net/examples/
By this code you can sort individual columns on datatables by adding class 'sort-desc' or 'sort-asc' for sorting ascending and descending on page load
$('.dom-table').each(function(index) {
var sort_column=$('.dom-table thead tr').children().index('.sort-desc');
var sort_oper='desc';
if(sort_column < 0)
{
var sort_column=$('.dom-table thead tr').children().index('.sort-asc');
sort_oper='asc';
if(sort_column < 0)
{
sort_column=0;
}
}
$(this).dataTable({
"sDom": 'T<"clear">lfrtip',
"aaSorting": [[sort_column,sort_oper]],
});
});
I have not tested this code but it should work.

Sending custom values on save and update using Telerik Grid

I have a Telerik grid in my asp.net mvc application that looks something like:
Now it lists all the regions in a zone selected from the list placed just above the grid. zoneid is foreign key in the grid. Now I want that when I add new region in the grid the zoneID should be taken from the list instead of what is present in zone column of the grid because that value is just to display the zone and that can also be removed from the grid as it as apparent from the list which zone the listed regions belong to.
I understand that I could have used editor templates to show this list inside the grid on edit but I prefer it to be outside the grid and provide some filtering on basis of the zone as we are likely to have many regions per zone. so my concern here, now, is how can I set ZoneID of a region (edited or newly added) equal to selected value of list that shows just above the grid control.
When you click on the AddNewRecord button, why don't you set the Value of your zone equals to the zoneId selected in the combobox value ?
I've done something a little similar, but I had to get the value from a Treeview.
private void btnAddContact_Click(object sender, EventArgs e)
{
Int64 companyId = Int64.Parse(treeCompany.SelectedNode.Name);
dsSociete.ContactRow newContact = dsSociete.Contact.NewContactRow();
newContact.SocieteId = societeId;
dsSociete.Contact.AddContactRow(newContact);
}
And once i add a new Contact, it gets automatically its Company (Societe is Company in French) set.
I did it in Winform, but I guess you can do the same in Web?
I solved this problem by hooking the onSave event of Telerik grid like
<%
Html.Telerkik.Grid<xyz.company>()
.Name("name")
.// other properties
.Events(even=>even.onSave("onSave")
.Render();%>
Inside onSave event handler in JS I have written something like
function onSave(e)
{
var data = e.values;
data["companyID"] = $("#CompanySelectList").val();
e.values = data;
return true;
}
onSave event adds the companyID at companyID index of json that will be submitted to the server and modelbinder will bind it with concerning property name of model.

Resources