I have webdatagrid with drop down provider using ItemTemplate and table. On DropDownClosed I need to find second and third column text displayed on client site. (PersonNum and Job).
Here is the code:
<ig:WebDataGrid ID="WebDataGrid4" runat="server" Height="200px" DataSourceID="ObjectDataSource9" AutoGenerateColumns="false" BackColor="Window" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="Large" ForeColor="Black" ShowFooter="false" ClientIDMode="Static" DataKeyFields="EmpId" > <EditorProviders> <ig:DropDownProvider ID="NameProvider"> <EditorControl ID="EditorControl2" runat="server" EnableAutoFiltering="Server" AutoFilterQueryType="StartsWith" AutoFilterSortOrder="Ascending" EnableAutoCompleteFirstMatch="false" EnableCachingOnClient="true" EnableLoadOnDemand="true" DisplayMode="DropDown" DataSourceID="ObjectDataSource11" TextField="EmployeeName" ValueField="PersonNum" > <ItemTemplate> <table style="width: 100%" cellspacing="0" cellpadding="4"> <tr style="border-bottom: solid 1px #ff0000;"> <td style="width: 150px; border-bottom: solid 1px #E8E8E8;"> <%# DataBinder.Eval(Container.DataItem, "EmployeeName") %> </td> <td style="width: 100px; padding-left: 10px; border-bottom: solid 1px #E8E8E8;"> <%# DataBinder.Eval(Container.DataItem, "PersonNum")%> </td> <td style="width: 50px; text-align: left; padding-left: 25px; border-bottom: solid 1px #E8E8E8;"> <%# DataBinder.Eval(Container.DataItem, "Job")%> </td> </tr> </table> </ItemTemplate> <ClientEvents DropDownClosed="NameProvider_Closed" /> </EditorControl> </ig:DropDownProvider> <ig:DropDownProvider ID="JobProvider"> <EditorControl ID="EditorControl1" runat="server" DisplayMode="DropDown" DataSourceID="ObjectDataSource14" TextField="Job" Width="110px" /> </ig:DropDownProvider> </EditorProviders> <Columns> <ig:BoundDataField DataFieldName="Name" Key="Name" Width="200px" > <Header Text="Name" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="EmpID" Key="EmpID" Width="80px" > <Header Text="EmpID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Job" Key="Job" Width="100px" > <Header Text="Job" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Notes" Key="Notes" Width="90px" > <Header Text="Notes" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Hrs" Key="Hrs" Width="80px" > <Header Text="Hrs" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="selected" Key="selected" Hidden="true" > </ig:BoundDataField> </Columns> <Behaviors> <%-- <ig:Activation Enabled="true" />--%> <ig:Selection RowSelectType="Single" CellClickAction="Cell" /> <ig:EditingCore BatchUpdating="True" > <Behaviors> <ig:CellEditing Enabled="true" > <EditModeActions MouseClick="Single" EnableOnActive="true" /> <ColumnSettings> <ig:EditingColumnSetting ColumnKey="Name" EditorID="NameProvider" ReadOnly="false" /> <ig:EditingColumnSetting ColumnKey="EmpID" ReadOnly="true" /> <ig:EditingColumnSetting ColumnKey="Job" EditorID="JobProvider" ReadOnly="false" /> <ig:EditingColumnSetting ColumnKey="Hrs" ReadOnly="false" /> <ig:EditingColumnSetting ColumnKey="Notes" /> </ColumnSettings> <CellEditingClientEvents ExitingEditMode="WebDataGrid4_ExitedEditMode" /> </ig:CellEditing> <ig:RowAdding Alignment="Top" EditModeActions-EnableOnActive="true" EditModeActions-MouseClick="Single" Enabled="true" > <ColumnSettings> <ig:RowAddingColumnSetting ColumnKey="Name" EditorID="NameProvider" ReadOnly="false" /> <ig:RowAddingColumnSetting ColumnKey="EmpID" ReadOnly="true" /> <ig:RowAddingColumnSetting ColumnKey="Job" EditorID="JobProvider" ReadOnly="false" /> <ig:RowAddingColumnSetting ColumnKey="Hrs" ReadOnly="false" /> <ig:RowAddingColumnSetting ColumnKey="Notes" ReadOnly="false" /> </ColumnSettings> <AddNewRowClientEvents ExitingEditMode="AddingRow_ExitingEditMode" /> </ig:RowAdding> </Behaviors> </ig:EditingCore> </Behaviors> <%-- <ClientEvents Click="CellButtonClick" />--%> </ig:WebDataGrid>
Hello,
Thank you for contacting Infragistics!
As the DropDown does not have access to the row you will have to go through the grid. However you will need to know what row you are in:
var grid = $find("WebDataGrid1"); grid.get_rows().get_row(0).get_cellByColumnKey("Name");
var grid = $find("WebDataGrid1");
grid.get_rows().get_row(0).get_cellByColumnKey("Name");
Instead I recommend that you setup a DropDownProvider as an editor provider of the column in the grid. Then handle the ExitedEditMode event of the CellEditing behavior. In that event you will have access to both the cell you were editing as well as the row it was in and the editor:
function ExitedEditMode(sender, args) { var editor = args.getEditor(); var cellValue = args.getCell().get_row().get_cellByColumnKey("Name").get_value(); }
function ExitedEditMode(sender, args) {
var editor = args.getEditor();
var cellValue = args.getCell().get_row().get_cellByColumnKey("Name").get_value();
}
You can find more information about using the editor providers of the grid in the following documentation:
http://help.infragistics.com/doc/ASPNET/2014.2/CLR4.0/?page=WebDataGrid_Editor_Providers.html
http://help.infragistics.com/doc/ASPNET/2014.2/CLR4.0/?page=WebDataGrid_Using_Editor_Providers.html
Please let me know if you have any further questions concerning this matter.
My drop down does not have grid, it build from html table. You show how to get cell from the grid, I need value from second item from drop down table.
Can you please provide sample code? Thanks
Thank you for the update. I have done some looking into this matter and have the following information. To get your first two fields you can use get_text and get_value of the selected item because you set the TextField and ValueField property of the DropDownProvider:
var EmployeeName = sender.get_selectedItem().get_text(); var PersonNum = sender.get_selectedItem().get_value();
var EmployeeName = sender.get_selectedItem().get_text();
var PersonNum = sender.get_selectedItem().get_value();
For your final value what you will want to do it set a class on the td of you Job td. Then you would use the following code to get the element and the text within:
var Job = sender.get_selectedItem().get_element().getElementsByClassName("TestField")[0].innerText;
Where “TestField” is the name of the class you assigned to the td that contains the Job.
That works, except getElementsByClassName does not work with IE8.
Here is the fix:
if (document.getElementsByClassName) { Job = item.get_element().getElementsByClassName("jb")[0].innerText;} else { //IE8 Job = item.get_element().querySelectorAll('.' + 'jb')[0].innerText;}
Thanks for your help!