Passing multiple values clientside from Radgrid

5 posts, 1 answers
  1. Gerald Woodard
    Gerald Woodard avatar
    2 posts
    Member since:
    Nov 2009

    Posted 05 Jan 2011 Link to this post

      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>

  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Jan 2011 Link to this post

    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..
  3. Gerald Woodard
    Gerald Woodard avatar
    2 posts
    Member since:
    Nov 2009

    Posted 07 Jan 2011 Link to this post

    That's what I needed, thank you.
  4. Maya
    Maya avatar
    1 posts
    Member since:
    May 2019

    Posted 28 May Link to this post

    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.

  5. Attila Antal
    Admin
    Attila Antal avatar
    425 posts

    Posted 30 May Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top