Multi-select field inside a Grid

[William Wong]

Hi, I have data bind grid and one of the column is bind to a column of IEnumerable<string>. The field would be displayed as comma delimited text inside the grid which is fine. However I would like to edit it as a multi-select drop down list using dialog edit. Any idea? I have changed the datasource of the dropdown to the list of selectable items using the ActionComplete client side event and wonder if there is a more proper way in defining the selection list.

[Ragavee U S]

Hi William,

Thanks for your interest in Syncfusion Products.

We have analyzed your requirement to show multiSelect dropdown on editing a column. We are glad to let you know that we can achieve your requirement using the EditTemplate feature of the grid.

The EditTemplate gets or sets a template for the column to display a custom editor for editing the column values. Please refer the below Online link for more information on EditTemplate.

Class Reference link: http://help.syncfusion.com/UG/JS_CR/ejGrid.html#columns->editTemplate

Online Sample Link: http://mvc.syncfusion.com/demos/web/grid/edittemplate

For your convenience, we have created a sample based on your requirement and the same can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118205/Sample-1576860067.zip

In the above sample, we have used EditTemplate to render multi select dropdown list. Please refer the below code snippet.

@(Html.EJ().Grid<object>("Grid")

    . . . . .

           col.Field("OrderList").HeaderText("Order List").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();               

                })

)

<script type="text/javascript">

    var dropData = @Html.Raw(Json.Encode(ViewData["data"])) //dataSource for dropdownlist obtained from server side

    function create(args) {

        return "<input>";

    }

    function read(args) {

        return args.ejDropDownList("getValue");

    }

    function write(args) {

        var selIndex = [];

        if (args.rowdata != undefined) //code to get the selectedIndexes for selecting the values in dropdown.

        {

            for (i = 0; i < args.rowdata["OrderList"].length; i++)

            for (j = 0; j < dropData.length; j++){

                if (args.rowdata["OrderList"][i] == dropData[j].value) {

                    selIndex.push(j);

                    break;

                }

            }

        }

        args.element.ejDropDownList({ width: "100%", dataSource: dropData, fields: { id: "text", text: "text", value: "value" }, showCheckbox: true, allowMultiSelection: true, selectedItems: args.rowdata !== undefined ? selIndex : "" });//enabling multi select dropdowns

    }

</script>

[In Controller]

public ActionResult Index()

        {           

            List<string> list = new List<string>();

            list.Add("Cream");

            list.Add("Milk");

            list.Add("Eggs");

            list.Add("Butter");

            list.Add("Curd");

            list.Add("yogurt");

            //code for grid dataSource

            var drop = list.ToList();

            var dropData = new List<object>();

            foreach (var li in drop)

            {

                dropData.Add(new { value = li, text = li });

            }

            ViewData["data"] = dropData;

            return View();

        }

Please try the above sample and get back to us if you need any further assistance.

Regards

Ragavee U S

[William Wong]

Thanks Ragavee! I have successfully binded a multi-select dropdown. For those who needs similar features, I have only changed the return value of javascript function "read" to an array in order to update the changes as IList in the controller code base, i.e.

function read(args) {
    return args.ejDropDownList("getValue").split(",");
}

However I need to manually refresh the grid after a new item operations in order to see the added item? In the ApiController I have returned the complete list as PageResult<ItemType> at the end of the Post handler. Am I missing something here?

[Ragavee U S]

Hi William,

Thanks for your update.

We have analyzed the reported issue and we regret to let you know that we are unable to reproduce the issue at our end. While adding a record, the added record will be added to the database based on the primary key value of the table.

Also, for your kind information, if IDENTITY is set to the primary key column in the database for the table, then the added record will be inserted at the end and thus will be displayed at the last page of the grid.

For your convenience, we have created a simple sample in WebApi and the same can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118205/WebApi_Sample-216402421.zip

Please try the above sample and get back to us if we have misunderstood your requirement by providiing more and clear information on the issue. Also, please share your view code and controller code with us along with the screenshot of the issue which will be helpful for us to analyze the issue further and provide you response accordingly.

Please let us know if you have any queries.

Regards,

Ragavee U S

[William Wong]

Thank you very much for your reply. I have no problem in testing your sample. However I am still stuck in the update issue in my own projects. When the grid is empty (i.e. no data), the new item would appear immediately after addition. When I try to add one more item, the monitored network traffic (using developer tab of IE) shows that the new item has been added and the grid issued a GET request itself and the new item is included in the json data returned but the grid is not being updated anyway.

I would also like to ask the proper return type of for the apicontroller, e.g. in the sample the return type is void for POST, PUT and DELETE. I wonder if I should return some data instead, especially for the POST method (i.e. create operation) due to the use of database generated field (e.g. autoinc as primary key)?

[William Wong]

Just want to add some more info. In my own projects. The footer of the grid (i.e. x of x pages (xx items) and the pager if appropriate) would be updated accordingly after the new item. It is the table itself not being updated while edit and delete operations have no problem in updating the table.

[Ragavee U S]

Hi William,

We considered this query “AddRecord issue with Identity property” as a bug and a support incident has been created under your account to track the status of this issue. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Please get back to us if you need any further assistance.

Regards

Ragavee U S