Pass Multiple Parameters to RadWindow after Cell Double Click

6 posts, 0 answers
  1. Jacob
    Jacob avatar
    4 posts
    Member since:
    Dec 2014

    Posted 13 Apr Link to this post

    Hello,

    I am trying to pass two parameters (Red and Blue outlined in attachment) to a radWindow via a Cell double click, which I will then populate a grid. I am able to pass the datakey (Red outlined) value on row double click thanks to this demo, but have had no luck in capturing the Column name to use in the querystring. 

    Is there a Cell Double click event that I can use to make this happen or can this be done with Row Double click that captures the cell index I click on? 

    The second attachment shows the window opened based on the demo link, but how can I get the querystring URL to show:

    Bklg_SupportStatusWIPDetails.aspx?MPC=ABAL1TC7XB00?AREA=DB

    where Area is another parameter in my datasource that is looking for the column name. 

    Thank you in advance!

     

     
     
       
  2. Peter Milchev
    Admin
    Peter Milchev avatar
    254 posts

    Posted 18 Apr Link to this post

    Hello Jacob,

    One approach to obtaining the column name is to use the cellIndex property of the clicked cell as demonstrated below: 

    function RowDblClick(sender, eventArgs) {
        var masterTable = sender.get_masterTableView();
        var cellIndex = eventArgs.get_domEvent().target.cellIndex
        var columnName = masterTable.get_columns()[cellIndex].get_dataField();
        window.radopen("EditForm_csharp.aspx?EmployeeID=" + eventArgs.getDataKeyValue("EmployeeID") + "&ColumnName=" + columnName, "UserListDialog");
    }

    Regards,
    Peter Milchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jacob
    Jacob avatar
    4 posts
    Member since:
    Dec 2014

    Posted 19 Apr in reply to Peter Milchev Link to this post

    Hello Peter,

    Thank you for responding! The solution above is almost there, but it looks like the domEvent() is not capturing the cell index from the code above. 

    If I were to manually enter an index number as below then I am able to pass the column name over as a parameter and populate the grid.

    var columnName = masterTable.get_columns()[1].get_dataField();

     

    Do I need to enable any other client settings on the source grid for the domEvent() to capture the cell index on mouse click?

    <ClientSettings>
    <ClientEvents OnRowDblClick="BEWIPDblClick" />
    </ClientSettings>

     

    Thank you and Regards,

    Jacob

     

     

        

  4. Jacob
    Jacob avatar
    4 posts
    Member since:
    Dec 2014

    Posted 19 Apr in reply to Jacob Link to this post

    Sorry it appears I spoke too soon.  This solution does work, so once again thank you Peter.

    However, I noticed it only works if the user clicks in the cell and not on the text in the cell.  Is there anyway for the cell index to be captured regardless if the user clicks on the cells value or the cell itself? 

    I've attached two screenshots showing the scenario. 

     

  5. Jacob
    Jacob avatar
    4 posts
    Member since:
    Dec 2014

    Posted 21 Apr in reply to Jacob Link to this post

    In case this helps someone with a similar need.

    I've worked out a solution that uses OnCellSelected to grab the column name (as opposed to capturing it during the double click event)

    function OnCellSelected(sender, eventArgs) {
     
                    var columnName = eventArgs.get_column().get_uniqueName(); //Get the column name
                    selectedColumnName = columnName;  //selectedColumnName is a global variable
     }

     

    Then in the RowDblClick event I am capturing the row cell value by the specified unique column name and storing that value before passing both into the new window's querystring:

    function RowDblClick(sender, args) {
     
                    var grid = $find("<%= RadGrid1.ClientID %>");
                    var MasterTable = grid.get_masterTableView();
                    var row = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()];
                    var cell = MasterTable.getCellByColumnUniqueName(row, "MPC");
                    var cellValue = cell.innerText; // Get the cell value of the clicked row specified by the unique column above
     
                    window.radopen("Bklg_SupportStatusWIPDetails.aspx?MPC=" + cellValue + "&FUNCTION_AREA=" + selectedColumnName, "UserListDialog");

     

     }

     

  6. Peter Milchev
    Admin
    Peter Milchev avatar
    254 posts

    Posted 24 Apr Link to this post

    Hello Jacob,

    Thank you for sharing your solution with the community.

    The cellIndex could be undefined when a child HTML element of the td cell is the target. In such case, one option would be to find the closest td element (using the .closest() jQuery method):

    var $ = $telerik.$;
    function RowDblClick(sender, eventArgs) {
        var masterTable = sender.get_masterTableView();
        var $target = $(eventArgs.get_domEvent().target);
        var cellIndex = $target.closest('td')[0].cellIndex;
        var columnName = masterTable.get_columns()[cellIndex].get_dataField();
     
        window.radopen("EditForm_csharp.aspx?EmployeeID=" + eventArgs.getDataKeyValue("EmployeeID") + "&ColumnName=" + columnName, "UserListDialog");
    }

    Regards,
    Peter Milchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top