Searching column values, disable tool bar, validations

[sateesh kumar]

Hi Team,

Am doing crud operation with java script successfully. 

few queries am not able to reach. before going my queries , my grid  always render if grid have data or not.

am assigning the data with java script based another drop down list changes.

by default(1st loading) my drop down  don't have any values. 

1. Need to show toolbar when drop down have any value.

     to achieve this am tried in java script in grid action complete event

     if ($("#cars").data("ejDropDownList").getSelectedValue() == undefined) {

            var gridObj = $("#GridParameters").ejGrid("instance");

            gridObj = gridObj.model.toolbarSettings.showToolbar = false;

        }     

     

2. While doing crud operations, few columns are mandatory.

      i want to handle , required columns are given or not before going to control.    

     i took reference  , https://help.syncfusion.com/aspnetmvc/grid/editing?cs-save-lang=1&cs-lang=js#custom-validation

          in the example, am not getting what's "Params". could you explain the both examples of in the link. 

          when am using parms in my java script, getting params is undefined. and after removing param am not getting expected result.

     

3. how can we disable save button on tool bar, once user click edit/add. after validation rules satisfy , need to enable save button again to save the data.

           

4. am not able to give the search settings ex:(column name, serach type). how can i achieve it.?

      i check the few examples ,its loading on java script. 

     my refer link : https://help.syncfusion.com/js/grid/search

 @(Html.EJ().Grid<object>("GridParameters").EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineFormTemplate).TitleColumn("ParameterName").InlineFormTemplateID("#template"); }) 

                            .AllowResizeToFit().AllowSorting().AllowPaging().PageSettings(page => page.PageSize(20)).IsResponsive()

                            .ToolbarSettings(toolbar =>

                            {

                                toolbar.ShowToolbar().ToolbarItems(items =>

                                {

                                    items.AddTool(ToolBarItems.Add);

                                    items.AddTool(ToolBarItems.Edit);

                                    items.AddTool(ToolBarItems.Delete);

                                    items.AddTool(ToolBarItems.Update);

                                    items.AddTool(ToolBarItems.Cancel);

                                    items.AddTool(ToolBarItems.Search);

                                });

                            })                            

                            .Columns(col =>

                            {

                                col.Field("Id").IsIdentity(true).IsPrimaryKey(true).Visible(false).Add();

                                col.Field("ParameterName").HeaderText("Parameter Name").TextAlign(TextAlign.Left).Width("20%").AllowEditing(true)

                                .ValidationRules(v => v.AddRule("required", true)).Add();

                                col.Field("ParameterValue").HeaderText("Parameter Value").TextAlign(TextAlign.Left).Priority(4).Width("50%").AllowEditing(true)

                                .ValidationRules(v => v.AddRule("required", true)).Add();

                                col.Field("LastChangedBy").HeaderText("Last ChangedBy").Width("15%").AllowEditing(false).Add();

                                col.Field("LastChangedDate").HeaderText("Last Changed Date").TextAlign(TextAlign.Left).Width("15%").Format("{0:dd-MMM-yyyy HH:mm:ss}").AllowEditing(false).Add();

                            }).ClientSideEvents(evt => evt.ActionComplete("complete").EndDelete("endDelete").EndEdit("endEdit").EndAdd("endAdd").BeginEdit("beginedit"))

                            )

Java script for Validation

    $(function () {

        $.validator.addMethod("required", function (value, element) {

            if (element.value.length == 0)

                return false;

            return true;

        }, "Please provide name");

       

    });

Thanks for the advance.

J. Sateesh Kumar

[Vignesh Natarajan]

Hi Sateesh, 

 

Thanks for contacting Syncfusion support.  

 

Query 1: Need to show toolbar when drop down have any value. to achieve this am tried in java script in grid action complete event 

 

Based on your query, we are able to understand that you want change the visibility of the toolbar. To achieve your requirement we suggest you to use the setModel method of ejGrid. Please refer the below solution, 

 

  <script type="text/javascript"> 

    if ($("#cars").data("ejDropDownList").getSelectedValue() == undefined)    { 

             var gridObj = $("#GridParameters").ejGrid("instance"); 

                 gridObj.option({toolbarSettings: { showToolbar: false }}) // using setModel method change the visibility of the toolbar. 

       }      

  </script> 

 

 

Query 2: While doing crud operations, few columns are mandatory. i want to handle , required columns are given or not before going to control.     

 

For checking the mandatory column, we can simple set the validation rule as required in the column definition itself. Refer the below code example, 

 

@(Html.EJ().Grid<Object>("FlatGrid") 

            …. 

            .Columns(col => 

              { 

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).ValidationRules(v => v.AddRule("required",true)).Add(); 

                ………….. 

            })) 

 

 

 

Query 2a: in the example, am not getting what's "Params". could you explain the both examples of in the link.  

 

The Params is nothing but the value which we pass in the validation rule. Refer the below code, 

 

 

$(function () { 

…………….. 

            $.validator.addMethod("customRegex", function (value, element, params) { 

                if (element.value.length == params) // the value 5 is compared with the entered text length 

                    return true; 

                return false; 

            }, "Customer ID must be 5 characters"); 

 

 

 

 

@(Html.EJ().Grid<Object>("FlatGrid") 

            .Datasource((IEnumerable<object>)ViewBag.DataSource) 

            .AllowPaging() 

            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 

            .ToolbarSettings(toolbar => 

               { 

                   toolbar.ShowToolbar().ToolbarItems(items => 

                   { 

                       items.AddTool(ToolBarItems.Add); 

                       items.AddTool(ToolBarItems.Edit);   

                       items.AddTool(ToolBarItems.Delete); 

                       items.AddTool(ToolBarItems.Update); 

                       items.AddTool(ToolBarItems.Cancel); 

                   }); 

               }) 

            .Columns(col => 

              { 

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add(); 

                col.Field("CustomerID").HeaderText("Customer ID").ValidationRules(v => v.AddRule("customRegex", 5)).Add(); // the value 5 is the params here. 

               …………. 

              })) 

 

 

 

 

Query 3: how can we disable save button on tool bar, once user click edit/add. after validation rules satisfy , need to enable save button again to save the data. 

 

Generally, if we enable the validation then the save action is not work until the validation rules satisfied. So, there is no need to enable and disable it. If we misunderstood your query, please get back to us with the detailed explanation. 

 

Note: The below validation script files are needed when editing is enabled with validation. 

 

1. jquery.validate.min.js
2. jquery.validate.unobtrusive.min.js

 

 

Query 4:  am not able to give the search settings ex:(column name, serach type). how can i achieve it.? 

 

We can define the searchSettings in the mvc application. Please refer the below code example, 

 

 

  @(Html.EJ().Grid("GridParameters") 

…………………….. 

                         .AllowSearching() 

                            .SearchSettings(search => 

                              { 

                                  search.Fields(field => 

                                   { 

                                       field.Add("UserID"); 

                                       field.Add("UserName"); 

                                   }); 

                                  search.Key("Alex"); 

                              })  

                            .Columns(col => 

                            { 

                                …………… 

                            ) 

 

          

 

 

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan.