We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Searching column values, disable tool bar, validations

Thread ID:

Created:

Updated:

Platform:

Replies:

142867 Feb 23,2019 07:54 AM UTC Feb 25,2019 11:59 AM UTC ASP.NET MVC 1
loading
Tags: Grid
sateesh kumar
Asked On February 23, 2019 01:20 PM UTC

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 [Syncfusion]
Replied On February 25, 2019 11:59 AM UTC

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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon