Skip to content

Infragistics Community Forum / Web / Ignite UI for jQuery / Input validation in iggrid

Input validation in iggrid

New Discussion
Stanislas Mauser
Stanislas Mauser asked on Jun 23, 2015 2:00 PM

Exist there any option to easily validate the values changed in an igGrid? For example, if my model contains a "description" field with a maximum length of 50, so that in the grid I only can insert 50 characters (or an error message occurs).

For single editor controls I found this: http://igniteui.com/editors/data-annotation-validation

Such validation I need for the iggrid, exists there anything?

Simple example of my model:

public class SubTopicLocal
{
   [Required]
   public int SubTopicID { get; set; }

   [StringLength(10, ErrorMessage = "Error message abc …")]
   public string Description { get; set; }
}

Simple example of my View:

@(Html.Infragistics()
   .Grid(Model)
   .ID("grid")
   .Height("100%")
   .Width("100%")
   .AutoGenerateColumns(false)
   .AutoGenerateLayouts(false)
   .RenderCheckboxes(true)
   .PrimaryKey("SubTopicID")
   .TemplatingEngine(GridTemplatingEngine.JsRender)
   .Columns(column =>
   {
      column.For(x => x.SubTopicsLocalCopy.First().SubTopicID).HeaderText("SubTopic ID");
      column.For(x => x.SubTopicsLocalCopy.First().Description).HeaderText("Description");
   })
   .Features(feature =>
   {
      feature.Updating().ColumnSettings(cs =>
      {
          cs.ColumnSetting().ColumnKey("SubTopicID").ReadOnly(true);
          cs.ColumnSetting().ColumnKey("Description").Required(true).Validation(true);
      });
      feature.Sorting();
      …
      …
   })
   .DataSourceUrl(Url.Action("GetSubTopicsLocal"))
   .UpdateUrl(Url.Action("SubTopicLocalSaveData"))
   .DataBind()
   .Render()
)

As like in the posted link, I need that by editing the (for example) "description", the iggrid validate the input, in this case that the length is smaller than 50. How can I do this? Analog to the validation with:

@Html.ValidationMessageFor(x => x.Description, ""new { @class = "text-danger" })
Sign In to post a reply

Replies

  • 0
    Vasya Kacheshmarova
    Vasya Kacheshmarova answered on Jun 17, 2015 4:20 PM

    Hello Stanislas,

    Thank you for posting in our community.

    What I can suggest is setting a validator to your igGrid column and setting it`s maxLength property to 50. This property gets/sets maximum length of the text or maximum number of selected items. In order to set a validator for a particular column you should add column setting in the columnSettings collection in the Updating feature.  For example:

    
    

      @(Html.Infragistics().Grid(Model)
      .ID("grid1")
      .Height("700px")
      .AutoGenerateColumns(false)
      .PrimaryKey("ProductID")
      .Columns(col =>
    {
        col.For(c => c.ProductID).HeaderText("ProductID");
        col.For(c => c.Name).HeaderText("Name");
        col.For(c => c.ReleaseDate).HeaderText("ReleaseDate");
    })
    .Features(features =>
    {
        features.Updating().EditMode(GridEditMode.Row).ColumnSettings(cs => {
            cs.ColumnSetting().ColumnKey("Name").TextEditorOptions(o => o.ValidatorOptions(vo=> vo.MaxLength(10)));
        });
      
    })
    .DataSourceUrl(Url.Action("GetData"))
    .Render())

    I made a small sample and I am attaching it for your reference. In my sample I am adding a validator for the "Name" column and I am setting it`s maxLength to 10 symbols. If you enter a name longer than 10 symbols the validation message appears under the edited cell.

    Please have a look at my application and let me know if you have any questions afterwards.

    @(Html.Infragistics().Grid(Model)

    .ID("grid1")

    .Height("700px")

    .AutoGenerateColumns(false)

    .PrimaryKey("ProductID")

    .Columns(col =>

    {

    col.For(c => c.ProductID).HeaderText("ProductID");

    col.For(c => c.Name).HeaderText("Name");

    col.For(c => c.ReleaseDate).HeaderText("ReleaseDate");

    })

    .Features(features =>

    {

    features.Updating().EditMode(GridEditMode.Row).ColumnSettings(cs => {

    cs.ColumnSetting().ColumnKey("Name").TextEditorOptions(o => o.ValidatorOptions(vo=> vo.MaxLength(10)));

    });

    })

    .DataSourceUrl(Url.Action("GetData"))

    .Render())

    • 0
      Stanislas Mauser
      Stanislas Mauser answered on Jun 18, 2015 7:11 AM

      Hi Vasya, 

      Thanks for your answer, now I have understood this. Really good clear example.

      This could be an option, but is more effort in the realization and maintenance of this project. But I would prefer to define (as before) the "required" option or the "field length" in the Model (as in my example) and that the Validation on the View validate based on the model definition (like @Html.ValidationMessageFor(x => x.Description …) do this).

      Is there any possibility for this?

      Best regards,

      Stanislas

      • 0
        Vasya Kacheshmarova
        Vasya Kacheshmarova answered on Jun 18, 2015 10:03 AM

        Hello Stanislas,

        Thank you for getting back to me.

        Validation via the model is not going to work together with igGrid and I would recommend you using the standard igValidators. The reason is that this "Description" field is not directly bound to the igGrid. For example if you create a textbox and associate it to this field in the model this could be achieved. Even in this scenario the validation is going to be performed on submitting the form.

        I hope you find this information helpful.

        Please let me know if you need any further assistance with this matter.

      • 0
        Vasya Kacheshmarova
        Vasya Kacheshmarova answered on Jun 23, 2015 2:00 PM

        Hello Stanislas,

        I am glad that you find my suggestion helpful.

        Please let me know if you have any additional questions regarding this matter.

  • You must be logged in to reply to this topic.
Discussion created by
Favorites
Replies
Created On
Last Post
Discussion created by
Stanislas Mauser
Favorites
0
Replies
4
Created On
Jun 23, 2015
Last Post
10 years, 9 months ago

Suggested Discussions

Tags

Created by

Created on

Jun 23, 2015 2:00 PM

Last activity on

Jun 23, 2015 2:00 PM