Foreign Key option doesn't work

Thread is closed for posting
16 posts, 0 answers
  1. kevin
    kevin avatar
    5 posts
    Member since:
    Aug 2012

    Posted 04 Sep 2012 Link to this post

    Hi guys!
    I have a new problem with the foreign key option, I followed the steps of this page and even so doesn't work and i don't understand what is the problem.
    The code:
    prueba_grid.php
    <! DOCTYPE html>
    <html>
    <head>
        <title>Pagina de prueba</title>
    <link rel="stylesheet" type="text/css" href="styles/kendo.blueopal.min.css">
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/kendo.web.min.js"></script>
    <script type="text/javascript" src="js/cultures/kendo.culture.es-ES.min.js"></script>
    <script type="text/javascript">
     $(function() {
        kendo.culture("es-ES");
      var categorias = new kendo.data.DataSource({
        transport:
            {read:"categorias_usuarios.php"}
            });
     
        var datos= new kendo.data.DataSource(
            {transport: {read: "datos_grid.php",create: {url: "create_data.php",type: "POST"},update:{ url: "update_data.php", type:"POST"}, destroy:{ url: "delete_data.php", type:"POST"}},error: function(e) {
                alert(e.responseText);
            },schema: {data: "data",total: function(result) {
                        var data = this.data(result);
                        return data ? data.length : 0
                    },model: {id: "cod_maestros",fields: {id: {nullable:true,editable:false},nombres_usuarios: {validation: {required: true}},apellidos_usuarios: {validation: {required: true}},cod_nivel_usuario:{field:"cod_nivel_usuario"}}},pageSize: 5,batch: true}}
        );
        var grid = $("#grid").kendoGrid({dataSource:datos ,columns: [{title: "Nombres del Usuario",field: "nombres_usuarios",type: "text"}, {title: "Apellidos del Usuario",field: "apellidos_usuarios",type: "text"}, {title: "Nivel", field: "cod_nivel_usuario",values:categorias}, {command: ["edit", "destroy"],title: " ",width: "210px"}],pageable: {refresh: true,pageSizes: 5},toolbar:[{name:"create",text:"Agregar nuevo registro"}, {template: kendo.template($("#template").html())}],editable: "inline"});
        $("#category").keyup(function() {
            var value = $(this).val();
            if (value) {
                grid.data("kendoGrid").dataSource.filter({logic: "or",filters: [{field: "nombres_usuarios",operator: "contains",value: value}, {field: "apellidos_usuarios",operator: "contains",value: value}]})
            } else {
                grid.data("kendoGrid").dataSource.filter({})
            }
        });
     
    });
    </script>
    </head>
    <body>
    <div id="grid"></div>
    <script type="text/x-kendo-template" id="template">
                    <div class="toolbar" style="display:inline-block">
     
                        <label class="category-label" for="category">Buscar:</label>
                        <input type="text" id="category" style="width: 230px">
                    </div>
                </script>
      
    </body>
    </html
  2. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 05 Sep 2012 Link to this post

    The only way i can get it to work is if i use a static array. I cannot get it to work with a datasource.
  3. Kendo UI is VS 2017 Ready
  4. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 10 Sep 2012 Link to this post

    Hello,

    Indeed, the foreign key column does support only binding to a static array, as shown in this online demo. If it is required to use remote data, you should consider retrieving the data prior setting the grid configuration.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 10 Sep 2012 Link to this post

    That is a pretty big limitation to scalability. I would imagine the majority of situations where foreign keys involved require some kind of database connection and you cannot bring back all of the results in the table.
  6. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 11 Sep 2012 Link to this post

    Hello Joshua,

    Unfortunately, in order to show/match the foreign key value base on the id in the column will require the entire data. Also generally speaking it will be insufficient to do multiple requests to the server for the same data.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 11 Sep 2012 Link to this post

    I do recognize the challenges that you all face from a programmatic perspective. However you should add something to the documentation to say that it is only suitable for small sets of items. Without this kind of notice, people will continue to try and use it in a manner that it is not suited for. Such as when you want to search for items that could number in the thousands and performance considerations would prohibit pulling down 10k records. I also recognize that you should not be using a drop down to perform this task, which should make someone consider a different paradigm all together.
  8. Andres
    Andres avatar
    31 posts
    Member since:
    May 2011

    Posted 11 Dec 2012 Link to this post

    So, after loosing several days of trying to use a remote foreign key I found this post. I agree with Joshua that you need to put in the documentation this limitation. 

    However I have a question about it .... If you use the MVC wrappers is straight forward to use the foreign key column but if you are using a web api approach doesn't. There is a demo or a tutorial of how to use a foreign key binded to a remote datasource in a grid in similar fashion as it's generated by the MVC wrappers?

    Thanks in advance.
  9. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 13 Dec 2012 Link to this post

    Hello Andres,

    As I have already mentioned you can use either the built-in foreign key column and retrieve the data prior setting the grid configuration. Or use a custom column editor instead.

    All the best,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Andres
    Andres avatar
    31 posts
    Member since:
    May 2011

    Posted 13 Dec 2012 Link to this post

    I tried before with the custom column editor but it lacks of the foreign key filters. Can you show me a demo of how to preload the data? 
    Thanks in advance.
  11. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 13 Dec 2012 Link to this post

    If you are going to use a custom editor then you are going to need to do your own foreign key calculation.

    If you use the built in foreign key calculation, then you should use small data sets.

    Overall we are using a great product, but it still has some limitations, which are to be expected.
  12. Andres
    Andres avatar
    31 posts
    Member since:
    May 2011

    Posted 13 Dec 2012 Link to this post

    Yes, I already know how to use the custom editor. It works great but it lacks of column filtering. So, I want to use the built in calculation but I don't know how to be sure that the foreign key datasource is already loaded in order to configure the grid afterwards. 
  13. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 14 Dec 2012 Link to this post

    Hello Andres,

    The easiest way will be to use jQuery to retrieve the "foreign" data and to create the Grid widget within the success callback. Here you can find a small sample which demonstrates this approach.

    Greetings,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Ibrahim
    Ibrahim avatar
    2 posts
    Member since:
    Jul 2010

    Posted 18 Dec 2012 Link to this post

    what if i tried to change the filter menu (dom) control  and change it to a remote combobox

    var url='',//url to data
    g = $('#grid').data('kendoGrid'),
    cell = g.thead.find("th:not(.k-hierarchy-cell,.k-group-cell)")[2], //category columns
    input = $('input[data-bind]', $(cell).data("kendoColumnMenu").filterMenu.element),
     $(input).removeClass('k-textbox').removeAttr('data-role');

       $(input[0]).kendoComboBox({
                dataTextField: "Name",
                dataValueField: "Id",
                filter: "contains",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read: url
                    }
                }
            });
    $(input[1]).kendoComboBox({
                dataTextField: "Name",
                dataValueField: "Id",
                filter: "contains",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read:
    url
                    }
                }
            });

  15. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 18 Dec 2012 Link to this post

    We have run into similar issues. I think the brain block is thinking that the column should contain the foreign key rather than the actual display value. If your datasource includes the value rather than the key then you don't need to pre-populate a selection datasource and you can use an autocomplete type editor template.

    And yes, in your post action you would have to do a lookup to find the key value to store in your table.

    Currently, the only way to do this is manually. However, it would be nice if there were some type of column that allowed for this use case, since I agree, it is very common. 

    The better option may even be to not edit in the grid... use a pop-up editor mode or a link to an edit for where an autocomplete control can be used. As you say, bringing back thousands of possible values for a lookup isn't an option. We tend to as a rule only use a dropdownList if the set of choices is 100 or less.
  16. JCSCo
    JCSCo avatar
    16 posts
    Member since:
    Jun 2014

    Posted 25 Jun 2014 in reply to Rosen Link to this post

    Is there a way to use this with more than one drop down list? I have 3 drop downs in a grid.
  17. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 30 Jun 2014 Link to this post

    Hello Chris,

    Are you referring to the approach shown in the sample from my previous  message? If yes then indeed it can be used to load values for multiple foreign key column. However, you will need to wait for all of the requests to complete before assigning the result to the grid. Here you can find a modified version of the sample.

    On a side note, as the thread is quite old now and the discussion diverge from the original question I would like to ask you to open a separate support query if additional questions arise.

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready