filter dropdown on MVC grid toolbar problems

[Marcel]

Hello,

I have an editable grid and added a filter dropdown on the toolbar

       .ToolBar(c=>
        {
            c.Template(Html.Kendo().DropDownList()
               .Name("tb_factory_list")
               .DataTextField("factoryname")
               .DataValueField("factoryid")
               .Events(e => e.Change("onChange"))
               .SelectedIndex(0)
               .DataSource(source =>
                   {
                       source.Read(read =>
                           {
                               read.Action("GetFactories", "Home");
                           });
                   })
               .HtmlAttributes(new { style = "width:300px;float:right" })
               .ToHtmlString());
        })


problems :

1) How do I get the 'add new item' button back  ?
.ToolBar(tb => { tb.Create();  })

2) the width of the dropdown is whatever the width of the initial displayed item.
I had to manually force the dropdown to be wider to accomodate the widest item in the dropdown (see above 300px)
Is that normal ? can the dropdown resize to the widest item in the dropdown ?

3) when the page is opened, the dropdown displays the first item, but the onchange event is not called.
So initially, the results are not filtered by whatever the dropdown shows.
after I select another item in the dropdown, then the onchange is fired and filtering happens.
How can I filter correctly when the page is first loaded ?

Thanks
Marcel

[Daniel]

Hello Marcel,

To your questions:

1. You should include the button in the template e.g.
   

   c.Template(t=>
      t.CreateButton() +
        Html.Kendo().DropDownList()
         .Name("tb_factory_list")
         .DataTextField("factoryname")
         .DataValueField("factoryid")
         .SelectedIndex(0)
         .DataSource(source =>
             {
                 source.Read(read =>
                     {
                         read.Action("GetFactories", "Home");
                     });
             })
         .HtmlAttributes(new { style = "width:300px;float:right" }).ToHtmlString()
     );

   
   
   
2. This is not supported. The dropdown does not auto adjust its width based on the items.
3. The change event is triggered only when the value is changed. To apply the filter immediately after loading the data, you can use the dataBound event e.g.
   

   function dataBound(e) {
       var item = this.dataItem();
       var grid = $("#GridID").data("kendoGrid");
       grid.dataSource.filter(...);
   }

Kind regards,
Daniel
the Telerik team

[Dongfen]

I have similar problem.  I wanted my grid has a dropdown filter and I also wanted the add new item there.
It works fine when just user dropdown or just use add new item button.  But I just cannot get it to work with both.  
I used your suggestion, but it did not work.   I got error "There is no DataSource Model Id property specified."  Here is my code:

.ToolBar(toolbar => {
toolbar.Template(t=>
                       t.CreateButton() +
                         Html.Kendo().DropDownList()
                          .Name("courtcases")
                          //.OptionLabel("All")
                          .DataTextField("court_case_number")
                          .DataValueField("court_case_sid")
                          .Events(e => e.Change("courtcasesChange"))
                          .SelectedIndex(0)
                          .DataSource(ds =>
                              {
                                  ds.Read(read =>
                                      {
                                          read.Action("ToolbarTemplate_CourtCase", "CaseNote");
                                      });
                              })
                          .HtmlAttributes(new { style = "width:300px;float:right" }).ToHtmlString()                    

                    );
})

Thanks
Dongfen

[Daniel]

Hello Dongfen,

The code looks correct. Have you specified an ID field with the DataSource Model? If yes, could you provide a runnable sample so I can investigate what exactly goes wrong?

Regards,
Daniel
Telerik

[Dongfen]

Hi, Deniel,

Thanks. 
After I added the ".Model(model => model.Id(n => n.NoteID))", it worked.
But now, I have another question, I wanted to change "Add new item" to different text?
When we have regular toolbar.Create(), we can just do toolbar.Create().Text("Add New Notes")
But I cannot add the Text property to CreateButton().  So is anyway I can change the text?
Here is updated code:

.ToolBar(toolbar => 
            {
                toolbar.Template(t=>
                        t.CreateButton() +
                          Html.Kendo().DropDownList()
                           .Name("courtcases")
                           .OptionLabel("All Court Cases")
                           .DataTextField("court_case_number")
                           .DataValueField("court_case_sid")
                           .AutoBind(false)
                           .Events(e => e.Change("courtcasesChange"))
                           .DataSource(ds =>
                               {
                                   ds.Read("GetCourtCases_Data", "CaseNote");
                               })
                           .HtmlAttributes(new { style = "width:200px;float:right" }).ToHtmlString()                    
                    );
            })
.Pageable(pager => { pager.PageSizes(true); })
.Sortable()
.Selectable()
.Events(events => events.Change("onSelectRow"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(n => n.NoteID))
.Read(read => read.Action("CaseNoteData", "CaseNote"))
 )

Dongfen

[Daniel]

Hi,

The CreateButton method has an overload that accepts the text:

t.CreateButton("Add New Notes")

Regards,
Daniel
Telerik

[Dongfen]

Thank you, Daniel. 
It is all working now.
Dongfen