Passing multiple values clientside from Radgrid

[Gerald Woodard]

  I have a Radgrid with a RadNumericTextBox in a template column. The OnValueChanged event passes the value to the Javascript function. How do I also pass the value of the Price column of the same row in the same OnValueChanged event?

 

 

<script type="text/javascript">

function Total(sender, eventArgs) {

var total = $find('<%=tbTotal.ClientID %>');

var OldTotal = total.get_value();

var i = eventArgs.get_newValue();

var i2 = eventArgs.get_oldValue();

total.set_value(i + OldTotal - i2);

}

<script type="text/javascript">

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" >

 

<MasterTableView datakeynames="Item"

datasourceid="SqlDataSource1" ClientDataKeyNames="Quantity,Price" >

<Columns>

<telerik:GridBoundColumn DataField="Item"

UniqueName="Item">

</telerik:GridBoundColumn>

 

<telerik:GridTemplateColumn UniqueName="TemplateColumn" >

 

<ItemTemplate>

<telerik:RadNumericTextBox ID="tbQuantity" Runat="server"

ShowSpinButtons = "true"

dbValue='<%#Bind("Quantity") %>' >

<ClientEvents OnValueChanged="Total" />

</telerik:RadNumericTextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Price"

UniqueName="Price">

</telerik:GridBoundColumn>

</Columns>

MasterTableView>

</telerik:RadGrid>

[Shinu]

Hello,

You can try the following approach to access the desired column value.

clientside:

function Total(sender, args)
{
     var masterTable = $find("<%= rad.ClientID %>").get_masterTableView();
     var items = masterTable.get_dataItems();
     var num = masterTable.get_dataItems().length;
     for (var index = 0; index < num; index++)
      {
         var textBox = items[index].findControl("tbQuantity");
         if (textBox.get_id() == sender.get_id())
        {
             var row = items[index];
             var cell = masterTable.getCellByColumnUniqueName(row, "Price")
             alert(cell.innerHTML); // holds the value of the cell
         }
}

Thanks,
Shinu..

[Gerald Woodard]

That's what I needed, thank you.

[Maya]

hi,

I have used below link for Persisting selection and its working fine till here:

https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/Selecting/persisting-selected-rows-client-side.

Now the problem is, I have multiple ClientDataKeyNames="ID, IP, Port" and grid contains multiple records for one ID and one IP value, but in combination of ID and IP, record is unique.

So when I select few rows from 1st and 2nd page of grid, it selects all rows where IP and ID is matched. Say I have selected 3 rows from 1st page and 4 rows from 2nd page 

[ID: 100  IP: 0.0.0.0] [ID: 100  IP: 1.1.1.1] [ID: 100  IP: 2.2.2.2]

[ID: 200  IP: 0.0.0.0] [ID: 200  IP: 3.3.3.3] [ID: 200  IP: 4.4.4.4] [ID: 200  IP: 5.5.5.5]

(other than these 7 records, these IPs and IDs records are associated with other IPs and IDs)

Expected result: it should select 7 unique rows in all but it selects more than that. it selects all the records with above mentioned IP and IDs

Hope I'm able to explain my problem.

[Attila Antal]

Hi Maya,

I assume that in your case, a combination of two values are considered to be unique instead of one. You can manipulate the JavaScript logic to save both values which will be compared in a later stage.

Here is an example that you can try. When a row is selected, you will save both ID and IP values and add these two values to an array.

// when a row is selected
function rowSelected(sender, args) {
    var id = args.getDataKeyValue("ID");
    var ip = args.getDataKeyValue("IP"); // Add IP

    var selected = (JSON.parse(sessionStorage.getItem("selectedItems")) != null) ? JSON.parse(sessionStorage.getItem("selectedItems")) : [];

    // search in the array of objects using predicate
    // verify that the array does not contain an object which has ID and IP combination same as the current selected ROW's
    if (!selected.find(x => x.ID == id && x.IP == ip)) {
        // push a new object to the array with ID and IP values.
        selected.push({ ID: id, IP: ip });
        // save the array of object in the browser's storage
        sessionStorage.setItem("selectedItems", JSON.stringify(selected));
    }
}

The above logic creates the array with a list of objects inside. Each object contains an ID and an IP field with values.

You can follow this approach to implement the logic for the other two events: rowDeselected and rowCreated.

Kind regards,
Attila Antal
Progress Telerik