trying to get rowIndex and columnIndex when new column is selected

[lawrence greenberg]

I have the following view containing a grid.  I click on different cells but nothing happens.  Can you tell me what I'm doing wrong?  thank you.

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

                           .Datasource((System.Data.DataTable)ViewBag.dataSource)

                           .ClientSideEvents(evt => evt.RowSelected("OnRowSelected"))

                 .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("No").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add();

                col.Field("Name").EditType(EditingType.String).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 2)).Add();

                col.Field("Email").EditType(EditingType.String).ValidationRules(v => v.AddRule("email", true).AddRule("minlength", 4)).Add();

                col.Field("PersonGender").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.dropData).Add();

                col.Field("DOB").EditType(EditingType.Datepicker).Add();

                col.Field("Active").EditType(EditingType.Boolean).Add();

            }

         )

         

         .ClientSideEvents(eve => eve.ColumnSelected("ColumnSelected")))

<div id="red" style="color:red;">Color=red</div>

<script>

    function ColumnSelected() {

        $target=$(sender.$target);

        var gridObj = $("#FlatGrid").d("ejGrid")

        var rowIndex = gridObj.model.selectedRowIndex;

        var columnIndex  = gridObj.model.selectedColumnIndex;

        $("red").text("row: " + rowIndex + "  col: " + columnIndex);

Attachment: firstgrid2_dae55c62.zip

[Ramdhas Ueikattan]

Hi Lawrence, 

Thanks for contacting Syncfusion supports. 

We have analyzed your reported issue and we suspect that using selection mode as incorrect. Please find the details about grid selection. 

     By default the grid enable the Rowselection , if you want change the selection mode by using ‘SelectionMode’ property of Grid. Please find the code example. 

[Column selection] 

 

             .SelectionSettings(selection => selection.SelectionMode(mode => { mode.AddMode(SelectionMode.Row); 

                 mode.AddMode(SelectionMode.Column);}))) 

.ClientSideEvents(eve => { eve.ColumnSelected("ColumnSelected")})//column selected event is trigger when column selection is enabled 

 

 

 

 

[cellSelection] 

             .SelectionSettings(selection => selection.SelectionMode(mode => { mode.AddMode(SelectionMode.Row); 

                 mode.AddMode(SelectionMode.Column);}))).ClientSideEvents(eve =>{eve.CellSelected("cellSelected");})//cellSelected event is trigger when cell selection is enabled 

 

[RowSlection] 

ClientSideEvents(eve =>{eve.RowSelected("RowSelected");})//by default rowselection is enabled  

Please find the sample for your reference. 

http://www.syncfusion.com/downloads/support/directtrac/general/FIRSTG~2-52529050.ZIP 

In that given sample row selection was set default and you can change the selection mode by using the following code snippet 

. . . 

.ClientSideEvents(eve => { eve.ColumnSelected("ColumnSelected"); 

                 eve.CellSelected("cellSelected"); 

             }) 

             .SelectionSettings(selection => selection.SelectionMode(mode => { mode.AddMode(SelectionMode.Row); 

                 mode.AddMode(SelectionMode.Column);}))) 

 

. . .  

 

<script> 

$("#cell").ejButton({ 

        click: function () { 

 

//enable column and cell selection dynamically 

 

            $("#FlatGrid").ejGrid({ selectionSettings: { selectionMode: ["cell","column" ] } }); 

        } 

    }); 

. . . 

</script> 

Documentation link: 

https://help.syncfusion.com/aspnetmvc/grid/selection 

Please refer the below Document link for handling selection event  

https://help.syncfusion.com/api/js/ejgrid#events:cellselected 

https://help.syncfusion.com/api/js/ejgrid#events:columnselected 

https://help.syncfusion.com/api/js/ejgrid#events:rowselected 

    function ColumnSelected(arg) { 

        $("#red").text( "col: " + arg.columnIndex); 

    } 

    function OnRowSelected(arg) 

    { 

        $("#red").text("row: " + arg.rowIndex ); 

    } 

    function cellSelected(args) 

    { 

        $("#red").text("columnIndex :" + args.cellIndex + "RowIndex :"+ args.selectedRowCellIndex[0].rowIndex ); 

    } 

Regards, 

Ramdhas U. 

[lawrence greenberg]

Hi Ramdhas,

Thank you for your reply.  I tried to raise an event for row change and left out SelectionSettings as you indicated but  I cannot get the rowSelected event to fire.  I also tried the SelectionSettings for column as you suggested but the columnSelected event doe not fire either.  (column selected event code is not shown).

source is attached.  I deleted contents of bin directory to reduce the size of the zip file

Thank you for your attention to this.

Larry Greenberg

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

                                           .Datasource((System.Data.DataTable)ViewBag.dataSource)

                                           .ClientSideEvents(evt => evt.RowSelected("OnRowSelected"))

                                 .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("No").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add();

                                col.Field("Name").EditType(EditingType.String).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 2)).Add();

                                col.Field("Email").EditType(EditingType.String).ValidationRules(v => v.AddRule("email", true).AddRule("minlength", 4)).Add();

                                col.Field("PersonGender").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.dropData).Add();

                                col.Field("DOB").EditType(EditingType.Datepicker).Add();

                                col.Field("Active").EditType(EditingType.Boolean).Add();

                            }

                         )

                         //.SelectionSettings(selection => selection.SelectionMode(mode => { mode.AddMode(SelectionMode.Column); }))

                         .ClientSideEvents(eve => { eve.RowSelected("RowSelected");}))

