How to set the multiselect combo box values as selected dynamically in jquery

6 posts, 0 answers
  1. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 18 Oct 2017 Link to this post

    Hi,

    i am generating a grid with Multi select Combo box in it using a column template.

    i am able to select the multiselect combo values and able the read the selected items.

     

    i have one more requirement, i have to select/check the values of multiselect combo values dynamically through JQuery.

    Please help me how to do that? Below is the code.

    This is the code of a grid, where i am creating Multiselect combo box in one of the cell.

    var dataSource = new kendo.data.DataSource({

            transport: {
                read: function (e) {
                    e.success(result);
                },
                update: function (e) {
                    e.success();
                },
                create: function (e) {
                    var item = e.result;
                    item.Id = result.length + 1;
                    e.success(item);
                }
            },
            schema: {
                model: {
                    id: "SNO",
                    fields: {
                        SNO: { type: "int" },
                        PassengerStatus: { type: "int" },
                        ElevatorShutdown: { type: "bool" },
                        TrappedPassenger: { type: "bool" },
                        UnitControllerStatus: { type: "bool" },
                        ActiveVoiceVideoCall: { type: "bool" },
                        controllerStatus: { type: "bool" },
                        Delay: { type: "int" }
                    }
                }
            }
        });

        //my own
        $("#UnitgridPerf").kendoGrid({
            dataSource: dataSource,

            editable: { createAt: "bottom" },
            dataBound: function (e) {
                createMultiSelect(e);

            },
            // pageable: true,

            columns: [
                {
                    field: "SNO", width: "50px", editable: function (arg) { return true; }, headerAttributes: {

                    }
                },

                {
                    field: "PassengerStatus", title: "PD", editable: function (arg) { return true; }, width: "40px"
                    , headerAttributes: {

                    }
                },
                {
                    field: "ElevatorShutdown", title: "OOS", editable: function (arg) { return true; }, width: "50px"
                    , headerAttributes: {

                    }
                },
                {
                    field: "TrappedPassenger", title: "TP", editable: function (arg) { return true; }, width: "50px"
                    , headerAttributes: {

                    }
                },
                {
                    field: "UnitControllerStatus", title: "REM", width: "170px", editable: function (arg) { return false; }, template: "<select class='Multiselectval'></select>"
                    , headerAttributes: {

                    }


                },
                {

                    field: "ActiveVoiceVideoCall", title: "VC", width: "50px", editable: function (arg) { return true; }
                        , headerAttributes: {

                        }

                },
                {
                    field: "controllerStatus", title: "CTRL", width: "50px", editable: function (arg) { return true; }
                        , headerAttributes: {

                        }
                },

                {

                    field: "Delay", editable: function (arg) { return true; }, width: "50px"
                    , headerAttributes: {

                    }
                },
              { command: "destroy", title: "", width: "40px" }

            ],


        });


        // code to add Multi Select Combo box to Kendo Grid Cell

        var checkInputs = function (elements) {
            elements.each(function () {
                var element = $(this);
                var input = element.children("input");

                input.prop("checked", element.hasClass("k-state-selected"));

            });
        };
        // create MultiSelect from select HTML element
        function createMultiSelect(e) {
            $(".Multiselectval").append(new Option('ALARM_HANDLER_TASK', enumRemComponents.ALARM_HANDLER_TASK));
            $(".Multiselectval").append(new Option('PERFORMANCE_TASK', enumRemComponents.PERFORMANCE_TASK));
            $(".Multiselectval").append(new Option('REM_DEVICE_AUTH_TASK', enumRemComponents.REM_DEVICE_AUTH_TASK));
            $(".Multiselectval").append(new Option('SERIAL_LINK_TASK', enumRemComponents.SERIAL_LINK_TASK));
            $(".Multiselectval").append(new Option('STATE_MACHINE_TASK', enumRemComponents.STATE_MACHINE_TASK));
            $(".Multiselectval").append(new Option('UNKNOWN_TASK', enumRemComponents.UNKNOWN_TASK));

            var grid = e.sender;
            required = $(".Multiselectval").kendoMultiSelect({
                itemTemplate: "#:data.text# <input type='checkbox'/>",
                autoClose: false,
                dataBound: function () {
                    var items = this.ul.find("li");
                    setTimeout(function () {
                        checkInputs(items);
                    });
                },
                change: function () {
                    var items = this.ul.find("li");
                    checkInputs(items);
                }
            }).data("kendoMultiSelect");
        }

    The above code is working properly.

     

    Now i want to select the Multiselect combo values based on the data i got from Database., below is the code i am trying for that, but i am unable to make the values selected.

     var grid = $('#UnitgridPerf').data("kendoGrid");
                grid.dataSource.data(result); 

                for (var j = 0; j < UnitPattern.length; j++) {
                    if (PatternName == UnitPattern[j].PatternName) {
                        for (var i = 0; i < UnitPattern[j].Devicestatus[0].ComponentStatus.length; i++) {

                            var gridRows = grid.tbody.find('tr');


                            var row = $(gridRows[i]);
                           
                            var rid = row.find('.Multiselectval');
                            alert(rid[1][UnitPattern[j].Devicestatus[0].ComponentStatus[i].Component].value);

                            
                           rid[1][UnitPattern[j].DeviceStatus[0].ComponentStatus[i].Component].value.checked;

                       

                          // $('.rid option[value=' + UnitPattern[j].DeviceStatus[0].ComponentStatus[i].Component + ']').attr('selected', true);
                        }
                    }

    Please help on this.

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 20 Oct 2017 Link to this post

    Hi Pogula,

    You could use the "value" method of the MultiSelect widget for selecting a single or multiple items by their values:
    You could also take a look at the following HowTo example for using MultiSelect as a custom editor in Grid:


    Best 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.
  3. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 20 Oct 2017 in reply to Konstantin Dikov Link to this post

    Hope you have not understand my query, can you please look at the code i have sent.

    i have used Multi select combo template in a different way, and i am trying to select the multiselect combo values dynamically by reading the values from database.

    based on the values from database, i am trying to select the particular value in combo box.

    as you have suggested multiselect.value("Item1"); this option is not working for me.

     

    Please look at the code snippet and let me know how can i do that?

     

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 24 Oct 2017 Link to this post

    Hi Pogula,

    Could you please create a dojo example with your scenario that we can work on:
    I would also suggest that you avoid placing editors in the template of the columns and use the editor templates instead (as demonstrated in the HowTo article from my previous post).


    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.
  5. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 25 Oct 2017 in reply to Konstantin Dikov Link to this post

    HI,

    Please find the dojo for my code.

    http://dojo.telerik.com/eFaDUq/2

    Up to here i dont have any issue, it is working fine for me, i am saving all the grid data in to database.

    When i am loading the data back from database, for ex: i have selected 1 and 2 check boxes in 'REM' column saved in to DB as record X.

    when i am loading that record back, i have to show the selected column for record x i.e in this scenario i have to show as 1 and 2 check boxes are selected. i am not able to do that. for that i have used the code below.

    function loadRecord()

    {

    var multiselect = $(".Multiselectval").select("kendoMultiSelect");
                            var x = multiselect[1];
                            for(var k=0;k<x.length;k++) // this loop is to select each and every selected option in record X
                                multiselect.prop(x[UnitPattern[j].Devicestatus[0].ComponentStatus[i].Component], 'selected');

    }

    i am not understanding how can i do this, i have to show the selected items back while loading the kendo.

    Hope u have understand my query now.

     

    And  

    I would also suggest that you avoid placing editors in the template of the columns and use the editor templates instead (as demonstrated in the How To article from my previous post).

     

    As you suggested, how this Editor templates will solve my issue, while loading the record and show the selected items based on the values in DB, Please suggest that also. 

     

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1011 posts

    Posted 27 Oct 2017 Link to this post

    Hi, Pogula,

    Thank you very much for the provided Dojo to help illustrate your case.

    I have inspected it and here is my feedback for you:

    1. The column which has the Kendo UI MultiSelect is bound to a field of type int. I believe that it should be either an array of integers or an array of objects. 
    2. "myobject" is undefined in line 30. Could you please clarify what is myobject and if it is relevant to the scenario?
    3. The schema model definition the type should be "number", not "int"

    Finally, my colleague suggested that it is not a good practice to have inline editors by design in Kendo UI Grid. I suggest inspecting this Dojo which shows how to bind to a Kendo UI MultiSelect as an editor and see if it will fit your scenario.

    http://dojo.telerik.com/@bubblemaster/onECEr

    Kind Regards,
    Alex Hajigeorgieva
    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.
Back to Top