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

Best way to bind data to multiple controls

6 Answers 420 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Raja
Top achievements
Rank 1
Raja asked on 29 Oct 2014, 10:30 PM
I am trying to build a single page application with Kendo UI. I have 7 drop down lists and 2 combo boxes on a form. 2 out of 7 drop downs will have same values. 
What is the best way to get data and bind to these controls?

1. Make everything an individual datasource
2. One data source which will have all the collections and bind them once the read request is completed
3. Any other approach?

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 30 Oct 2014, 03:56 PM
Hello Raja,

The most basic and common sense thing is to use a shared DataSource for the two DropDownLists and separate DataSources for the other widgets.

http://docs.telerik.com/kendo-ui/framework/datasource/overview#binding-ui-widgets-to-the-kendo-ui-datasource

Theoretcally, it is possible to retrieve all collections with a single request and when the response arrives, distribute the data among several different Kendo UI widgets via the so called local data binding.

http://docs.telerik.com/kendo-ui/framework/datasource/basic-usage#creating-a-datasource-for-local-data

http://docs.telerik.com/kendo-ui/framework/datasource/overview#creating-a-local-datasource-in-line-with-ui-widget-configuration

If you think that this optimization will make a difference in your case, keep in mind that it is applicable only if the data will not change later, otherwise you will need to do a lot of manual coding related to rebinding or CRUD operations.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Raja
Top achievements
Rank 1
answered on 30 Oct 2014, 05:03 PM
I am already using shared datasource. But it is not working in the expected way. here is my code:

HTML Markup:
<div>
   <input id="PrimaryClass"
               name="PrimaryHazard"
               data-role="dropdownlist"
               data-value-field="Id"
               data-text-field="ClassName"
               data-bind="source: hazard" />
</div>
 
<div>
   <input id="SecondaryClass"
               name="SecondaryHazard"
               data-role="dropdownlist"
               data-value-field="Id"
               data-text-field="class"
               data-bind="source: hazard" />
</div>

Data Source:
var classNames = new kendo.data.DataSource({
    schema: { model: { id: "Id" } },
    transport: {
        read: {
            url: 'Api/Classes',
            dataType: 'json',
            type: 'GET'
        }
    }
});

Model:
var classModel = kendo.observable({
    title: "",
    class: classNames,
});

If i define this way there are two calls to the service to get class names. Do i need to retrieve the data separately and bind to drop-down lists once the read request end?
0
Raja
Top achievements
Rank 1
answered on 30 Oct 2014, 05:04 PM
Ignore the difference in Id and name for the controls. Its a typo.
0
Dimo
Telerik team
answered on 03 Nov 2014, 09:24 AM
Hello Raja,

Normally, a dataSource instance will not make unnecessary repetitive data requests even when used by multiple widgets, however, this is theoretically possible in certain scenarios. Make sure you are not calling read() instead of fetch() somewhere.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-fetch

Another possible option is to try setting data-auto-bind="false" to all widgets, which use a shared DataSource, except one widget, which will trigger the data request.

If you need more information oin your scenario, please send me a runnable example, so that I can inspect it.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
jagan
Top achievements
Rank 1
Iron
answered on 14 Nov 2022, 10:42 PM

Below is a sample code for shared datasource , everything looks well till I scroll to a point where the page changes which causes the grid to miss align , how to overcome this

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
      <style>
    h1 {
        color: Green;
    }

    div.scroll {
        margin: 4px, 4px;
        padding: 4px;
        background-color: #08c708;
        width: 3000px;
        overflow-x: auto;
        overflow-y: auto;
        white-space: nowrap;
    }

        #container {

  overflow: auto;
  width: 2000px;
}

#inner {
  overflow: hidden;
  width: 20000px;
}

.child {
  float: left;

  width: 500px;
  height: 50px;
}
    </style>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="example">

      <div id="container">
       <div id="inner">

        <div id="grid1" class="child"></div>
        <div id="grid2" class="child"></div>
        <div id="grid3" class="child"></div> 
        <div id="grid4" class="child"></div>
        <div id="grid5" class="child"></div>

         <div id="grid6" class="child"></div>
         <div  style="height: 2367px;"> </div>
