ClientSideEvents Not working

[Rizwan]

HI,

I have facing ===.ClientSideEvents(eve => eve.RowSelecting("rowSelecting")=== problem.

When the page renders page show me error this error

Compiler Error Message: CS1061: 'GridBuilder<object>' does not contain a definition for 'ClientSideEvents' and no extension method 'ClientSideEvents' accepting a first argument of type 'GridBuilder<object>' could be found (are you missing a using directive or an assembly reference?)

Otherwise, all working fine without this event.

What I'm missing.

Please check the error in a snapshot in my code its showing error.

I'm working this framework

MVC 5, EJ2

Thank you

[Rajapandi Ravi]

Hi Rizwan, 

Greetings from syncfusion support 

From validating your query, we could see that you like to bind the event in EJ2 Grid. And from validating your shared screenshot we found you are binding the Grid event like EJ1 Grid. In EJ2 Grid we have binded the events like the below way, So we suggest you to follow the below way to achieve your requirement. Please refer the below code example and documentation for more information. 

Index.cshtml 

@Html.EJS().Grid("DialogEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 

{ 

       .  .  .  .  .  .  .  

       .  .  .  .  .  .  . 

 

}).AllowPaging().RowSelecting("RowSelecting").PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

 

<script> 

    function RowSelecting(args) { 

          //bind you events like this 

      } 

</script> 

 

Triggers before the row is being selected

EJ1 Event: RowSelecting @(Html.EJ().Grid<object>("Grid") .Datasource((IEnumerable<object>) ViewBag.dataSource) .ClientSideEvents(eve =>{ eve.RowSelecting("rowSelecting");})) Script: <script> function rowSelecting(){} </script>

EJ2 Event: RowSelecting @Html.EJS().Grid("Grid") .DataSource((IEnumerable<object>) ViewBag.dataSource) .RowSelecting("rowSelecting") .Render() Script: <script> function rowSelecting(){} </script>

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/ej1-api-migration/ 

Regards,
Rajapandi R

[Rizwan]

Thank you, 
it's working fine.

One more issue,

By Default button outside of the grid is disabled when I click the row the button is enabled it's not working, my script is this please look at this

My requirement is by default button is disabled when I click the grid row the external button is enabled with a checkbox (col.Type("checkbox") grid column

<button type="button" id="btnDisabled" class="btn btn-sm rebot-blue radius-btn" disabled><span class="rebot-custom-icon icon-arrow-small-27 small"></span>Disabled</button>

<div class="row">

                <div class="col-xs-12">

                    @{

                        var DeptList = new Syncfusion.EJ2.DropDowns.DropDownList()

                        {

                            DataSource = ViewBag.dropdowndata,

                            Query = "new ej.data.Query()",

                            Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "value", Text = "text" },

                            AllowFiltering = true,

                            Placeholder = "Please Select",

                            FilterBarPlaceholder = "Search"

                        };

                        List<object> commands = new List<object>();

                        commands.Add(new { type = "Edit", tooltipText = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });

                        //commands.Add(new { type = "Delete", tooltipText = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });

                        commands.Add(new { type = "Save", tooltipText = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });

                        commands.Add(new { type = "Cancel", tooltipText = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });

                        List<object> cols = new List<object>();

                        cols.Add(new { field = "OrgpsLastlogDt", direction = "Ascending" });

                    }

                    @Html.EJS().Grid("PracticeStaffGrid").DataSource(dataManager => { dataManager.Url("/Billing/UrlDatasource").UpdateUrl("/Billing/Update").RemoveUrl("/Billing/Delete").InsertUrl("/Billing/Insert").Adaptor("UrlAdaptor"); }).ShowColumnChooser(true).AllowTextWrap().AllowSorting(true).AllowFiltering(true).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).Height(320).ActionComplete("actionComplete").RowSelected("rowSelected").Columns(col =>

                    @*@Html.EJS().Grid("PracticeStaffGrid").DataSource((IEnumerable<object>)ViewBag.griddatanew).ShowColumnChooser(true).AllowTextWrap().AllowSorting(false).AllowFiltering(true).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).Height(320).Columns(col =>*@

                    {

                        col.Type("checkbox").ShowInColumnChooser(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("50").CustomAttributes(new { @class = "org_grid_header" }).Add();

                        //col.Field("OrgpsId").HeaderText(" ").Type("boolean").DisplayAsCheckBox(true).ShowInColumnChooser(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("50").CustomAttributes(new { @class = "org_grid_header" }).Add();

                        //col.AllowFiltering(false).AllowSorting(false).ShowInColumnChooser(false).Field("OrgpsId").HeaderText(" ").IsPrimaryKey(true).Template("#templateCheckbox").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("30").CustomAttributes(new { @class = "org_grid_header" }).Add();

                        col.Field("OrgpsName").IsPrimaryKey(true).HeaderText("Name").Width("180").CustomAttributes(new { @class = "org_grid_header" }).ValidationRules(new { required = "true", minLength = 15 }).Add();

                        col.Field("OrgpsEmail").HeaderText("Email").Width("180").CustomAttributes(new { @class = "org_grid_header" }).ValidationRules(new { required = "true", email = "true" }).Add();

                        col.Field("OrgpsAccess").HeaderText("Access").AllowFiltering(false).Width("120").ValueAccessor("DisplayDescription").EditType("dropdownedit").Edit(new { @params = DeptList }).CustomAttributes(new { @class = "org_grid_header" }).Add();

                        col.Field("OrgpsBusiness").HeaderText("Business").AllowEditing(false).Width("80").CustomAttributes(new { @class = "org_grid_header" }).Add();

                        col.Field("OrgpsLastlogDt").HeaderText("Last Login Date").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Format("dd-MMM-yyyy").Width("100").CustomAttributes(new { @class = "org_grid_header" }).Add();

                        col.Field("OrgpsStatus").HeaderText("Status").Width("100").AllowEditing(false).CustomAttributes(new { @class = "org_grid_header" }).Add();

                        col.HeaderText("").Width("70").ShowInColumnChooser(false).Commands(commands).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).CustomAttributes(new { @class = "org_grid_header" }).Add();

                    }).AllowPaging().SelectionSettings(select => select.CheckboxMode(Syncfusion.EJ2.Grids.CheckboxSelectionType.ResetOnRowClick).Type(Syncfusion.EJ2.Grids.SelectionType.Single)).SelectionSettings(ss => ss.Mode(Syncfusion.EJ2.Grids.SelectionMode.Row)).PageSettings(page => page.PageSize(25).PageSizes(new string[] { "12", "25", "50", "100", "200" })).TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Both); }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).SortSettings(sort => sort.Columns(cols)).QueryCellInfo("tooltip").ActionFailure("actionFailure").Render()

                </div>

            </div>

