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

Trigger RadGrid OnNeedDataSource from Javascript

3 Answers 260 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ragil
Top achievements
Rank 1
Ragil asked on 23 Mar 2020, 01:25 PM

Hi,

Master Grid :

<telerik:RadGrid Width="100%" ExportSettings-Excel-DefaultCellAlignment="Left"
    Height="600px" ClientSettings-Scrolling-AllowScroll="true"
    RenderMode="Lightweight" ID="RgHotelDomestic">
    <ClientSettings Selecting-AllowRowSelect="true"
        EnableRowHoverStyle="false"
        EnablePostBackOnRowClick="false">
        <ClientEvents OnRowSelected="RowSelected" />
    </ClientSettings>
</telerik:RadGrid>

 

Popup Editor :

<telerik:RadWindow ID="RwEditHotelAllowance" runat="server" Width="600px" Height="600px"
            Modal="true" KeepInScreenBounds="true" Title="Edit Hotel Allowance">
            <ContentTemplate>
    <telerik:RadGrid ID="RgHotelDomesticEdit" runat="server"
        AutoGenerateColumns="false"
        CellSpacing="-1" GridLines="Both"
        OnNeedDataSource="RgHotelDomesticEdit_NeedDataSource"
        OnItemDataBound="RgHotelDomesticEdit_ItemDataBound" Height="400px">
    <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="2"></Scrolling>
    </ClientSettings>
    </ContentTemplate>
</telerik:RadWindow>

 

Js calling Popup :

<script>
    function RowSelected(sender, eventArgs) {
        debugger;
        var grid = sender;
        mygrid = grid;
        //console.log("grid ", grid);
        //console.log("mygrid2 ", mygrid);
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
        //console.log("row", row);
 
        var cell1 = MasterTable.getCellByColumnUniqueName(row, "CityId");
        var cell2 = MasterTable.getCellByColumnUniqueName(row, "City");
        document.getElementById("<%= EditCityId.ClientID %>").value = cell1.textContent;
        document.getElementById("<%= EditCityName.ClientID %>").value = cell2.textContent;
        document.getElementById("<%= EditCityName.ClientID %>").value = cell2.textContent;
 
        var oWnd = $find("<%= RwEditHotelAllowance.ClientID %>");
        oWnd.show();
    }
</script>

 

Server Side :

protected void RgHotelDomesticEdit_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    try
    {
        //1. RgHotelDomesticEdit.DataSource = GetDT(HotelParameter,Convert.ToInt32(EditCityId.Value));
         
        RgHotelDomesticEdit.DataSource = GetDT(HotelParameter);    
    }
    catch (Exception ex)
    {
        throw;  
    }
}

 

Is there any way to trigger OnNeedDataSource not from page load, but from client event Popup Windows, because i need to pass paramaeter CityId (based on clicked Edit Item in master page).

 

Regard,

 

Ragil

 

 

 

 

3 Answers, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 24 Mar 2020, 10:08 AM

Hello Ragil,

Calling the rebind() client-side method will cause the Grid to rebind, and as a result, triggering the NeedDataSource event on the server.

function RefreshGrid() {
    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    masterTable.rebind();
}

I hope it will help you to solve the issue.

Kind regards,
Doncho
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.
0
Ragil
Top achievements
Rank 1
answered on 13 Apr 2020, 04:33 AM

Hello Doncho,

 

I've tried your solution to add rebind() on javascript like 

function RowSelected(sender, eventArgs) {
    debugger;
    var grid = sender;
    mygrid = grid;
 
    var MasterTable = grid.get_masterTableView();
    var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
 
    var cell1 = MasterTable.getCellByColumnUniqueName(row, "CityId");
    var cell2 = MasterTable.getCellByColumnUniqueName(row, "City");
 
    document.getElementById("<%= txtCityID.ClientID %>").value = cell1.textContent;
    document.getElementById("<%= txtCityName.ClientID %>").value = cell2.textContent;
 
    document.getElementById("<%= hfCityId.ClientID %>").value = cell1.textContent;
    document.getElementById("<%= hiddenCityId.ClientID %>").value = cell1.textContent;
 
    var oGrid = $find("<%= RgHotelDomesticEdit.ClientID %>");
    console.log("oGrid", oGrid.get_visible());
 
    oGrid.set_visible(true);
    console.log("oGrid", oGrid.get_visible());
 
    <%--//__doPostBack('<%=btnTest.UniqueID%>', '');--%>
 
    //Grid Edit
    var MasterTableEdit = oGrid.get_masterTableView();
    MasterTableEdit.rebind();
 
    var oWnd = $find("<%= rwPopupWindow.ClientID %>");
    oWnd.show();
 
}

 

But when i'm trying to read value (hidden field / textbox) on radwindows (with radgrid inside : RgHotelDomesticEdit), i can't get value of hiddenfield / textbox that i've already set in javascript, i need this textbox value to assign Paramater for Query Datasource Grid in radwindows. Can you give me solution for this case. Thanks before

protected void RgHotelDomesticEdit_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dt = null;      //dt is datatable
     
    try
    {
        string sCityId = hiddenCityId.Value;     //input type 'hidden'
        string sCityId2 = hfCityId.Value; // <asp:HiddenField>
 
        string sCityTextbox = txtCityID.Text;
        string sCityName = txtCityName.Text;
         
        bindingreasonEdit = e.RebindReason.ToString();
        if (bindingreasonEdit.ToLower() != "initialload")
        {
            RgHotelDomesticEdit.DataSource = null;
            dt = GetData_WithParam(HotelParameter);
            RgHotelDomesticEdit.DataSource = dt;
        }
        else
        {
            dt = GetData(99);
            RgHotelDomesticEdit.DataSource = dt;
        }
        GenerateHotelDomesticColumnsEdit(dt);
    }
    catch (Exception ex)
    {
        ex.Message + ", " + ex.StackTrace + ", " + ex.InnerException;
    }
}
0
Doncho
Telerik team
answered on 13 Apr 2020, 05:29 PM

Hello Ragil,

The reason the Text is empty is that the JavaScript function does not have enough time to access the HiddenField because the rebind() method refreshes the page instantly. 

To make sure the value is set, try to apply some delay before rebinding:

// apply some delay before the rebind()
setTimeout(function () {
    var MasterTableEdit = oGrid.get_masterTableView();
    MasterTableEdit.rebind();
}, 30)

 

Kind regards,
Doncho
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.
Tags
Grid
Asked by
Ragil
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Ragil
Top achievements
Rank 1
Share this question
or