Dynamically show / hide toolbar buttons?

[Chris]

I'd like to make the batch editing demo "context sensitive"  and hide buttons that aren't needed.  I'd also like to change the background of this toolbar.

http://demos.telerik.com/aspnet-mvc/grid/editingbatch?theme=windows7 

How can I accomplish this?

[Dimo]

Hello Chris,

You can hide and show Grid toolbar buttons by using standard DOM operations or jQuery. Knowing the buttons' CSS classes is enough to identify, reference and manipulate them.

t-grid-add
t-grid-save-changes
t-grid-cancel-changes

Using the Grid's exposed events will help you:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html

The toolbar's styling depends on the .t-toolbar CSS class. If you want a new background color applied, just override the current one with CSS, e.g.

.t-grid .t-toolbar
{
      background: ..... ;
}

All the best,
Dimo
the Telerik team

[Chris]

Since I posted I think it's best for me to use a ToolBarTemplate, 

How can I recreate the buttons (and call the backing functions) that are used in batch editing?

[Dimo]

Hello Chris,

You can recreate the buttons by using the same HTML markup and CSS classes that the native buttons use - you can inspect them with Firebug on the batch editing demo. Afterwards, attach click handlers which will execute the client API methods, which are described in the help article provided in my previous reply. The event handlers' attachment can occur in the Grid's OnLoad client event.

Regards,
Dimo
the Telerik team

[Chris]

I've added the buttons as you described... what else do I need to do to hook them into the Grid?  In other words how do I handle the commands "add" "cancel" and "save" similar to how the Grid would do it?

Here is some Javascript I am working with.  Should I make any changes, how should I handle the ADD event?  I'm in CellEdit/Batch mode.

function GridDNS_SaveBtn() {
    // works only during InCell editing mode.
var grid = $("#GridDNS").data("tGrid");
grid.submitChanges();
}
function GridDNS_CancelBtn() {
    // works only during InCell editing mode.
    var grid = $("#GridDNS").data("tGrid");
    grid.cancelChanges();
}

.ToolBar(toolBar => toolBar.Template(() =>
    { %>
    <label class="domainOrCustomer-label" for="domainOrCustomer-input">
        Search for company or domain:</label>
        <% Html.Telerik().ComboBox()
                .Name("domainOrCustomer")
                .DataBinding(binding => binding.Ajax().Cache(false)
                    .Delay(100).Select("t86", "TLSWorkflow/_GetDomainsOrCompanies"))
                .AutoFill(true).Encode(false)
                //.Effects(e=> e.CloseDuration(2).OpenDuration(2) )
                //.HiddenInputHtmlAttributes
                .HighlightFirstMatch(false)
                //.HtmlAttributes(
                //.InputHtmlAttributes
                //.OpenOnFocus(
                //.Placeholder(
                .Filterable(filtering =>
                {
                    filtering.FilterMode(AutoCompleteFilterMode.StartsWith)
                        .MinimumChars(1);
                })
                .HtmlAttributes(new { style = "width: 300px" })
                 .ClientEvents(events => events
                     .OnChange("onDomainDropdownText")
                     .OnDataBinding("Grid_onDataBindingReadOnly"))
                .Render();

                %>
                <a class="t-button t-grid-add" href="/something/Grid-mode-insert">Add</a>
                <a class="t-button t-grid-save-changes" href="#">Save</a>
                <a class="t-button t-grid-cancel-change" href="#">Cancel</a>
                <%

                if ((bool)ViewData["isAdvancedMode"])
                {
     %>
 <div id='GridDNSAdvancedButton' style='float:right'  onClick='showAdvancedSettings(this)'>Hide Advanced</div>
     <% }
   else
   {  %>
 <div id='GridDNSAdvancedButton' style='float:right'  onClick='showAdvancedSettings(this)'>  Advanced</div>
   <%  }


     }))

[Dimo]

Hello Chris,

Actually, if you are using the correct CSS classes, the Grid will hook up the required handlers automatically, so you don't need to do anything else. For example, if you take the following demo...

http://demos.telerik.com/aspnet-mvc/grid/editingbatch

... and use the following toolbar template...

.ToolBar(t => t.Template(() =>
{ %>
    <a class="t-button t-grid-add" href="?Grid-mode=insert">Add</a>
    <a class="t-button t-grid-save-changes" href="#">Save</a>
    <a class="t-button t-grid-cancel-changes" href="#">Cancel</a>
<% }))

... the buttons will work. Otherwise, you need to attach your own click handlers and execute manually the API methods, mentioned earlier.

Regards,
Dimo
the Telerik team

[Chris]

Hmmm ... like magic.  Thank you for the reply (and writing too-good-to-be code)

Can you tell me what the href value should be?   The "add" method is unclear to me....

[Dimo]

Hi Chris,

The href value for the Add button is needed only for scenarios that should work without Javascript and the required query string parameter is visible in my previous reply and the corresponding online demo. Otherwise the URL should point to the same view. If you are not going after supporting script-less browsers, the URL in the href attribute is not needed.


Greetings,
Dimo
the Telerik team