Questions on Kendo UI for jQuery Forum

0 answers

9 views

Kendo jQuery: (Firefox) Button onClick does not work in ListView!

Hello!

I am trying to use ListView with Buttons inside a Tabstrip. I want the user to be able to select an item to view a report.
As part of this list, I want a clickable hamburger button for the user to open up a popover menu for additional settings.

This setup works for all browsers when I do not perform the "filter" function. However on Firefox (only), using this filter function on the ListView causes my Kendo buttons inside the list to suddenly not fire the onClick handlers.

    $("#listView").data("kendoListView").dataSource.filter({      
      filters: [
        { field: "Document_Number", operator: "contains", value: "J82901" }
      ]
    });

On Chrome and Edge, the Kendo buttons work just fine even after this filter. On Firefox however, I notice that the Kendo buttons are unformatted and do not respond to the click events when logging output in the console.

To reproduce the issue, I have provided the following dojo code: Sandbox Code here

Here is a sample image of the output: I have a Tabstrip with a ListView nested within. Each ListView entry has a button attached to it via a template. On click, the button should fire the click handler and print output to the console. (And a popover in the future)

Any help to get this working on Firefox would be greatly appreciated! This is an older version of Kendo UI (Sept 2021).

Thanks.

Button

Filter

ListView

Popover

TabStrip

Templates

updated question on 29 Apr 2024

0 answers

68 views

how can I Redirect AWAY from a RadMultiPage with RadTabStrip to a different aspx page ?

I have an ASP.Ajax tabstrip with the firs tab linked to another page, all other tabs with html code on multipage.

I'm not able to redirect on the first tab directly to other "Main.aspx" page.

What I'm making wrong?

    <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
        SelectedIndex="1">
        <Tabs>
            <telerik:RadTab Text="People List" runat="server" NavidateUrl="Main.aspx" Target="_blank">
            </telerik:RadTab>
            <telerik:RadTab Text="Registry " runat="server" Selected="True">
            </telerik:RadTab>
            <telerik:RadTab Text="Notes" runat="server">
            </telerik:RadTab>
            <telerik:RadTab Text="Recipes" runat="server">
            </telerik:RadTab>
            <telerik:RadTab Text="Files" runat="server">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <br />
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="1">
        <telerik:RadPageView runat="server" ID="RadPagePeopleList"></telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="RadPageRegistry">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="RadPageNotes">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageRecipes" runat="server">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageFiles" runat="server">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

Thanks

Renato

TabStrip

asked on 14 Apr 2023

0 answers

219 views

Issue with kendo grids embedded in parent grid detail tab strip

I have a parent kendo grid which has a detail kendo grid with a custom template. The custom detail template includes a tab strip with two tabs. Each tab includes a single kendo grid. I am using the default create and edit kendo grid buttons with some custom text. The controls on the parent grid seem to be working normally. When I press "Add New Row" a kendo editor pops up (pop up editing enabled) and in the background I can see that a new row is created. However, on two detail grids which are contained within each of the two tabs it seems that the pop up create and edit functionality is not working correctly. A window is popped up and the editing/creating actually works, but the grid acts strangely - mainly when I press the cancel button to exit out of an "edit" event for a particular item in one of the detail grid rows.

I believe that I have included the appropriate amount of code to look into the issue.

Thanks for the help!

<div data-ng-controller="GridCtrl as gridCtrl"><script type="text/x-kendo-template" id="detail-grid-template">
        <div class="detail-tab-strip">
            <ul>
                <li class="k-active">
                    Grid One
                </li>
                <li class="k-active">
                    Grid Two
                </li>
            </ul>
            <div>
                <div class="grid-one"></div>
            </div>
            <div>
                <div class="grid-two"></div>
            </div>
        </div>
    </script><script type="text/x-kendo-template" id="grid-one-editor">
        <div>
            <ul class="fieldlist">
                <li>
                    <label for="GridOneID">ID</label>
                    <input type="text" class="k-input k-textbox full-width k-state-disabled" disabled="disabled" name="GridOneID" data-bind="value:GridOneID">
                </li>
                <li>
                    <label for="GridFieldOne">One</label>
                    <input type="text" class="k-input k-textbox full-width" name="GridFieldOne" data-bind="value:GridFieldOne">
                </li>
                <li>
                    <label for="GridFieldTwo">Two</label>
                    <input type="text" class="k-input k-textbox full-width" name="GridFieldTwo" data-bind="value:GridFieldTwo">
                </li>
                <li>
                    <label for="GridFieldThree">Three</label>
                    <input type="text" class="k-input k-textbox full-width" name="GridFieldThree" data-bind="value:GridFieldThree">
                </li>
                <li>
                    <label for="GridFieldFour">Four</label>
                    <select id="GridFieldFour" name="GridFieldFour" data-bind="value:GridFieldFour"></select>
                </li>
                <li>
                    <label for="GridFieldFive">Five</label>
                    <select id="GridFieldFive" name="GridFieldFive" data-bind="value:GridFieldFive"></select>
                </li>
            </ul>
        </div>
    </script></div>
 

