Set authorization for client side databinding in UI for ASP.NET AJAX

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

Set authorization for client side databinding

3 Answers 17 Views

Grid

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

Nick asked on 20 Feb 2018, 01:06 PM

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>

3 Answers, 1 is accepted

answered on 30 May 2018, 10:24 AM

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

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 08 Sep 2020, 11:33 AM

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

answered on 16 Oct 2020, 10:19 AM

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:

Regards,
Peter Milchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.