Passing the Multiselect values to Grid in MVC

[Divya]

Hello,

 

I have been trying to bind the Multiselect values to the grid using Telerik. I am able to get the multiselect values using Server Binding from the controller. But unable to show those values in the grid below that Multiselect.

 

Can anyone please help me with this? Anything would help. Thank you.

 

 

[Stefan]

Hello Veda,

Based on the provided information I can assume that there is a MultiSelect on the page and based on its value the Grid has to be populated.

If this is correct, please advise if the MultiSelect value will represent the shown columns of the Grid of the Grid or they will be a value in some of the Grid columns?

If the values will represent the Grid columns I can suggest to either use a dataTable, to set the column dynamically based on the MultiSelect value, or to change the columns dynamically using the setOptions method of the Grid:

http://www.telerik.com/forums/grid-mvc-dynamic-column-data

http://docs.telerik.com/kendo-ui/knowledge-base/change-a-widget-options-dinamically

If the scenario is different, please provide a runnable example demonstrating the setup and I will try to provide a suggestion best suited for it.

Regards,
Stefan
Progress Telerik

[Divya]

Thank you Stefan, So the Multiselect has product Names and I have my controller return JSON Result with Product Name, ID, Address etc.

I would like to display Selected ProductName, ID, Address, etc in the grid when the Product Name is selected and the submit button is clicked.  

I was able to get the ProductName in multiselect, but unable to figure out how to pass the selected multiselect productNames to the grid to display the corresponding id, address etc, I am presently using MVC for the back end process. 

Here is my multiselect -  

@(Html.Kendo().MultiSelect()
                  .Name("ObjProdlist")
                  .ValuePrimitive(true)
                  .AutoBind(true)
                  .AutoWidth(true)
                  .DataTextField("ProductName")
                  .DataValueField("id")
                  .Placeholder("Select Products ")
                  .ClearButton(true)

                   .DataSource(source =>
                   {
                       source.Read(read =>
                       {
                           read.Action("GetProduct", "Product");
                          

                       })
                       .ServerFiltering(false);
                   })
                   .Events(e => e.Change("onChange"))
        )

 

 

 

I really appreciate your help with this. 

Thanks in Advance Stefan. 

[Stefan]

Hello Veda,

Thank you for the clarification.

I made an example where the MultiSelect value is passed to the Grid and based on that value, the Grid is displaying only that ShipName(custom value).

Please have in mind that the example is selecting only based on the first value for demonstration purposes.

I attached the example for reference.

If additional assistance is needed, please modify the example to demonstrate the real scenario and I will gladly assist.

Regards,
Stefan
Progress Telerik

[Divya]

Thanks a ton Stefan, It did help a lot!!

In my present workflow, I have a ProductController which returns List of Products with more fields related to Product.

So these have been retrieved from another API, and using the same list I'm able to get those value fields for multiselect, but not with var result= Enumerable.Range(0, 100).Select(i => new ProductViewModel

{

orderID = i,

shipName = "shipname"+i;

});

Unable to figure out this part, since it's displaying shipname1,shipname3 etc. In my case where it is a list how do I address that field can you please help? Thanks in advance!

[Divya]

Method :

public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request, string valuesMultiSelect)
        {

            List<Content> ObjProdslist = TempData["products"] as List<Content>;

            var result = ObjProdslist ;

            if (!string.IsNullOrEmpty(valuesMultiSelect))
            {
             //   ObjProdslist = result.Where(x => x.prodName != null && x.prodName.Equals(valuesMultiSelect));
            }
            
         return Json(ObjProdlist.ToDataSourceResult(request));
        }

 

Grid : 

    @(Html.Kendo().Grid<Axiom.NCMS.WebApp.Models.Content>()
        .Name("SearchGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.id).Title("ID").Filterable(false);
            columns.Bound(p => p.prodName).Title("Product Name");
            columns.Bound(p => p.addressLn1).Title("Address");
         
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Products_Read", "Product").Data("MultiSelectValue"))
    
            ))

 

 <script>

    function onChange(e) {
    $('#SearchGrid').data('kendoGrid').dataSource.read()
    }

    function MultiSelectValue() {
    var value = $('#ObjProdlist').data('kendoMultiSelect').value()


    return {
    valuesMultiSelect: value[0]
    }
    }
    </script>

 

 

Unable to filter the value in the grid based on the multiselect value. Can you please help? 

[Stefan]

Hello Veda,

The provided code looks good and should filter the Grid as expected.

As the real scenario defer from the provided example, could you please use the example as a starting point and modify it or send another runnable example reproducing the issue?

This will help us to provide a suggestion best suited for the real application.

Regards,
Stefan
Progress Telerik