My grid is able to be edited. When a user clicks and selects a row, the label disappears and an input shows up. My client would like the input to show up all the time to give their staff instant visual indication that certain columns are editable rather than having them click on them first.
How would I achieve this?
Hello Daniel,
I can suggest you using RowTemplate for the purpose.
You can use input field for the editable columns (ModifiedDate and List Price)
<td data-key='${ModifiedDate}'><input value ='${ModifiedDate}'/></td>
<td data-key='${ListPrice}'><input value ='${ListPrice}'/></td>
Please take a look at the code snippet below.
<%= Html.Infragistics().Grid(Model).ID("grid2").Height("500px").PrimaryKey("ProductID") .AutoCommit(false) .Columns(column => { column.For(x => x.ProductID).Width("150px"); column.For(x => x.Name).Width("200px"); column.For(x => x.ModifiedDate).Width("200px"); column.For(x => x.ListPrice).Width("150px"); }).Features(features => { features.Sorting(); features.Updating(); }) .GenerateCompactJSONResponse(false) .RowTemplate("<tr><td> ${ProductID} </td><td class='editableField'>${Name}</td><td data-key='${ModifiedDate}'><input value ='${ModifiedDate}'/></td><td data-key='${ListPrice}'><input value ='${ListPrice}'/></td> </tr>") .DataSourceUrl(Url.Action("EditingGetData")) .UpdateUrl("EditingSaveChanges") .DataBind() .Render() %>
.AutoCommit(false)
.Columns(column =>
{
column.For(x => x.ProductID).Width("150px");
column.For(x => x.Name).Width("200px");
column.For(x => x.ModifiedDate).Width("200px");
column.For(x => x.ListPrice).Width("150px");
}).Features(features => {
features.Sorting();
features.Updating();
})
.GenerateCompactJSONResponse(false)
.RowTemplate("<tr><td> ${ProductID} </td><td class='editableField'>${Name}</td><td data-key='${ModifiedDate}'><input value ='${ModifiedDate}'/></td><td data-key='${ListPrice}'><input value ='${ListPrice}'/></td> </tr>")
.DataSourceUrl(Url.Action("EditingGetData"))
.UpdateUrl("EditingSaveChanges")
.DataBind()
.Render() %>
Let us know if you need further assistance.
A good step in the right direction! A few things I've noticed:
- Column templates are voided whenever a row template is specified. Bummer. Oh well this isn't a showstopper. I can retrofit my column templates into the row templates.
- My inputs don't look like the ones that the igGrid generates when you click on it. What style is used on the inputs whenever the row is selected to edit? Developer tools in IE isn't showing the input styles.
Also how do I edit the style of the selected row? For instance, I need the text to be right aligned because they are displaying decimals. When the row isn't being edited, everything looks great. The moment I choose to edit the row, it shifts the content to the upper left. As if the valign on the table row/cell went from middle to top.
I was able to pull the style but when I try to manually style the input, it looks all distorted and it doesn't fit inside of the cell. It actually floats outside of the cell.
How do I get the input, styles and all to look exactly like the input when you are editing while the row is not in editing mode? Can you provide a sample with all of the styles so any themes cover them?
Thanks!