[TagHelpers] Grid with Toolbar Create Button (custom text) and other items.

1 Answer 468 Views
Grid Toolbar
Russell
Top achievements
Rank 1
Iron
Iron
Russell asked on 27 Sep 2021, 05:55 PM

Hi,

 

I have a partial example in Fluent for a Grid with a toolbar that has a (partially funcitoning) "Create" button.

I would like to duplicate this in taghelpers. Here is a Figma rendering using the Telerik Figma controls with some slight customizations:

 

Can you please provide the taghelpers for a toolbar such as this (with a "Create" button with custom CSS)? I don't need the CSS or anything, I just need the taghelpers to achieve this?

This is what I have so far:

   <div>
        <kendo-datasource name="dataSource2" type="DataSourceTagHelperType.Ajax" server-operation="false" page-size="10">
            <transport>
                <read url="@Url.Action("List_Employees", "Company1", new {clinicID = @Model?.ClinicID })" />
                <create url="@Url.Action("Add_Employee", "Company1")" />
            </transport>
        </kendo-datasource>
        <toolbar-items>
            <create/>
        </toolbar-items>
        <kendo-grid name="ClinicUsersGrid" datasource-id="dataSource2">
            <columns>
                <column field="EmployeeName" title="Name"/>
                <column field="EmployeePhone" title="Phone Number"/>
                <column field="Role" title="Role"/>
                <column field="EmployeeEmail" title="Email"/>
            </columns>
            <editable mode="@GridEditMode.PopUp"/>
        </kendo-grid>
    </div>
   

My toolbar isn't showing up. I tried inserting toolbar tags but it just complained? Any insight would be really helpful.

It's interesting to note that in the "Tags" for this Question, I cannot add TagHelpers as a subject.

 

Thanks!

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 30 Sep 2021, 10:44 AM

Hi Russell,

To add a Toolbar to the Grid with Search box and Add button you can use the following configuration:

         <kendo-datasource name="dataSource2" type="DataSourceTagHelperType.Ajax" server-operation="false" page-size="10">
            <transport>
                <read url="@Url.Action("List_Employees", "Company1", new {clinicID = @Model?.ClinicID })" />
                <create url="@Url.Action("Add_Employee", "Company1")" />
            </transport>
        </kendo-datasource>
        
        <kendo-grid name="ClinicUsersGrid" datasource-id="dataSource2">
            <columns>
                <column field="EmployeeName" title="Name"/>
                <column field="EmployeePhone" title="Phone Number"/>
                <column field="Role" title="Role"/>
                <column field="EmployeeEmail" title="Email"/>
            </columns>
            <toolbar>
                <toolbar-button name="search" text="Search Users"></toolbar-button>
                <toolbar-button name="create" text="Add"></toolbar-button>
            </toolbar>
            <editable mode="@GridEditMode.PopUp"/>
        </kendo-grid>

<style>
    .k-grid .k-grid-add {
        margin-left: auto;
        margin-right: 0;
    }
</style>

The style will ensure the Add button is positioned on the right-hand side of the Toolbar:

I hope this helps.

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Russell
Top achievements
Rank 1
Iron
Iron
commented on 30 Sep 2021, 05:49 PM | edited

Brilliant, thank you. The Add button does inline edit, and does not show the popup? How do I get it into popup mode? Also, how do I add a text item? Are these items documented somewhere for taghelpers?

                      <kendo-grid name="SubjectGrid" datasource-id="SubjectDataSource">
                          <columns>
                              <column field="FullName" title="Name" template="#= subjectRecordTemplate(data) #" />
                              <column field="DoctorName" title="Doctor" />
                              <column field="SubjectPhone" title="Phone" />
                              <column field="DateOfBirth" title="Date Of Birth" />
                          </columns>
                          <editable mode="@GridEditMode.PopUp" />
                          <toolbar>
                              <toolbar-button name="search" text="Search Users"></toolbar-button>
                              <toolbar-button name="create" text="Add"></toolbar-button>
                          </toolbar>
                      </kendo-grid>

Thoughts?
Russell
Top achievements
Rank 1
Iron
Iron
commented on 30 Sep 2021, 05:57 PM

Hmmm... My search floats right, not left and adding a class attribute doesn't seem to change anything?

 

Aleksandar
Telerik team
commented on 05 Oct 2021, 10:43 AM

To add additional text and/or elements you should use a template for the Toolbar, as demonstrated in this Grid ToolBar Templates Demo. I see however that such configuration for the TagHelper is not exposed so I have logged an issue on the matter, that you can track via this GitHub item

Until this is available you can add some text by adding a custom Toolbar command and setting the desired content via it's template:

<toolbar>
                <toolbar-button name="custom" template="$('#template').html()"></toolbar-button>
                <toolbar-button name="search" text="Search Users"></toolbar-button>
                <toolbar-button name="create" text="Add"></toolbar-button>
</toolbar>


<script id="template" type="text/x-kendo-template">
    <span>Users</span>
</script>

As for why the popup window is not being displayed I see in the snippet provided that the DataSource configuration is missing. Refer to the TagHelper documentation for details on configuring the DataSource for editing. Note that the schema should be defined and the model Id provided:

<datasource  page-size="20" type="DataSourceTagHelperType.Custom" custom-type="odata" batch="true">
        <transport>
            <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" />
            <update url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Update"  />
            <destroy url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Destroy"   />
            <create url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products/Create" />
        </transport>
        <schema  >
            <model id="ProductID">
                <fields>
                    <field name="ProductName"></field>
                    <field name="UnitPrice" type="number"></field>
                    <field name="UnitsInStock" type="number"></field>
                </fields>
            </model>
        </schema>
    </datasource>

Tags
Grid Toolbar
Asked by
Russell
Top achievements
Rank 1
Iron
Iron
Answers by
Aleksandar
Telerik team
Share this question
or