function gridOneCreateOrEditEvent(e) {

	var detailGridWrapper = this.wrapper,
		mainGrid = $("#parentGrid").data("kendoGrid"),
		$parentGridTr = $(detailGridWrapper).closest("tr").prev(),
		parentData = mainGrid.dataItem($parentGridTr);
	
	e.model.set("GridOneID", parentData.get("GridOneID"));
	e.model.set("GridFieldFive", parentData.get("GridFieldFive"));

	if (e.model.isNew()) {
		e.container.kendoWindow("title", "Create Item");
	}
	else {
		e.container.kendoWindow("title", "Edit Item");
	}

	$("#GridFieldFive").kendoDropDownList({
		dataSource: vm.fieldFiveOptions,
		change: function (c) {

			var dropDownValue = $('#GridFieldFive').data("kendoDropDownList").value();
			e.model.set("GridFieldFive", dropDownValue);

			this.value(dropDownValue);
		}
	});

	$("#GridFieldFour").kendoDropDownList({
		dataSource: [
			{ id: "A", name: "B" },
			{ id: "B", name: "B" }
		],
		dataTextField: "name",
		dataValueField: "id",
		change: function (c) {
			var dropDownValue = $("#GridFieldFour").data("kendoDropDownList").value();
			e.model.set("GridFieldFour", dropDownValue);

			this.value(dropDownValue);
		}
	});

	if (e.model.get('GridFieldFour') === 'A')
		$('#GridFieldFour').data("kendoDropDownList").value('A');
	else {
		$('#GridFieldFour').data("kendoDropDownList").value('B');
		e.model.set("GridFieldFour", $('#GridFieldFour').data("kendoDropDownList").value());
	}

	var popupWindow = e.container.data("kendoWindow");
	popupWindow.setOptions({ width: "600px" });
	popupWindow.setOptions({ height: "700px" });
	popupWindow.center();
}

function detailInit(e) {
	var gridOneToolbar = [];
	var gridOneCommands = [];
	var detailRow = e.detailRow;

	gridOneToolbar = [
		{ name: "create", text: "Add New Entry" }
	];

	gridOneCommands = [
		{ name: "edit", text: { edit: "Edit", update: "Save" } },
		{ name: "Delete", iconClass: "k-icon k-i-close", click: showGridOneDeleteConfirmation }
	];


	detailRow.find(".detail-tab-strip").kendoTabStrip({
		animation: {
			open: { effects: "fadeIn" }
		}
	});

	detailRow.find(".grid-one").kendoGrid({
		dataSource: {
			transport: {
				create: createItem,
				read: readItems,
				update: updateItem,
				parameterMap: function (options, operation) {
					if (operation !== "read" && options.models) {
						return { models: kendo.stringify(options.models) };
					}
				}
			},
			batch: true,
			pageSize: 10,
			filter: [
				{ field: "GridOneID", operator: "eq", value: e.data.GridOneID },
				{ field: "GridFieldFive", operator: "eq", value: e.data.GridFieldFive }
			],
			schema: {
				data: "Data",
				total: "Data.length",
				errors: handleGridErrors,
				model: {
					id: "GridOneID",
					fields: {
						GridOneID: {
							editable: true,
							defaultValue: e.data.GridOneID
						},
						GridFieldOne: {
							editable: true
						},
						GridFieldTwo: {
							editable: true
						},
						GridFieldThree: {
							editable: true
						},
						GridFieldFour: {
							editable: true
						},
						GridFieldFive: {
							editable: true
						},
						RowStatus: {
							editable: false, validation: { required: false }
						},
						RowMessage: {
							editable: false, validation: { required: false }
						}
					}
				}
			}
		},
		scrollable: false,
		sortable: true,
		pageable: {
			refresh: true
		},
		toolbar: gridOneToolbar,
		columns: [
			{ title: "", width: "40px", template: $('#grid-row-status-template').html() },
			{ field: "GridOneID", title: "ID", width: "100px" },
			{ field: "GridFieldOne", title: "One", width: "70px" },
			{ field: "GridFieldTwo", title: "Two", width: "40px" },
			{ field: "GridFieldThree", title: "Three", width: "40px" },
			{ field: "GridFieldFour", title: "Four", width: "50px" },
			{ field: "GridFieldFive", title: "Five", width: "60px" },
			{
				command: gridOneCommands,
				title: "&nbsp;", width: "180px"
			}
		],
		edit: gridOneCreateOrEditEvent,
		editable: {
			mode: "popup",
			template: kendo.template($("#grid-one-editor").html())
		}
	});
}

Grid

TabStrip

updated question on 09 Feb 2023

0 answers

53 views

