Call API .Net Core using RadClientDtaSource to populte Radgrid

2 posts, 0 answers
  1. Alberto
    Alberto avatar
    4 posts
    Member since:
    Oct 2013

    Posted 01 Oct 2020 Link to this post

    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

  2. Attila Antal
    Admin
    Attila Antal avatar
    591 posts

    Posted 06 Oct 2020 Link to this post

    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

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top