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. Image for the cookie policy date

trying to get rowIndex and columnIndex when new column is selected

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

7 Replies

RU Ramdhas  Ueikattan Syncfusion Team February 10, 2017 07:37 AM UTC

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. 


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: 



Please refer the below Document link for handling selection event  


    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. 



LG lawrence greenberg February 11, 2017 01:35 AM UTC

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


SA Saravanan Arunachalam Syncfusion Team February 13, 2017 08:38 AM UTC

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 
    } 
 
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. 



LG lawrence greenberg February 13, 2017 01:36 PM UTC

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>



SA Saravanan Arunachalam Syncfusion Team February 14, 2017 12:38 PM UTC

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. 



LG lawrence greenberg February 15, 2017 02:50 PM UTC

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


IR Isuriya Rajan Syncfusion Team February 16, 2017 06:56 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon