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

DataSource Component

2 Answers 6 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 12 Jul 2018, 09:15 PM

Is it possible to access the data client side for this control? 

 

https://demos.telerik.com/aspnet-mvc/datasource

 

The example code has a call to dataSource1.fetch();

I am trying to figure out how this works as datasource1 is declared using the razor syntax and isnt actually available in the script block (at least I can't get it to work)

Can someone help me figure this out or point me to an example that I can use for this that uses a datasource that isnt declared and accessed in the same block.

 

Thank for any help you guys can provide.

2 Answers, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 13 Jul 2018, 03:24 PM

Here is an except from what I am trying to do.

 

<div class="col-6 k-content" id="regionData">
            <div id="regions">

            </div>
        </div>
        <script>
            function regionChange() {
                $("#regions").html(kendo.render(template, this.view())); // populate the table
            }
        </script>
        @(Html.Kendo().DataSource<RegionIndicationModel>()
              .Name("regionDataSource")
              .Ajax(datasource => datasource
                  .PageSize(15)
                  .Events(ev => ev.Change("regionChange"))
                  .Read(read => read.Action("GetRegionData", "Dashboard"))))
    </div>

 

<script id="template" type="text/x-kendo-template">
    <div class="row">
        <div class="col-3">#:RegionName#</div>
    </div>
</script>

 

and here is the onload function from my other script block that I can't figure out how they set the datasort.

window.onload = function () {
        var template = kendo.template($("#template").html());
        var dataSource = $("#regionDataSource");
        console.log("test");
        //console.log(dataSource);
        //console.log(template);
    }

 

 

 

 

 

0
Accepted
Konstantin Dikov
Telerik team
answered on 16 Jul 2018, 08:21 AM
Hello Mark,

The DataSource helper is using the Name property to create a variable in the global scope with that name, so in the context of your configuration, you can access the DataSource API directly with "regionDataSource":
window.onload = function () {
        var template = kendo.template($("#template").html());
        regionDataSource.fetch();

Note that with the other widgets, there is a DOM element used for getting reference to the API, but since the DataSource does not have such element, the approach differs. 

Hope this helps.


Regards,
Konstantin Dikov
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.
Tags
General Discussions
Asked by
Mark
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or