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

[Russell]

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!

[Aleksandar]

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

[Russell]

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]

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

 

[Aleksandar]

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>