<script>

    function rowSelected(args) {

        var gridObj = document

            .getElementById('PracticeStaffGrid')

            .ej2_instances[0]

        gridObj.getSelectedRecords();

        //alert("row index:" + args.row.getAttribute('aria-rowindex'));

        //alert("column index: " + args.target.getAttribute('aria-colindex'));

        $("#btnDisabled").prop("disabled", false);

        //$("#btnDisabled").removeClass("disabled");

    }

</script>

Thank you for your support

[Rajapandi Ravi]

Hi Rizwan, 

Thanks for the update 

From validating your query we could see that you like to enable/disable the button based on selecting/deselecting the row. Based on your requirement we have prepared a sample and achieve your requirement by using RowSelected and RowDeselected event of Grid. In this event we have changed the disabled property based on the selection. Please refer the below code example, sample and screenshot for more information. 

<button type="button" id="btnDisabled" class="btn btn-sm rebot-blue radius-btn" disabled><span class="rebot-custom-icon icon-arrow-small-27 small"></span>Disabled</button> 

 

<div class="control-section"> 

    @( 

         @Html.EJS().Grid<gridmvclocalization.Controllers.OrdersDetails>("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

         { 

             col.Type("checkbox").Width("50").Add(); 

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

             col.Field("CustomerID").HeaderText("Customer Name").Width("100").Add(); 

         }).AllowPaging() 

.RowSelected("selected") 

.RowDeselected("deselected").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).PageSettings(page => page.PageCount(2)).Render() 

    ) 

</div> 

 

<script> 

    var button = document.getElementById('btnDisabled'); 

    function selected(args) { 

        button.disabled = false; 

    } 

    function deselected(args) { 

        button.disabled = true; 

    } 

</script> 

Sample:  https://www.syncfusion.com/downloads/support/forum/155332/ze/15533215138284.zip 

API: https://ej2.syncfusion.com/documentation/api/grid/#rowselected 

        https://ej2.syncfusion.com/documentation/api/grid/#rowdeselected 

Screenshot: 

 

Regards,
Rajapandi R

[Rizwan]

Thank you for support
its working  fine

[Rajapandi Ravi]

Hi Rizwan, 

We are happy to hear that our suggested solution was working fine from your end. 

 

Please get back to us if you need further assistance. 

Regards,
Rajapandi R