</div></div></div>

        <script>
            $(document).ready(function () {

Window.Ds =  new kendo.data.DataSource({
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        schema: {
                            model: {
                                fields: {
                                    OrderID: { type: "number" },
                                    ShipCountry: { type: "string" },
                                    ShipName: { type: "string" },
                                    ShipCity: { type: "string" },
                                    ShipAddress: { type: "string" }
                                }
                            }
                        },
                        pageSize: 200
                    });

<!-- var ds1 =new kendo.data.DataSource(Window.Ds); -->
<!-- ds1.read(); -->
<!-- var ds2 =new kendo.data.DataSource(Window.Ds); -->
<!-- ds2.read(); -->
              var g1=   $("#grid1").kendoGrid({
                   // dataSource:Window.Ds ,
                    height: 2500,
                    sortable: true,
                    reorderable: true,
                    groupable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: true,
     scrollable: {
                virtual: true
            },
            resizable: true,
                    dataBound: function (e) {
                     var dataElement =$("#grid1").data("kendoGrid").content;

<!-- $('#grid1').data("kendoGrid").content.find(".k-virtual-scrollable-wrap").scroll(function () { -->

<!-- //     $("#grid2").data("kendoGrid").wrapper.find(".k-auto-scrollable").scrollTop( ); -->

                        <!-- $('#grid2 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop());  -->
  <!-- $('#grid3 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop());   -->
                         <!-- $('#grid4 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop());   -->
                        <!-- }); -->


                        $('#grid2 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop()); 
  $('#grid3 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop());  
                         $('#grid4 .k-scrollbar').scrollTop( $('#grid1 .k-scrollbar').scrollTop());  

                    },
                    columns: [{
                        field: "OrderID",
                        title: "Order ID",
                        width: 150
                    }, {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 300
                    }, {
                        field: "ShipName",
                        title: "Ship Name",
                        width: 300
                    }, {
                        field: "ShipAddress",
                        width: 400
                    }
                    ]
                });


               $("#grid3").kendoGrid({
                    dataSource: Window.Ds,
                    height: 2500,
scrollable: {
                virtual: true
            },
                    sortable: true,
                    reorderable: true,
                    groupable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: true,
                    dataBound: function (e) {

                    },
                    columns: [{
                        field: "OrderID",
                        title: "Order ID",
                        width: 150
                    }, {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 300
                    }, {
                        field: "ShipName",
                        title: "Ship Name",
                        width: 300
                    }, {
                        field: "ShipAddress",
                        width: 400
                    }
                    ]
                });


                 $("#grid2").kendoGrid({
                    dataSource: Window.Ds,
                    height: 2500,
scrollable: {
                virtual: true
            },
                    sortable: true,
                    reorderable: true,
                    groupable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: true,
                    dataBound: function (e) {

                    },
                    columns: [{
                        field: "OrderID",
                        title: "Order ID",
                        width: 150
                    }, {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 300
                    }, {
                        field: "ShipName",
                        title: "Ship Name",
                        width: 300
                    }, {
                        field: "ShipAddress",
                        width: 400
                    }
                    ]
                });
                 $("#grid4").kendoGrid({
                    dataSource: Window.Ds,
                    height: 2500,
                    sortable: true,
                    reorderable: true,
                    groupable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: true,
                    dataBound: function (e) {

                    },
                    columns: [{
                        field: "OrderID",
                        title: "Order ID",
                        width: 150
                    }, {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 300
                    }, {
                        field: "ShipName",
                        title: "Ship Name",
                        width: 300
                    }, {
                        field: "ShipAddress",
                        width: 400
                    }
                    ]
                });
                 $("#grid5").kendoGrid({
                    dataSource: Window.Ds,
                    height: 2500,
                    sortable: true,
                    reorderable: true,
                    groupable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: true, scrollable: {
                virtual: true
            },
                    dataBound: function (e) {

                    },
                    columns: [{
                        field: "OrderID",
                        title: "Order ID",
                        width: 150
                    }, {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 300
                    }, {
                        field: "ShipName",
                        title: "Ship Name",
                        width: 300
                    }, {
                        field: "ShipAddress",
                        width: 400
                    }
                    ]
                });
            });
        </script>

</body>
</html>

                                                                                                                                                                                                                                                      
0
Lyuboslav
Telerik team
answered on 16 Nov 2022, 12:00 PM | edited on 16 Nov 2022, 12:01 PM

Hello Jagan,

I noticed that colleague Neli, replied earlier in the thread (ticket ID: 1587140) regarding the same scenario about shared DataSource.

For convenience, please find below her reply 

However, the Grids are rendered as expected on my side. Here is a screencast where you could see their behavior and appearance. Could you please provide a little bit more details on the issue, as I am not sure that I understand it correctly? Please specify what exactly is misaligned,  are the rows or columns, etc.?

I would reccommend to keep the conversation in a single thread.

Regards,
Lyuboslav
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/.

Tags
General Discussions
Asked by
Raja
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Raja
Top achievements
Rank 1
jagan
Top achievements
Rank 1
Iron
Lyuboslav
Telerik team
Share this question
or