Passing the Multiselect values to Grid in MVC

7 posts, 0 answers
  1. Divya
    Divya avatar
    7 posts
    Member since:
    Apr 2017

    Posted 09 Aug 2017 Link to this post

    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.

     

     

  2. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 11 Aug 2017 Link to this post

    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
    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.
  3. Divya
    Divya avatar
    7 posts
    Member since:
    Apr 2017

    Posted 11 Aug 2017 in reply to Stefan Link to this post

    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. 

  4. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 15 Aug 2017 Link to this post

    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
    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.
  5. Divya
    Divya avatar
    7 posts
    Member since:
    Apr 2017

    Posted 15 Aug 2017 in reply to Stefan Link to this post

    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!

  6. Divya
    Divya avatar
    7 posts
    Member since:
    Apr 2017

    Posted 16 Aug 2017 in reply to Divya Link to this post

    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? 

  7. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 17 Aug 2017 Link to this post

    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
    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.
Back to Top