This is a migrated thread and some comments may be shown as answers.
Dynamically show / hide toolbar buttons?
7 Answers 117 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Chris
Top achievements
Rank 2
Chris asked on 06 Feb 2012, 08:14 PM
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?

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 08 Feb 2012, 10:00 AM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Chris
Top achievements
Rank 2
answered on 21 Feb 2012, 04:01 AM
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?
0
Dimo
Telerik team
answered on 21 Feb 2012, 08:16 AM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Chris
Top achievements
Rank 2
answered on 04 Mar 2012, 05:30 PM
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>
   <%  }
      
      
     }))
0
Dimo
Telerik team
answered on 06 Mar 2012, 11:11 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
Chris
Top achievements
Rank 2
answered on 06 Mar 2012, 07:43 PM
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....
0
Dimo
Telerik team
answered on 07 Mar 2012, 08:08 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
Tags
Grid
Asked by
Chris
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Chris
Top achievements
Rank 2
Share this question
or