Call API .Net Core using RadClientDtaSource to populte Radgrid

[Alberto]

Hi i have a simple API .Net Core to get a list of College, this is my local URL ( http://localhost:58887/colleges ) and the JSON result :

[{"collegeId":1,"college":"Norco College","collegeAbbreviation":"NORCO","collegeLogo":"empty","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":1,"checkExistOtherColleges":true},{"collegeId":2,"college":"Riverside City College","collegeAbbreviation":"RCC","collegeLogo":"","styleSheet":"/Common/css/RCC.css","pendingDataIntake":false,"districtId":1,"checkExistOtherColleges":true},{"collegeId":3,"college":"Moreno Valley College","collegeAbbreviation":"MVC","collegeLogo":"","styleSheet":"/Common/css/MVC.css","pendingDataIntake":false,"districtId":1,"checkExistOtherColleges":true},{"collegeId":4,"college":"NORCO College - Syllabus Manager","collegeAbbreviation":"NORCO","collegeLogo":"","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":true},{"collegeId":5,"college":"Testing College","collegeAbbreviation":"TST","collegeLogo":"logo.png","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":true,"districtId":2,"checkExistOtherColleges":false},{"collegeId":6,"college":"Mt San Jacinto","collegeAbbreviation":"MSJC","collegeLogo":"","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false},{"collegeId":7,"college":"Crafton Hills College","collegeAbbreviation":"CHC","collegeLogo":" ","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false},{"collegeId":8,"college":"San Bernardino Valley College","collegeAbbreviation":"SBC","collegeLogo":" ","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false},{"collegeId":9,"college":"Chaffey College","collegeAbbreviation":"CHC","collegeLogo":" ","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false},{"collegeId":10,"college":"Barstow College","collegeAbbreviation":"BC","collegeLogo":" ","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false},{"collegeId":11,"college":"College of the Desert","collegeAbbreviation":"COD","collegeLogo":" ","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false},{"collegeId":12,"college":"Cooper Mountain College","collegeAbbreviation":"CMC","collegeLogo":" ","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false},{"collegeId":13,"college":"Palo Verde College","collegeAbbreviation":"PVC","collegeLogo":" ","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false},{"collegeId":14,"college":"Victor Valley College","collegeAbbreviation":"VVC","collegeLogo":" ","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false},{"collegeId":15,"college":"Palomar College","collegeAbbreviation":"PAL","collegeLogo":" ","styleSheet":"/Common/css/NORCO.css","pendingDataIntake":false,"districtId":2,"checkExistOtherColleges":false}]

 

Then im trying to populate a RdaGrid with a RadClientDataSource, this is my code 

 

            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" ClientDataSourceID="RadClientDataSource1" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true"><br>                <MasterTableView ClientDataKeyNames="CollegeID" EditMode="Batch" CommandItemDisplay="Top" BatchEditingSettings-HighlightDeletedRows="true"><br>                    <Columns><br>                        <telerik:GridBoundColumn DataField="collegeId" HeaderText="College ID" ReadOnly="true"><br>                        </telerik:GridBoundColumn><br>                        <telerik:GridBoundColumn DataField="college" HeaderText="College Name" ColumnEditorID="GridTextBoxEditor"><br>                        </telerik:GridBoundColumn><br>                    </Columns><br>                </MasterTableView><br>                <ClientSettings><br><br>                </ClientSettings><br>            </telerik:RadGrid><br>        </div><br>        <telerik:GridTextBoxColumnEditor ID="GridTextBoxEditor" runat="server" TextBoxStyle-Width="230px"></telerik:GridTextBoxColumnEditor><br>        <telerik:RadClientDataSource ID="RadClientDataSource11" runat="server" AllowBatchOperations="true"><br>            <DataSource><br>                <WebServiceDataSourceSettings BaseUrl="http://localhost:58887/"><br>                    <Select Url="colleges" DataType="JSON" /><br>                </WebServiceDataSourceSettings><br>            </DataSource><br>            <Schema><br>                <Model ID="CollegeId"><br>                    <telerik:ClientDataSourceModelField FieldName="collegeId" DataType="String" /><br>                    <telerik:ClientDataSourceModelField FieldName="college" DataType="String" /><br>                </Model><br>            </Schema><br>        </telerik:RadClientDataSource><br><br>        <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1"><br>            <DataSource><br>                <WebServiceDataSourceSettings ServiceType="OData"><br>                    <Select Url="http://localhost:58887/colleges" DataType="JSONP" /><br>                </WebServiceDataSourceSettings><br>            </DataSource><br>        </telerik:RadClientDataSource>

 

None of them are working, the RadGrid its showing no records

Please advice
Regards,

Alberto

[Attila Antal]

Hi Alberto,

There are a few additional settings that will need to be set for the RadClientDataSource to work.

Here is the RadClientDataSource of a working sample:

<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="true">
    <ClientEvents OnCustomParameter="ParameterMap" OnDataParse="Parse" />
    <DataSource>
        <WebServiceDataSourceSettings BaseUrl="EditingWcfService.svc/">
            <Select Url="GetCustomers" 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="CustomerID" DataType="Number" />
            <telerik:ClientDataSourceModelField FieldName="CompanyName" DataType="String" />
            <telerik:ClientDataSourceModelField FieldName="ContactName" DataType="String" />
            <telerik:ClientDataSourceModelField FieldName="ContactTitle" DataType="String" />
        </Model>
    </Schema>
</telerik:RadClientDataSource>

 

This will also require engagement through JavaScript. The response returned will need to be parsed correctly.

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

 

You can find a fully working solution in our Code Library at Integration with SignalR. You can ignore the SignalR integration and focus on the Client-Side binding only.

Regards,
Attila Antal
Progress Telerik