Set authorization for client side databinding

[Nick]

Is there a way to submit an authorization header with the ajax request on the client data bind? I cant seem to find anything that would allow me to do something like this


 <script type="text/javascript">
                    //<![CDATA[
                    function ParameterMap(sender, args) {
                        //If you want to send a parameter to the select call you can modify the if
                        //statement to check whether the request type is 'read':
                        //if (args.get_type() == "read" && args.get_data()) {
                        if (args.get_type() != "read" && args.get_data()) {
                            args.set_parameterFormat({ customersJSON: kendo.stringify(args.get_data().models) });
                        }
                    }

                    function Parse(sender, args) {
                        var response = args.get_response().d;
                        if (response) {
                            args.set_parsedData(response.Data);
                        }
                    }

                    function UserAction(sender, args) {
                        if (sender.get_batchEditingManager().hasChanges(sender.get_masterTableView()) &&
                            !confirm("Any changes will be cleared. Are you sure you want to perform this action?")) {
                            args.set_cancel(true);
                        }
                    }
    //]]>
</script>
<telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecorationZoneID="grid" DecoratedControls="All" EnableRoundedCorners="false" />
          <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" ClientDataSourceID="RadClientDataSource1" AllowPaging="true" AllowSorting="true" >
            <MasterTableView ClientDataKeyNames="CustomerID" CommandItemDisplay="Top" BatchEditingSettings-HighlightDeletedRows="true">
                <CommandItemSettings ShowAddNewRecordButton="false" />
                <Columns>
                    <telerik:GridBoundColumn DataField="Datetime" HeaderText="Customer ID" ReadOnly="true">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="PlantName" HeaderText="Company Name" ColumnEditorID="GridTextBoxEditor">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="MachinName" HeaderText="Contact Name" ColumnEditorID="GridTextBoxEditor">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="MachineID" HeaderText="Contact Title" ColumnEditorID="GridTextBoxEditor">
                    </telerik:GridBoundColumn>

                </Columns>
            </MasterTableView>
            <ClientSettings>
            <DataBinding Location="http://localhost:2036/api/sample/" SelectMethod="100TEST" SortParameterType="Linq" FilterParameterType="Linq">
            </DataBinding>
                <ClientEvents OnUserAction="UserAction" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    <telerik:GridTextBoxColumnEditor ID="GridTextBoxEditor" runat="server" TextBoxStyle-Width="230px"></telerik:GridTextBoxColumnEditor>
    <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="true">
        <ClientEvents OnCustomParameter="ParameterMap" OnDataParse="Parse" />
     <%--   <DataSource>
            <WebServiceDataSourceSettings BaseUrl="http://localhost:2036/api/sample/">
                <Select Url="100TEST" DataType="JSON" />
                <Update Url="UpdateCustomers" DataType="JSON" />
                <Insert Url="InsertCustomers" DataType="JSON" />
                <Delete Url="DeleteCustomers" DataType="JSON" />
            </WebServiceDataSourceSettings>
        </DataSource>--%>
        <Schema>
            <Model ID="CustomerID">
                <telerik:ClientDataSourceModelField FieldName="Datetime" DataType="String"  />
                <telerik:ClientDataSourceModelField FieldName="PlantName" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="MachinName" DataType="String" />
                <telerik:ClientDataSourceModelField FieldName="MachineID" DataType="String" />
            </Model>
        </Schema>
    </telerik:RadClientDataSource>

[Peter Milchev]

Hello Nick,

The Add authentication request headers with ClientDataSource KB article demonstrates how to add custom headers to the requests from the ClientDataSource. 

var $ = $ || $telerik.$;
var old_mapTransport = Telerik.Web.UI.RadClientDataSource.prototype._mapTransport;

Telerik.Web.UI.RadClientDataSource.prototype._mapTransport = function () {
    var transport = old_mapTransport.call(this);

    transport.read.beforeSend = beforeSendHandler;
    transport.create.beforeSend = beforeSendHandler;
    transport.update.beforeSend = beforeSendHandler;
    transport.destroy.beforeSend = beforeSendHandler;

    return transport;
}

function beforeSendHandler(xhr) {
    xhr.setRequestHeader('customheader', 'custom header value');
}

Regards,
Peter Milchev
Progress Telerik

[Stefan]

Hi Peter, I am having the same issue but I am using the binding directly in the RadGrid:

<telerik:RadGrid RenderMode="Lightweight" ID="rgAdvanced" CssClass="grid" runat="server" GridLines="None" Height="300px" AllowAutomaticUpdates="true" 
ShowHeader="false" AllowMultiRowSelection="true">
<MasterTableView TableLayout="Fixed" ClientDataKeyNames="ChoiceText" CommandItemDisplay="None" HierarchyDefaultExpanded="true">
<Columns>
<telerik:GridBoundColumn DataField="ChoiceText" ></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ExplanationType" ></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PromptMessage" ></telerik:GridBoundColumn>
<telerik:GridCheckBoxColumn DataField="ExplanationMandatory" SortExpression="ExplanationMandatory" UniqueName="ExplanationMandatory" ></telerik:GridCheckBoxColumn>
<telerik:GridCheckBoxColumn DataField="Attachment" SortExpression="Attachment" UniqueName="Attachment" ></telerik:GridCheckBoxColumn>
<telerik:GridCheckBoxColumn DataField="AttachmentMandatory" SortExpression="AttachmentMandatory" UniqueName="AttachmentMandatory" ></telerik:GridCheckBoxColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="true" >
<Selecting AllowRowSelect="true"></Selecting>
<DataBinding Location="CorporateReportingContent.aspx" SelectMethod="GetListOfExplanation" EnableCaching="true" />
<ClientEvents OnDataBinding="onRadGridDataBinding" OnRowSelected="onrgAdvancedRowSelected" OnRowClick="onRgAdvancedRowClick" ></ClientEvents>
<Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
<Resizing AllowColumnResize="true" />
</ClientSettings>
</telerik:RadGrid>

 

So the actual Telerik.Web.UI.RadClientDataSource doesn't exist when the method "OnDataBinding" gets executed.

In this scenario, how would I set the header?

Thanks,

 

Stefan

 

[Peter Milchev]

Hello Stefan,

If Telerik.Web.U.RadClientDataSource does not exist, there is no ClientDataSource used in this scenario.

With that said, I would suggest using a ClientDataSource instead of the built-in web service settings and then you would be able to leverage the ClientDataSource workaround. Here are some resources on the integration between ClientDataSource and RadGrid:

• https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-data-source-binding/defaultcs.aspx
• (Manual PageMethod binding instead of ClientDataSource)https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/programmatic/defaultcs.aspx 
• https://www.telerik.com/support/code-library/retrieve-filtered-data-from-radclientdatasource-using-radgrid's-event
• https://www.telerik.com/support/code-library/grid-bound-to-wcf-web-service-via-clientdatasource 

Regards,
Peter Milchev
Progress Telerik