Trigger RadGrid OnNeedDataSource from Javascript

[Ragil]

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

 

 

 

 

[Doncho]

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

[Ragil]

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;
    }
}

[Doncho]

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