Reload tabstrip with contentUrl data object

Hi,

I'm trying to reload tabstrip tab when i use POST variable like that:

$("#tabstrip").kendoTabStrip({
        animation: { open: { effects: "fadeIn"} },
        contentUrls: [
                     './point_singulier/ajax/photos.php',
                     './point_singulier/ajax/plans.php',
                     './point_singulier/ajax/materiel.php',
                     {
                          url: './point_singulier/ajax/pilotage.php',
                          cache: true,
                          method: "POST",
                          data:{
                               longitude_pts:obj.LONGITUDE,
                               latitude_pts:obj.LATITUDE
                          }
                     }
        ],
        select: onSelect,
}).data('kendoTabStrip');

I reload with this line :

$('#tabstrip').data().kendoTabStrip.reload("li.k-state-active");

When i don't pass POST variable, this reload work, but with this exemple it doesn't work and i don't get any error,

If someone have an idea please ?

TabStrip

asked on 18 May 2022

0 answers

363 views

Tabstring select method not working. 2021R3SP1 1109

the follow code not working...

var tabStrip = $("#TsMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);

var tabStrip = $("#"+controlName).kendoTabStrip().data("kendoTabStrip");
var selectId = tabStrip.select()[0].id;

TabStrip

asked on 27 Nov 2021

0 answers

75 views

Multiple tab strip

Hi,

We want multiple tabstrip depending on user selection. In that tabstrip want multiple grid. Is there sample code in angularJS for this problem.

Thanks!

Grid

TabStrip

asked on 14 Oct 2021

0 answers

204 views

Why is $(this.TabElement).kendoTabStrip(config).data('kendoTabStrip') undefined?

Hello,

I'm using LitElement to create a reusable tab component, but when I 'm initializing the kendoTabStrip, the TabStrip property is undefined.

In my firstUpdated function I'm setting the TabElement property:

    firstUpdated (changedProperties) {
        this.TabElement = this.shadowRoot.querySelector('#tabs-container')
    }

In the parent element, I'm setting the TabConfig property:

    setHtml () {
        const tabs = this.shadowRoot.querySelector('tabs')
       tabs.TabConfig = TabConfig(this)
    }

I have a setter in the tabs component that addsTabs after being set:

    set TabConfig (value) {
        const oldValue = this._TabConfig
        this._TabConfig = value
        const self = value.self
        this.addTabs(self, oldValue)
    }

I'm initializing the kendoabStrip using the previously set properties (all properties are defined):

    addTabs () {
        this.TabStrip = $(this.TabElement).kendoTabStrip(this.TabConfig).data('kendoTabStrip')

        this.TabConfig.tabs.forEach(tab => {
            if (tab.show) {
                this.TabStrip.append(tab) // This throws an error "Cannot read property append of undefined"
            }
        })
    }

I tried initializing the TabStrip property in the setter for the TabConfig, but ended up with the same result. Any idea as to why this.TabStrip is undefined?

General Discussions

TabStrip

TabStrip (Mobile)

updated question on 24 Jun 2021

0 answers

88 views

Kendo Splitter in tabstrip items

Hi,

I'm trying to add some custom functionality to the awesome tabstrip component.

More exactly, when the user rightclicks a tab button, the tabstrip should be divided by a splitter in 2 sides (left and right)

When the user rightclicks again a tab button, the 2 sides should merge back under a single tabstrip.

This is what I have so far:

http://dojo.telerik.com/ERuLAb/2

This seems to work fine in one scenario:

If I right click Tab5, then click Tab6, Tab7, Tab8 everything is perfect.

But if I right click Tab5, then click Tab1, the right side looses its active tab content.

So it seems that the left tabstrip is somehow referencing the right tabstrip children unless those children were already activated. .

Any ideas to make me understand what's going on ?

TabStrip

asked on 25 Oct 2017

0 answers

56 views

Adding a sample project with a tabstrip and some grids and client templates.

I was figuring out how to work better with the TabStrip, and thought I would upload the project I worked on in case anybody else might find it useful.
This is a visual studio 2013 project.

TabStrip

asked on 08 Jan 2014

0 answers

84 views

Get Tab when created dynamically

UPDATE: Much easier using JQuery

var tabQuery = $('#workTabs .k-tabstrip-items .k-item .k-link').filter(function () {

return $(this).text() == tabName;

});

I am creating Tabs dynamically and need to access the tab later to test if it already exists and add/change content.

I have a function to do this but it only works in IE and not firefox. There must be a better more JQuery way of doing it.
I have tried adding an ID field to the Tab when I create them and then using a selector but this dd not work. Any suggestions?

function findTab(tabs, tabName) {

var i = 0;

var foundTab;

while (true) {

var next = tabs.tabGroup.children("li").eq(i);

if (next && next.length > 0) {

var tabText = next[0].innerText;

if (tabText == tabName) {

// found

foundTab = next;

break;

}