MaskedEdit in Grid

[Matthias Max]

Hello,

is this possible? I need it for a Time column in Edit mode. Format: ##:##

Thank you!

[Matthias Max]

Anyone?

[Manickam Chidambaram]

Hi Matthias,

Thanks for your interest in Syncfusion Products.

We are sorry for the delay in getting back to you. Your requirement of masked edit in Grid can be done using Syncfusion “MaskedEditTextbox” inside the “InlineTemplateForm”. Please refer below code snippet.

[ASPX PAGE]

   Mask="##:## >?<>?<" PassivePromptCharacter="#" /> 

In the above code the mask value "##:## >?<>?<", ’#’ refers to Numeric Digit and ‘:’ refers to symbol literal and >?< refers to Uppercase letter.For example this mask accepts value like “12:30 PM”.

For your convenience we created a simple sample matching your requirement and the sample can be downloaded from following link.

http://www.syncfusion.com/uploads/redirect.aspx?&team=support&file=MaskEdit-1222241812.zip

Also we suggest you to refer the following link to know more about Grid Edit modes.

http://samples.syncfusion.com/ASPNET/8.3.0.21/Web/Grid.Grouping.Web/samples/3.5/CRUDOperations/EditingModes/cs/EditingModes.aspx?args=7

Please try using above sample and let us know if it helps.

Regards,
Manickam

[Matthias Max]

Hi Manickam,

thank you for the info. Is the Masked Edit Box only possible in InlineFormEdit Mode?
How to do it in normal row edit mode and creating the mask server side?

Had the samples checked already before.

Thanks
Matthias

[Matthias Max]

Hi,

I succeeded in adding a MaskedEdit to the EditItemTemplate of the column. The problem now is that the values or not being transfered from the table to the control when going into edit mode.

What do I have to do here?

Thanks!

[Manickam Chidambaram]

Hi Matthias,

Thanks for your update.

Your need of getting the value for the MaskEditTextbox inside the EditItemTemplate can be achieved by setting the “Text” property of the MaskEditTextbox using Container.StyleInfo.Text. Please refer below code snippet.

[ASPX page]

In the MaskEditTextbox textchanged event, the current record value is modified based on MaskEditTextbox value. Please refer below code snippet.

[Code Behind-C#]

protected void MaskedEditTextBox1_TextChanged(object sender, EventArgs e)
{        
    MaskedEditTextBox met= (MaskedEditTextBox)sender;
    //get the current record
    Record currec= this.GridGroupingControl1.CurrentTable.CurrentRecord;
    //set maskedittextbox value to the current record  “Dates” field value
    currec.SetValue("Dates", met.Text);
}

For your convenience, we created a sample. The sample can be downloaded from following link.

http://www.syncfusion.com/uploads/redirect.aspx?&team=support&file=MaskEdit-319481813.zip

Please try using above sample and let us know if it helps.

Regards,
Manickam

[Matthias Max]

Hi, thanks for this. What would the solution be if I add the editmasked dynamically on server side inside grdData_QueryCellStyleInfo like this:

Dim objMasked As MaskedEditTextBox = New MaskedEditTextBox
objMasked.Mask = "##:##"
objMasked.TimeSeparator = ":"
objMasked.PassivePromptCharacter = "#"
'objMasked.ont()
objMasked.Width = 60
objMasked.UsageMode = Syncfusion.Web.UI.MaskedUsageMode.Numeric
'objMasked.Value = e.TableCellIdentity.Column.

' ItemTemplate erzeugen
objItemTemplate = New ItemTemplate(objMasked)

' ItemTemplate zuweisen
e.TableCellIdentity.Column.EditItemTemplate = objItemTemplate



How does the value sending function then?

Thank you.

[Matthias Max]

I forgot: you need this class:

Public Class ItemTemplate
Implements ITemplate

Private _objChildControl As Control

Public Sub New(ByVal ChildControl As Control)
_objChildControl = ChildControl
End Sub

Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn
container.Controls.Add(_objChildControl)
End Sub

End Class

[Manickam Chidambaram]

Hi Matthias,

Thanks for your update.

Your requirement of adding the “MaskEditTextbox in EditItemTemplate” through server-side script can be achieved by creating the class for the EditItemTemplate which derives ITemplate class. This will create the MaskEditTextbox and bind the value corresponding to grid cell value. The edited value of MaskEditTextbox can be saved to current record field value through the MaskEditTextbox Textchanged event. Please refer the below code snippet.

[CodeBehind-VB]

Public Class MaskedEditTextTemplate Implements ITemplate
		Public Sub InstantiateIn(ByVal container As Control)
			'creating maskededittextbox and bind the values corresponding to grid cell value
			Dim meTextBox As MaskedEditTextBox = New MaskedEditTextBox ()
			meTextBox.DataBinding += (Function(sender, e)
				Dim cell As GridCellTemplated = TryCast(meTextBox.NamingContainer, GridCellTemplated)
				meTextBox.Mask = "##:## >?<>?<"
				meTextBox.PassivePromptCharacter = "#"c
				meTextBox.UsageMode = Syncfusion.Web.UI.MaskedUsageMode.Normal
				meTextBox.Text = cell.StyleInfo.Text
		   )
			'maskededittextbox textchanged event
			meTextBox.TextChanged += (Function(sender, e)
				Dim cell As GridCellTemplated = TryCast(meTextBox.NamingContainer, GridCellTemplated)
				cell.RowElement.GetRecord().SetValue(cell.ColumnDescriptor.MappingName, meTextBox.Text)
		   )
			container.Controls.Add(meTextBox)
		End Sub
End Class

In page load event, the object for this class is created and set to the required column GridColumnDescriptor’s EditItemTemplate property. Please refer below code snippet.

Dim gcd As GridColumnDescriptor = Me.GridGroupingControl1.TableDescriptor.Columns.GetColumnDescriptor("Dates")
Dim my_edititemtemplate As MaskedEditTextTemplate = New MaskedEditTextTemplate()
gcd.EditItemTemplate = my_edititemtemplate

Please note we suggest you to use page load event instead of gridquerycellstyleinfo event to achieve your need for better performance.

For your convenience we created a sample. For sample please refer the follwing link.
http://www.syncfusion.com/uploads/redirect.aspx?&team=support&file=maskedit_vb-338588235.zip

Please try using above code and let us know if any concerns.

Regards,
Manickam