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.
Unfortunately, activation email could not send to your email. Please try again.

trying to get rowIndex and columnIndex when new column is selected

Thread ID:

Created:

Updated:

Platform:

Replies:

128767 Feb 9,2017 07:50 PM Feb 16,2017 01:56 AM ASP.NET MVC 7
loading
Tags: Grid
lawrence greenberg
Asked On February 9, 2017 07:50 PM

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 [Syncfusion]
Replied On February 10, 2017 02:37 AM

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. 


lawrence greenberg
Replied On February 10, 2017 08:35 PM

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 [Syncfusion]
Replied On February 13, 2017 03:38 AM

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. 


lawrence greenberg
Replied On February 13, 2017 08:36 AM

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 [Syncfusion]
Replied On February 14, 2017 07:38 AM

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
Replied On February 15, 2017 09:50 AM

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 [Syncfusion]
Replied On February 16, 2017 01:56 AM

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


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.

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.

;