This is a migrated thread and some comments may be shown as answers.

Telerik Radgrid Batch EditMode get the row data of a clicked cell

1 Answer 864 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Nikos asked on 14 May 2020, 08:34 AM

Hi!

I am using Telerik's Radgrid in EditMode="Batch" and with EditType="Cell" settings. The Grid contains both GridBoundColumn(s) and GridTemplateColumn(s) with DropDownLists.

What i want to achieve (on client side) is when a user changes the value in a dropdown list (contained in an GridTemplateColumn), i will be able and update some session variables depending on the values of multiple other column values of the grid.

Up to know i was able to do everything i wanted using the code behind event handlers but this scenario requires handling some of the event on the client side, so i am struggling with javascript :) which is not really my expertise.

I am using the OnBatchEditOpen & OnBatchEditClosed client events off the grid.

What i am trying to achieve is when a cell (Columns that expose dropdown lists are: Segment, Basis, Side) is clicked for editting (OnBatchEditOpen) to be able and also fetch the values of some other columns on the same row.

Here is my grid code:

<telerik:RadGrid

RenderMode="Lightweight"

runat="server"

ID="RadGridLesions"

AllowPaging="True"

AllowSorting="True"

AutoGenerateColumns="False"

Skin="BlackMetroTouch"

CssClass="dark-grey"

OnNeedDataSource="RadGridLesions_NeedDataSource"

ShowStatusBar="True"

AllowAutomaticInserts="False"

AllowAutomaticDeletes="True"

AllowAutomaticUpdates="True"

OnItemUpdated="RadGridLesions_ItemUpdated"

OnItemDeleted="RadGridLesions_ItemDeleted"

OnBatchEditCommand="RadGridLesions_BatchEditCommand"

>

<MasterTableView

CommandItemDisplay="Top"

EditMode="Batch">

<PagerStyle />

<BatchEditingSettings

SaveAllHierarchyLevels="false"

HighlightDeletedRows="false"

EditType="Cell"

OpenEditingEvent="Click" />

<Columns>

<telerik:GridBoundColumn

DataField="Segment"

UniqueName="Segment"

HeaderText="Segment"

DataType="System.String"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

Visible="true"

ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

DataField="Level"

UniqueName="Level"

HeaderText="Level"

DataType="System.String"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

Visible="true"

ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

DataField="Side"

UniqueName="Side"

HeaderText="Side"

DataType="System.String"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

Visible="true"

ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

DataField="T2Grade"

UniqueName="T2Grade"

HeaderText="T2"

DataType="System.Int32"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

Visible="false"

ReadOnly="false">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn

HeaderText="T2"

HeaderStyle-Width="70px"

UniqueName="T2Grade"

DataField="T2Grade">

<ItemTemplate>

<%# Eval("T2Grade") %>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadDropDownList

RenderMode="Lightweight"

runat="server"

ID="T2GradeDropDownList"

AutoPostBack="false"

OnSelectedIndexChanged="T2GradeDropDownList_SelectedIndexChanged"

OnClientItemSelected="T2GradeDropDownList_OnClientItemSelected"

Skin="BlackMetroTouch"

SelectedValue='<%# Eval("T2Grade") %>'>

<Items>

<telerik:DropDownListItem Text="X" Value="0" />

<telerik:DropDownListItem Text="1" Value="1" />

<telerik:DropDownListItem Text="2" Value="2" />

<telerik:DropDownListItem Text="3" Value="3" />

<telerik:DropDownListItem Text="4" Value="4" />

<telerik:DropDownListItem Text="5" Value="5" />

</Items>

</telerik:RadDropDownList>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn

DataField="DWIGrade"

UniqueName="DWIGrade"

HeaderText="DWI"

DataType="System.String"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

Visible="false"

ReadOnly="false" >

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn

HeaderText="DWI"

HeaderStyle-Width="70px"

UniqueName="DWIGrade"

DataField="DWIGrade">

<ItemTemplate>

<%# Eval("DWIGrade") %>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadDropDownList

RenderMode="Lightweight"

runat="server"

