How to get the selected row of iggrid

Hi,

am using the mvc4 razor control and my requirment is like that I have a panel above the grid and in that i have text boxes and dropdowns and when am going to click on grid row then that respective data need to bind with the panels controls means into the textboxex and dropdown. and my code is like that

@using Infragistics.Web.Mvc
@{
ViewBag.Title = “Index”;
}
@using Infragistics.Web.Mvc
@using System.Data
@*@model  Infragistics .Web.Mvc .GridModel*@
<!DOCTYPE html>
<html>
<head>

</head>
<body>
@(Html.Infragistics().Loader()
.ScriptPath(Url.Content(“~/Infragistics/js/”))
.CssPath(Url.Content(“~/Infragistics/css/”))
.Resources(“igHierarchicalGrid.*”)

.Render()

)
@(Html.Infragistics().Grid<System.Data.DataSet>()
.ID(“grid1”)
.Width(“100%”)
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)

.Features(features =>
{
features.Sorting().Type(OpType.Local).Mode(SortingMode.Single).Inherit(true);
features.Paging().PageSize(5).Type(OpType.Remote).Inherit(false);
features.Filtering().Type(OpType.Local).Inherit(true);
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
features.GroupBy().Type(OpType.Local).Inherit(true);
features.Hiding().Inherit(true);
})
.DataSource(Model)
.DataSourceUrl(Url.Action(“dataset-binding”))
.DataBind()
.Render()
)
</body>
</html>

and also let me know the solution to add the addclient event for gridmodel class.

Hello,

Thank you for contacting us.

About your question, you can handle activeRowChanged event which is fired after a row becomes active, and there to set values to input and dropDown for example:

28. $(document).delegate(“#rowSelectionGrid”, “iggridselectionactiverowchanged”, function (evt, ui) {
29.                 //return reference to igGridSelection object
30.                 ui.owner;
31.                 //return reference to row object
32.                 ui.row;
34.                 var name = $($(ui.row.element).find(“td”)[0]).text();
35.                 $(“#input1”).val(name);
37.                 var title = $($(ui.row.element).find(“td”)[1]).text();
38.                 $(“#select1 option[value='” + title + “‘]”).attr(“selected”, “selected”);
39.             });

Also I have created sample for you, in order to show you my approach.

http://jsfiddle.net/24xbm/2/

Other useful references:

IGNITEUI API REFERENCE

If there is something else that I could help you with, please contact me.

Thank you so  much.. now my problem is that i want to get the selected row values of child element..will you please give me ideas regarding this.

Hello Kanha,

If you are using igGridSelection you can do this in a couple of ways.

Please refer to the link below where you can find methods with which you can get the selected row/rows or selected cell/cells.

https://www.igniteui.com/help/api/2014.1/ui.iggridselection_hg#methods

SelectedCells – Returns an array of selected cells where every objects has the format {element: , row: , index: , rowIndex: , columnKey: }.

– Returns the currently selected row, if any. If multiple selection is enabled, will return null.

Another way is to access the html tr element and from there to get all values like:

$(document).delegate("#rowSelectionGrid", "iggridselectionrowselectionchanged", function (evt, ui) {
 //return reference to igGridSelection object
 ui.owner;
 //return reference to row object
 ui.row;
 //return reference to selected cells object array
 ui.selectedCells;
 
 if(ui.owner.grid.id().indexOf("child") >= 0)
 {
   var result = "";

   for(i = 0; i <= ui.row.element.find("td").length; i++){
    result += $(ui.row.element.find("td")[i]).text() + "; ";
   }
  
   alert(result);
 }
});

Online sample:

http://jsfiddle.net/99eGY/7/

If there is something else that I can do for you, please contact me again.

Hello,
I am still following  your case.
If you have any concerns or questions, please feel free to contact me, I will be glad to help you.

How to get values of selected row in textbox

The code that Zdravko provided a few years ago gets the values of the cells from the selected and and puts them into a string and displays them in an alert.  You could use the same approach an just assign the value of the text input to the string that was built. 

If that doesn't work for you or you have further questions, I recommend starting a new thread and including the code that you are using and what specifically isn't working so that we can better assist you.

   var name = $($(ui.row.element).find("td")[0]).text()

               $("#input1").val(name);

how can I do this for radio button

<input type="radio" id="female" runat="server" name="gender" value="female" />
Female
<input type="radio" id="male" runat="server" name="gender" value="male" />
Male,

This is the scenario

 

Priya,

The quoted code from the sample is getting the text of the value in the cell and putting that text into an html input above the grid as the selection changes.  There is a running example in this fiddle.

Are you attempting to take the value from the grid and select the appropriate radio button based on the value?  If so, what is is the value of the cell?  Is it text like "male" or "female" if so you can use the same line to get the text:

var name = $($(ui.row.element).find("td")[0]).text()

Once you have the text you can check if the value matches male or female and set the value of the radio buttons accordingly.  As far as setting a radio button to be checked, simply get a reference to it and set checked to true:

if(name==="male")
{
    document.getElementById("male").checked = true;
}

If there is something specific that isn't working for you, I recommend creating a new fiddle on jsFiddle that demonstrates the exact challenge that you are currently facing as that will help us understand your questions and allow us to provide better guidance.

Thank you so much  Alan Halama