I 'm using the webdatagrid v11.1 and need to do a validation. I have created a datatable and bind it to a webdatagrid wich generate all the columns needed.
But some cells are left blank, so I want to make a validation using this event: SelectionClientEvents-CellSelectionChanging to find if the new cell has content, if it has no content, cancel the selection, else the selection will continue.
This is the aspx code for webdatgrid
<ig:WebDataGrid ID="wdgCalendario" runat="server" Height="350px" Width="100%">
<Behaviors>
<ig:Activation Enabled="true" ActivationClientEvents-ActiveCellChanging="OnActiveCellChanging" />
<ig:Selection RowSelectType="None" CellClickAction="Cell" Enabled="true" CellSelectType="Single" SelectionClientEvents-CellSelectionChanging="OnCellChanging" SelectionClientEvents-CellSelectionChanged="OnCellChanged"></ig:Selection>
<ig:RowSelectors></ig:RowSelectors>
</Behaviors>
</ig:WebDataGrid>
And I hva no idea how this validation can be done via javascript.
Hi jcvegan,
Thank you for posting in our forum.
I would suggest that you handle the CellSelectionChanged client side event of the grid. You could use code, similar to the following to check if the selected cell is empty and deselect it, if it is:
function WebDataGrid1_Selection_CellSelectionChanged(sender, eventArgs) {
//gets the selected cell
var selectedCell = eventArgs.getSelectedCells().getItem(0);
//gets the value of the cell
var cellValue = selectedCell.get_value();
//if the value is null remove the selected cell from the selected cells collection
if (cellValue == null) {
sender.get_behaviors().get_selection().get_selectedCells().remove(selectedCell);
}
Please let me know if this helps.
Works like a charm! thanks!
I would suggest setting an !important declaration of the background property in order this style to override the default style:
.Custom1
{
background: #E01B1B !important;
color: #FFFFFF;
Works fine! Thanks... Just another question... when autogenerating the columns on the webdatagrid is there a way to intercept this generation and asign width for each column or some other operations?
Hello jcvegan,
The columns collection of WebDataGrid does not contain any autogenerated columns. However, you could access and modify such columns client-side. One possible approach would be to handle the Initialize client-side event of the grid. For example:
function initializeGrid(sender, args) {
sender.get_columns().get_column(0).set_width("50px");
If you have any further questions, please feel free to contact me.
And if I want to fix that generated column?
I'm not sure what you mean by fixing the column. Could you please clarify the question?
Thanks
I wanted to set the columnfixing behavior dynamically by javascript.... but you reply too late I have already done.
function OnInitialize(sender, e) {
var columnFixing = sender.get_behaviors().get_columnFixing();
if (columnFixing != null) {
columnFixing.fixColumnByKey("Mes", $IG.FixLocation.Left);
columnFixing.fixColumnByKey("DeudaSoles", $IG.FixLocation.Right);
columnFixing.fixColumnByKey("DeudaDolares", $IG.FixLocation.Right);
Thank you for sharing your code with the community.
If you have any other questions, please let me know.
Nikolay is there any way to diplay a tooltip when the mouse pointer is over a cell?
If this is possible, how might it be done?
You could set the Tooltip property for the grid cells in the InitializeRow event:
protected void WebDataGrid1_InitializeRow(object sender, Infragistics.Web.UI.GridControls.RowEventArgs e)
e.Row.Items[0].Tooltip = "Tooltip";
You could also create simple tooltip client-side in the Initialize client-side event handler. For example:
function initGrid(grid, args) {
var rows = grid.get_rows();
var rowCount = rows.get_length();
var cellCount = rowCount > 0 ? rows.get_row(0).get_cellCount() : 0;
for (var r = 0; r < rowCount; ++r) {
var row = rows.get_row(r);
for (var c = 0; c < cellCount; ++c) {
var cell = row.get_cell(c);
var cellEl = row.get_cell(c).get_element();
cellEl.title = cell.get_text();
Let me know if this helps.
Hi Nikolay,
I've started using the WebDateTimeEditor ti use it for filter some information... But what I want is somefilter like Star Date and End Date filter... this using javascript.. The validation dependes on a selected year from a webdropdown list, min date can not be higher than the max date and viceversa.
Is there any way to set this up on javascript... I post it on the forum of editors last week and no reply, so I ask it to you.
Thanks for the answers.