<div id="red" style="color:red;">Color=red</div>

<script>

    function OnRowSelected(arg) {

        $("#red").text("row: " + arg.RowSelected);

    }

</script>

Attachment: FirstGrid_2ae07937.zip

[Saravanan Arunachalam]

Hi Lawrence, 

We have analyzed your provided code example and the cause of the issue is that the RowSelected event handler name is mismatched. So, we suggest you to use the same handler name in both declaration and definition and refer to the below code example and also refer to the below online documentation link. 

  //Both Highlighted word should same. 

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

             . . . 

             //Enable row and column selection 

             .SelectionSettings(s =>  

             s.SelectionMode(m =>  

             {  

                 m.AddMode(SelectionMode.Column); 

                 m.AddMode(SelectionMode.Row); 

             } 

         )) 

             .ClientSideEvents(eve => { eve.RowSelected("OnRowSelected").ColumnSelected("OnColumnSelected"); })   ) 

 

function OnRowSelected(arg) { 

        $("#red").text("row: " + arg.RowSelected); 

 

    } 

function OnColumnSelected(args) { 

        //To do your functionality 

    } 

 

https://help.syncfusion.com/aspnetmvc/grid/selection  

Note: In your sample code, you have declare the RowSelected event in two times. So, that the handler name is replaced by recent declaration of your sample.i.e “OnRowSelected” is replaced by “RowSelected”. 

Regards, 

Saravanan A. 

[lawrence greenberg]

Hi Saravanan,

Thank you for your response.  Unfortunately,  it seems that you analyzed source code other than what I sent on 2/10.  There is no disagreement among the references to the event name.  all refer to rowSelected.  Please see the following.  I hope you can determine the problem.  

Thank you very much for your help.

Larry Greenberg.

@*@model FirstGrid.Models.Person

    @using FirstGrid.Models*@

@{

    ViewBag.Title = "Home Page";

}

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

                                           .Datasource((System.Data.DataTable)ViewBag.dataSource)

                                           .ClientSideEvents(evt => evt.RowSelected("OnRowSelected"))

                                 .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("No").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add();

                                col.Field("Name").EditType(EditingType.String).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 2)).Add();

                                col.Field("Email").EditType(EditingType.String).ValidationRules(v => v.AddRule("email", true).AddRule("minlength", 4)).Add();

                                col.Field("PersonGender").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.dropData).Add();

                                col.Field("DOB").EditType(EditingType.Datepicker).Add();

                                col.Field("Active").EditType(EditingType.Boolean).Add();

                            }

                         )

                         //.SelectionSettings(selection => selection.SelectionMode(mode => { mode.AddMode(SelectionMode.Column); }))

                         .ClientSideEvents(eve => { eve.RowSelected("RowSelected");}))

<div id="red" style="color:red;">Color=red</div>

<script>

    function OnRowSelected(arg) {

        $("#red").text("row: " + arg.RowSelected);

    }

</script>

[Saravanan Arunachalam]

Hi Lawrence, 

We understood from your query, you have a problem on triggering the RowSelected event of Grid control.  

In your project, you have specified the RowSelected event two times with different handler name and that first event handler name override by the last specification. i.e You have specified the RowSelected event with handler name OnRowSelected and RowSelected like the below code example. 

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

              //If you used two different name for the same event then the first name will overwrite by the second name of the event 

             .ClientSideEvents(evt => evt.RowSelected("OnRowSelected")) 

              . . . 

             

             .ClientSideEvents(eve => { eve.RowSelected("RowSelected"); }) 

   ) 

 

   

And the event handler name OnRowSelected will be overwitten by the name RowSelect and that the name is not match with event definition which is the cause of the issue. So, we suggest you to use previously provided update to trigger the RowSelected event correct manner. 

And we suspect that you have expect to trigger the RowSelected event when enable column selection mode. The row selection mode is default which mean no need to specify and you can’t perform the row selection when enable column selection mode. So, we suggest you to enable both (column and row) selection mode to select the row and columns. Please refer to the below code example. 

@(Html.EJ().Grid<Person>(“FlatGrid”) 

             . . . 

             //Enable row and column selection 

             .SelectionSettings(s => 

                 s.SelectionMode(m => 

                 { 

                     m.AddMode(SelectionMode.Column); 

                     m.AddMode(SelectionMode.Row); 

                 } 

             )) 

    ) 

 

Regards, 

Saravanan A. 

[lawrence greenberg]

Hi Saravanan,

I finally was able to get the row and col indices.  Thank you for your help.  I appreciate it!

Lawrence Greenberg

[Isuriya Rajan]

Hi Lawrence
 
We are happy that the provided solution working fine at your end.
 
Regards, 

Isuriya R