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

Filling a datasource

5 Answers 242 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Antoine
Top achievements
Rank 1
Antoine asked on 26 Jun 2017, 12:08 PM

Hi,

 

I'm a beginner in the use of your framework.

I'm trying to use a listboxcontrol containing hours that I can select for 7 different days of the week.

When I oepn the window containing my listbox I refresh my columns with data already selected for the day I'm working on or reloading my listbox (if no data was saved.

Here is my function :

function onOpenRefresh(e) {

        var caseCochee = "";
        // On récupère la première case cochée
        if ($("#header-chb-lundi").is(':checked')) {
            caseCochee = "lundi";
        } else if ($("#header-chb-mardi").is(':checked')) {
            caseCochee = "mardi";
        } else if ($("#header-chb-mercredi").is(':checked')) {
            caseCochee = "mercredi";
        } else if ($("#header-chb-jeudi").is(':checked')) {
            caseCochee = "jeudi";
        } else if ($("#header-chb-vendredi").is(':checked')) {
            caseCochee = "vendredi";
        } else if ($("#header-chb-samedi").is(':checked')) {
            caseCochee = "samedi";
        } else if ($("#header-chb-dimanche").is(':checked')) {
            caseCochee = "dimanche";
        } else {
            alert("Vous n'avez pas choisi de jour !!!");
            return;
        }
        
        var sourceUrl = "@Url.Action("GetTranchesHoraires", "EngagementRadioSM")";
        var dataSource1 = new kendo.data.DataSource({
            transport: {
                read: sourceUrl,
                dataType: "jsonp"
            }
        });

        // On réinit nos deux listbox
        var listeTranches1 = $("#listbox1").data("kendoListBox");
        var listeTranches2 = $("#listbox2").data("kendoListBox");

        listeTranches1.setDataSource(dataSource1);
        listeTranches1.dataSource.read();
        listeTranches2.dataSource.data([]); // On vide à gauche
        // On crée un tableau trié
        var mesTranchesTrie = [];
        if (mesTranches.length > 0 && mesTranches.find(function (e) { return e.sweekDay === caseCochee; })) {
            debugger;
            mesTranchesTrie = mesTranches;
            mesTranchesTrie.sort(function (a, b) { return b["nid_tranche"] - a["nid_tranche"]; });
            var tranche = [];
            for (var k = 0; k < mesTranchesTrie.length; k++) {
                if (mesTranchesTrie[k].sweekDay == caseCochee) {
                    tranche.push({ nid_tranche_horaire: mesTranchesTrie[k].nid_tranche, slibelle: mesTranchesTrie[k].slibelle });
                }
            }
            debugger;
            var d2 = new kendo.data.DataSource({ data: tranche });
            d2.read();
            listeTranches2.setDataSource(d2);

            var d1 = listeTranches1.dataSource;
            var dret = new kendo.data.DataSource();
            for (var i = 0; i < d2._data.length; i++) {
                var idTanche2 = d2._data[i].nid_tranche_horaire;
                for (var j = 0; j < d1._data.length; j++) {
                    var idTanche1 = d1._data[j].nid_tranche_horaire;
                    if (idTanche2 != idTanche1) {
                        dret.add({ nid_tranche_horaire: d1._data[j].nid_tranche_horaire, slibelle: d1._data[j].slibelle });
                    }
                }
                d1 = dret;
                dret = new kendo.data.DataSource();
            }
            debugger;
            listeTranches1.setDataSource(d1);
        } else {
            debugger;
            listeTranches1.setDataSource(dataSource1);
            listeTranches1.dataSource.read(); // On remplit à droite
        }
    };

 

And here is my EngagementRadioSM function alloowing me to get the hours that I put in my Listbox:

public JsonResult GetTranchesHoraires()
        {
            List<TrancheHoraire> lls_ret = new List<TrancheHoraire>();
            var list = _context.P_GCC_GET_TRANCHES_HORAIRES();
            foreach (var line in list)
            {
                TrancheHoraire obj = new TrancheHoraire
                {
                    nid_tranche_horaire = line.nid_tranche_horaire,
                    slibelle = line.slibelle
                };
                obj.bisValid = false;
                lls_ret.Add(obj);
            }
            return Json(lls_ret, JsonRequestBehavior.AllowGet);
        }

mesTranches is an array where I put my data for the different selected hours and days.

My main problem is that I cannot reset my listbox 1 when I already have data for the selected day in mesTranches ...

Hope my explanation isn't too bad (I'm french ...)

Thanx a lot for your help

Antoine

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 28 Jun 2017, 05:40 AM
Hello Antoine,

Thank you for the provided code.

Could you please confirm which part of the code is resetting the values?

I noticed that in the if statement there are two possible new dataSources(d1 and dataSource1) for listeTranches1 and they both have values.

In general, I can suggest before assigning a new dataSource, to ensure that that dataSource has not data in it.

The other option if only the data has to be changed, is to use the data method of the dataSource to change its data:

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

If additional assistance is needed, please provide a runnable example, so we can inspect it locally and check what may be causing the issue.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Antoine
Top achievements
Rank 1
answered on 28 Jun 2017, 09:24 AM

Well,  semms to work (I'm entering /EngagementRadioSM/GetTranchesHoraires to retrieve the data)

when I do :

    listeTranches1.setDataSource(dataSource1);
        listeTranches1.dataSource.data();

0
Antoine
Top achievements
Rank 1
answered on 28 Jun 2017, 09:28 AM

Sorry didn't finish my post ... 

So my problem is that in debug mode  listeTranches1 still doesn't contain any data ...listeTranches1 .datasource._data is still empty ...

As the project I'm working on is quite big (and we have to release a version tomorrow) I won't have time to provide a runnable example :-(

 

0
Antoine
Top achievements
Rank 1
answered on 28 Jun 2017, 01:11 PM

Ok ... figured out that I had to use a fetch like this :

dataSource1.fetch(function () {
            var data = dataSource1.data();
            listeTranches1.setDataSource(data);
        });

Now, only got to figure out how how to correctly set my other dataSource after suppressing lines because theis code doesn't seem to work :

var d1 = listeTranches1.dataSource;
            var dret = new kendo.data.DataSource();
            for (var i = 0; i < d2._data.length; i++) {
                var idTanche2 = d2._data[i].nid_tranche_horaire;
                for (var j = 0; j < d1._data.length; j++) {
                    var idTanche1 = d1._data[j].nid_tranche_horaire;
                    if (idTanche2 != idTanche1) {
                        dret.add({ nid_tranche_horaire: d1._data[j].nid_tranche_horaire, slibelle: d1._data[j].slibelle });
                    }
                }
                d1 = dret;
                dret = new kendo.data.DataSource();
            }
            listeTranches1.setDataSource(d1);

On my test d1 has 36 data but listeTranches1 still has 39 data !!!

0
Stefan
Telerik team
answered on 30 Jun 2017, 05:33 AM
Hello Antoine,

I can assume that there is an issue with the variable scopes.

I made an example based on the provided code, and the new dataSource with the correct data is applied:

http://dojo.telerik.com/EjEfo

It seems, that the issue is caused by a custom part of the code which we are overlooking at the moment. If possible please modify the provided example or send us a new one reproducing the issue.

Thank you in advance.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ListBox
Asked by
Antoine
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Antoine
Top achievements
Rank 1
Share this question
or