ID="DWIGradeDropDownList"

Skin="BlackMetroTouch"

SelectedValue='<%# Bind("DWIGrade") %>'>

<Items>

<telerik:DropDownListItem Text="X" Value="0" />

<telerik:DropDownListItem Text="1" Value="1" />

<telerik:DropDownListItem Text="2" Value="2" />

<telerik:DropDownListItem Text="3" Value="3" />

<telerik:DropDownListItem Text="4" Value="4" />

<telerik:DropDownListItem Text="5" Value="5" />

</Items>

</telerik:RadDropDownList>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn

DataField="DCEGrade"

UniqueName="DCEGrade"

HeaderText="DCE"

DataType="System.Int32"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

Visible="false"

ReadOnly="false" >

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn

HeaderText="DCE"

HeaderStyle-Width="70px"

UniqueName="DCEGrade"

DataField="DCEGrade">

<ItemTemplate>

<%# Eval("DCEGrade") %>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadDropDownList

RenderMode="Lightweight"

runat="server"

ID="DCEGradeDropDownList"

Skin="BlackMetroTouch"

SelectedValue='<%# Bind("DCEGrade") %>'>

<Items>

<telerik:DropDownListItem Text="X" Value="0" />

<telerik:DropDownListItem Text="+" Value="1" />

<telerik:DropDownListItem Text="-" Value="2" />

</Items>

</telerik:RadDropDownList>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn

DataField="PiradGrade"

UniqueName="PiradGrade"

HeaderText="Pirad"

DataType="System.Int32"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

Visible="true"

ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

DataField="Width"

UniqueName="Width"

HeaderText="Width"

DataType="System.Double"

Visible="true"

ReadOnly="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

DataField="Height"

UniqueName="Height"

HeaderText="Height"

DataType="System.Double"

Visible="true"

ReadOnly="false" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

DataField="Comments"

UniqueName="Comments"

HeaderText="Comments"

DataType="System.String"

Visible="true"

ReadOnly="false" >

</telerik:GridBoundColumn>

<telerik:GridButtonColumn

ConfirmText="Delete this Row?"

ConfirmDialogType="Classic"

ConfirmTitle="Delete"

HeaderText="Delete" HeaderStyle-Width="70px"

HeaderStyle-CssClass="studies-header delete" ItemStyle-CssClass="studies-items delete"

CommandName="Delete"

Text="Delete"

UniqueName="DeleteStudy">

</telerik:GridButtonColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnBatchEditOpened="BatchEditOpened" OnBatchEditClosed="BatchEditClosed" />

</ClientSettings>

</telerik:RadGrid>

So what in particular i am trying to achive is that if the user clicks on the "T2Grade" dropdown list depending on the values of "Segment", "Side", "Basis" columns i will make some additional actions. So in the event i need a way to fetch clicked cell's row, other column values.

My issue is how to fetch the values of the clicked cell's row column values for "Segment", "Side" and "Basis":

function BatchEditOpened(sender, args) {

var tableView = sender.get_masterTableView();

var batchEditingManager = sender.get_batchEditingManager();

var items = tableView.get_dataItems();

if (args.get_columnUniqueName() === "T2Grade") {

_currentDropDownCell = args.get_cell("T2Grade");

var _currentDropDownCellValue = batchEditingManager.getCellValue(_currentDropDownCell);

//this is the value of the selected dropdown list

alert('T2Grade: ' + _currentDropDownCellValue);

// how am i going to fetch the ROW index AND/OR ROW data for the other columns of the grid

// tried with args.get_row() but this is not working

// most probably because i work with: EditType="Cell"

....

}

Anybody has an idea of how to do it?

1 Answer, 1 is accepted

answered on 19 May 2020, 06:55 AM

Hello Nikos,

This requirement is possible if you want to execute client-side logic. A similar code you can find here:
https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/onbatcheditopened

However, if you want to call some server-side method after dropdown selection, InPlace editing mode will be more suitable:
https://www.telerik.com/support/kb/aspnet-ajax/grid/details/radgrid-batch-editing-templates-and-specifics

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.