Grid Toolbar and Column as Checkbox

[Su Ming]

Hi All

Am recently starting to work with Kendo Grid (i'm new to MVC) and had the following requirement.

1) A tool bar that contains the Save and Cancel Button, as well as a filter for months

So i did the following

.ToolBar(toolbar =>
        {
            toolbar.Save();
            toolbar.Template(@<text>
                <div class="toolbar">
                    <label class="fismonth-lable" for="fiscalmonth">Show fiscal months:</label>
                        @(Html.Kendo().DropDownList()
                            .Name("fiscalmonth")
                            .OptionLabel("All")
                            .AutoBind(false)
                            .Events(e => e.Change("fiscalmonthChange"))
                            .HtmlAttributes(new { style = "width:150px;" })
                            .DataSource(ds =>
                            {
                                ds.Read("Toolbar_FiscalMonth", "Home");
                            })
                        )
                </div>
        </text>);
        })

But only the dropdown showed up. Am i missing something?

 

Secondly, i have a Boolean column that i wish to be displayed and edited as a checkbox. This is what i did

columns.Bound(p => p.IsSelectedForValidation).Filterable(false).Title("").ClientTemplate("<input type='checkbox' #= IsSelectedForValidation? checked='checked' : '' #  id='#=ID#'></input>").Width(30);

It does show as a checkbox, and i can check and uncheck it, but the "real" editing will still take place as a dropdown of "true/false". Am i missing something?

 

Thank you so much for your kind help.

 

Regards,

Su Ming

[Boyan Dimitrov]

Hello Su Ming,

Straight to your questions: 

  1. Please refer to the Combine custom toolbar template with default batch edit toolbar. that demonstrates how to achieve the desired behavior. 

   2. My suggestion is to define a template column in order to avoid switching to edit mode, when the cell is clicked. In order to define a column as template column in the context of MVC you can use: 

columns.Template(@<text></text>).ClientTemplate("<input id='checkbox' onclick='parentChkBoxClick(this);' class='chkbxq' type='checkbox' />").Width(30);

Additionally in order to update the underlying model using this check box you can use the approach demonstrated in the Use Checkbox Column Templates and Edit how-to article. 

Regards,
Boyan Dimitrov
Telerik

[Su Ming]

Hi Boyan

Thank you so much for your help! It works!

Regards,

Su Ming