Dependent List

Posted by Shira Taytelbaom on 16-Nov-2016 05:36

Hi,

Do you have an example of Dependent List implemented in Telerik, that uses the Dependent List field in Rollbase?

The idea of it is that the second list is dependent on the first one- the second list will fill up with different items, according to what was selected in the first list.

I tried to do it, with the telerik example, and I got the two lists, but I got the second one full with all the items (it wasn't dependent by the first list)

It'll help me a lot, if you have an example of such a thing.

Thanks,

Shira

All Replies

Posted by egarcia on 16-Nov-2016 06:01

Hello Shira,

Just to make sure of the context.

Are you using the Rollbase REST API or the JSDO (with a catalog)?

Are you working with Telerik Platform for Mobile or Kendo UI directly?

I do not have an example handy but here is some information that may help.

In general, you should be able to adapt any of the Kendo UI samples to use the JSDO to access a Rollbase backend.

Have you looked at this example: demos.telerik.com/.../cascadingdropdownlist ?

The key on using the cascadeFrom option is that the DataSource should use serverFiltering; true.

I hope this helps.

Edsel

Posted by Shira Taytelbaom on 16-Nov-2016 06:30

Hi,
Thanks for your answer,
I'm using the JSDO with the Catalog, and I'm working with Telerik Platform for Mobile.
I looked at that example, and I was trying to do the same,
I sent you here some of my code, it still doesn't work well....

Here is my code:
HTML:

div id="example">
    <div class="demo-section k-content">
        <h4>Categories:</h4>
        <input id="categories" style="width: 100%;" />
        <h4 style="margin-top: 2em;">Products:</h4>
       
        <input id="products" style="width: 100%;" /><!--disabled="disabled"-->
        <button class="k-button k-primary" id="get" style="margin-top: 2em; float: right;">View Order</button>
    </div>
</div>

JS:
  var categories = $("#categories").kendoDropDownList({
                        optionLabel: "Select category...",
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: {
                            type: "odata",
                            serverFiltering: true,
                            //transport: {
                            //    read: multiData,
                            //}
                            data: multiDataSubject,
                        }

                    }).data("kendoDropDownList");

  //var products = $("#products").kendoDropDownList({
                    //    autoBind: false,
                    //    cascade

Posted by Shira Taytelbaom on 16-Nov-2016 06:31

Thanks for your answer,

I'm using the JSDO with the Catalog, and I'm working with Telerik Platform for Mobile.

I looked at that example, and I was trying to do the same,

I sent you here some of my code, it still doesn't work well....

Here is my code:

HTML:

div id="example">

   <div class="demo-section k-content">

       <h4>Categories:</h4>

       <input id="categories" style="width: 100%;" />

       <h4 style="margin-top: 2em;">Products:</h4>

       <input id="products" style="width: 100%;" /><!--disabled="disabled"-->

       <button class="k-button k-primary" id="get" style="margin-top: 2em; float: right;">View Order</button>

   </div>

</div>

JS:

 var categories = $("#categories").kendoDropDownList({

                       optionLabel: "Select category...",

                       dataTextField: "text",

                       dataValueField: "value",

                       dataSource: {

                           type: "odata",

                           serverFiltering: true,

                           //transport: {

                           //    read: multiData,

                           //}

                           data: multiDataSubject,

                       }

                   }).data("kendoDropDownList");

 //var products = $("#products").kendoDropDownList({

                   //    autoBind: false,

                   //    cascadeFrom: categories,

                   //    optionLabel: "Select product...",

                   //    dataTextField: "text",

                   //    dataValueField: "value",

                   //    dataSource: {

                   //        type: "odata",

                   //        serverFiltering: true,

                   //        //transport: {

                   //        //    read: multiData,

                   //        //}

                   //        data: multiDataViolation,

                   //    }

                   //}).data("kendoDropDownList");

Thanks a lot for your help!

Shira

Posted by egarcia on 17-Nov-2016 05:19

Hello Shira,

Thank you for the info.

The only thing in particular that I see in your example, is that you are using the data property but this should be ok.

What is not working?

Are you getting an error message?

BTW, here is an example using the cascadeFrom property with the JSDO (with OpenEdge as the backend):

oemobiledemo.progress.com/.../CascadingDropDownList.html

I hope this helps.

Posted by Ruben Dröge on 17-Nov-2016 06:12

I agree with Edsel here. Are you getting errors (client-side / server-side) and if so what are these errors. I could imagine the filtering going wrong, the following example also contains code that sets the filter for a certain datasource to a certain field within that datasource:

jsfiddle.net/.../

This thread is closed