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

populate grid dynamically?

5 Answers 342 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Joel asked on 24 Jul 2012, 04:18 AM
Hi Guys!  I am new Asp.net MVC and KendoUI.... can you help me on how populate the grid dynamically? or for example if have to pick in a combobox, it will display the data according to the selected item???

Thank you very much! God bless

5 Answers, 1 is accepted

Sort by
0
Mohammed
Top achievements
Rank 1
answered on 24 Jul 2012, 02:44 PM

1) in the read declaration
Read("action","controller").data("getid")

2)function getid(){
return {id:ddlselect.value()};
}

3)client side bind a select event to ddlselect(combobox or drop down list)

4)in the select event
grid.dataSource.read();
0
Joel
Top achievements
Rank 1
answered on 24 Jul 2012, 06:15 PM
Hi Mohammed!

Thank you very much for the help.  But I still don't know how to apply the method... here is my code



@(Html.Kendo().ComboBox()
        .Name("combobox")
        .DataTextField("Text")
        .DataValueField("Value")
        .BindTo(new List<SelectListItem>()
        {
            new SelectListItem() {
                Text = "THEREAL 2010", Value = "THEREAL2010"  
            },
            new SelectListItem() {
                Text = "THEREAL 2011", Value = "THEREAL2011"  
            }
           
        })
        .SelectedIndex(0)
        .Events(e => e.Select("select")
       ))
      
      
 
    
    @(Html.Kendo().Grid(Model)    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.BLLHDBILLNO);
        columns.Bound(p => p.BLLHDSUBCODE);
    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Bills_Read", "Home")
         .Data("getid")
        
       
        )
        
    )
)
  

<script>

    function getid() {
        return {
            bllhdsubcode: $.get("#combobox.value")
        };
    }

</script>
         
<script>
   
    function select(e) {

        var dataItem = this.dataItem(e.item.index());
        return dataItem.Value;
       
        }
    
</script>
 
0
Joel
Top achievements
Rank 1
answered on 24 Jul 2012, 07:49 PM
I got it work Mohammed... Thanks a lot!
0
Gopi
Top achievements
Rank 1
answered on 15 Oct 2012, 03:33 PM
Hi Mohammaed , I am trying to work on the same functionality if you have example could you please send me , we also bought the kendo ui , my name is registed with controls , please help me quickly
0
Gopi
Top achievements
Rank 1
answered on 15 Oct 2012, 03:38 PM
i followed your suggestion

1. controller side :

  Added read method :   read( ([DataSourceRequest] DataSourceRequest reuestt , string  BusinessTypeID)

 
2. trying to pass this variable from grid to read method on selection change even of the dropdownlist

.DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "Company")
            .Data("additionalData")
        )
       

3.  function additionalData() {       
        return { BusinessTypeID: $.get("#BusinessTypes.value") };


4.  function select(e) {
        var dataItem = this.dataItem(e.item.index());
        return dataItem.Value;
    };

Please update me where i am missing , it erroring at javasript leavel.

Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Answers by
Mohammed
Top achievements
Rank 1
Joel
Top achievements
Rank 1
Gopi
Top achievements
Rank 1
Share this question
or