I have a grid popup edit template that includes a Kendo dropdown.  I need to pass a model property value as the parameter to the Read() method of the dropdown.  But the model is null when the Read() method gets called.   So the value is always 0.  

I've defined the Field in the parent grid.  I even added it as a column too.  Model.ProductId is always 0.

How do I pass a value from the popup editor model to the controller for the dropdown?

                    @(Html.Kendo().DropDownList()
                        .Name("WarehouseId")
                        .OptionLabel("Select a warehouse...")
                        .HtmlAttributes(new { style = "width: 100%" })
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .Value("-1")
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("Inventory_Warehouse_Read", "Purchasing", new { productId = @Model.ProductId});
                            });
                        })
                        .Height(400)
                        )

Hi, I am new to this, so I apologise if this is a simple question/answer.

I have been asked to "learn while doing" on some code .

at the moment, if a filter is used on a ride, and it return matches, the first row is selected, and that data is then used to help get data for the tab strip.

If the filter returns on rows, the tapstrip still has the data showing for the previous (still selected ? ) row .

I have tried

            grid.bind("dataBound", function () {
                var displayedRows = grid.tbody.find(">tr");
               var tabStrip = $("#details").data("kendoTabStrip");
					
                if (displayedRows.length === 0) {
                    // Display the length of displayed rows for troubleshooting
                    /*                    alert("Number of displayed rows: " + displayedRows.length); // Show in alert for easier visibility*/
                    //var tabStrip = $("#details").data("kendoTabStrip");
                    tabStrip.contentElements.empty(); // Clear tab content
                    tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
                }
                else {
                }
            });

and this works for the First time it finds length = 0, but if I clear the filter and do a search that has results, or clear the filter and select the first row in #grid, the tabstrip is not updated.

please can someone advise what I need in the else clause, as anything gi put in here either doesn't work, or "breaks" the other options grid.binds i have in that sets the default search filter on one column to "contains". 

thanks

hi everybody,

I have this grid that works well, and pass the id=0 when clicking on the icon, unfortunately I can't find away to pass the hidden ID value.

is there something I am missing here.

I appreciate any help from you guys

regards, Ray

@(Html.Kendo().Grid<HeatersLibrary.Models.DocumentsViewModel>
    ()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.ID).Hidden();
        columns.Bound(p => p.Brand);
        columns.Bound(p => p.Size);
        columns.Bound(p => p.Type);
        columns.Bound(p => p.PartNumber);
        columns.Bound(p => p.Filename);
        columns.Bound(p => p.Description);
        columns.Bound(null).Title(" ").Width(50)
        .ClientTemplate(
            @Html.ActionLink(" ", "EditDoc", "Home", new { id=0 }, htmlAttributes: new { @class = "glyphicon glyphicon-pencil", @title = "Edit Description" }).ToHtmlString() + " | " +
            @Html.ActionLink(" ", "DeleteDoc", "Home", new { id=0 }, htmlAttributes: new { @class = "glyphicon glyphicon-trash", @title = "Delete Description \n WITHOUT CONFIRMATION" }).ToHtmlString()
            )
        ;

    })
    .Pageable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:250px;" })
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(10)
    .Read(read => read.Action("BindingDocuments", "Home").Data("additionalData"))
    )
    )

https://www.telerik.com/forums/setoptions-clearing-the-toolbar

I found the above forum thread with a solution/sample link to github but that page no longer exists (HTTP 404). Where can I find the sample now? or else, is there an alternative solution introduced in past 3 years?

Hi, I've got a grid whose rows expand to show another, templated, grid. I also have clickable links in the cells of the parent grid. Using a mouse, I can click these links directly or click the expansion icon to expand the row. Using keyboard navigation, however, I can only expand the parent row when I press enter. On grids without a templated sub-grid, pressing Enter will focus the link in the parent cell. I would like this behavior to be uniform.

I have tried intercepting the keydown event, but it seems that the expansion occurs even when I try to prevent default or return false as it happens seemingly in parallel.

Is there a way to achieve the functionality I want without resorting to overriding keydown or, if not, is there a way to cancel/control the expansion myself rather than having it automatically happen so that I can handle it in a custom keydown?

Grid example:

On this grid, when I press enter while Dialog Link column cell is selected, it expands the row.

Here in this example is a grid without a templated subgrid. Pressing enter on the same column focuses the "AAA" anchor tag within it, which is the desired behavior in both grids.

My attempt to control the expansion myself via a custom keydown event. The expansion happens before this logic has a chance to finish running:

I have a datepicker in a view 

@(Html.DatePickerFor(model => model.EventDate)
     .Format("{0:dd/MM/yy}")
)

I need to retrieve the date from the datepicker to use as the minimum value for a datetimepicker in a list view. 

		shiftStart.kendoDateTimePicker({
			timeFormat: "HH:mm",
			format: "dd/MM/yyyy HH:mm",
			// min: new Date(vYear, vMonth - 1, vDay, vHour, vMinute),
			interval: { minutes: 15 }
		});

How do I get that value?

I have an image editor with a button, when the button is pressed it saves the image to a folder on the server. 

It works in most cases, although sometimes it throws an Http 400 error. 

How do I add error handling so I can present a nice message to the user?

It seems the error happens when the image size (height and/or width) is exceptionally big, is that the case? 

here's my code:

    <form method="post">
      <input type="hidden" asp-for="editedFileName" />
      <input type="hidden" asp-for="ImagePath" />
      <div class="admin-button-container align-right">
        <button type="submit" class="btn btn-theme-admin">Save Image</button>
      </div>
      <div class="imageEditor"></div>
    </form>

my js:

$(document).ready(function() {
	var OpenExecuted = false;
	//  page load
	showImgOption();
});


function onSelect(e) {
	$('#editedFileName').val(e.files[0].name);
}

function handleUploadImageEvents(imageEditor) {
	OpenExecuted = true;
	imageEditor._upload.bind("select", onSelect);
}

function onImageRendered(e) {
	zoom();
	saveImagePath();
};

function onExecute(e) {
	if (e.command === "OpenImageEditorCommand") {
		setTimeout(function() {
			handleUploadImageEvents(e.sender);
		});
	}
};

// this function will zoom out the photo if the height is more than 600px 
// so that it does not overlap other fields on the page
function zoom() {
	var imgEditor = $('.imageEditor').data('kendoImageEditor');

	imgEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imgEditor.zoom = 1 });
	var imgHt = $(".k-imageeditor-canvas").height();
	if (imgHt > 600) {
		imgEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imgEditor.getZoomLevel() - 0.5 });
	}
};


function ImgEditor() {
	$(`.imageEditor`).kendoImageEditor({
		toolbar: {
			items: [
				"open",
				"save",
				"crop",
				"resize",
				"undo",
				"redo",
				"zoomIn",
				"zoomOut",
				"zoomDropdown",
			]

		},
		messages: {
			toolbar: {
				open: "Upload"
			},
		},
		imageUrl: $('[id="ImagePath"]').val(),
		height: 650,
		error: onError,
		imageRendered: onImageRendered,
		execute: onExecute,
	});
}



function onError(e) {
	console.log('Error');
};

function showImgOption() {
	var imgFilePath = $('[id="ImagePath"]').val();
	if (imgFilePath.length > 0) {
		var imgFilename = imgFilePath.slice(imgFilePath.lastIndexOf("/") + 1, imgFilePath.length + 1);
		$('[id="FileName"]').val(imgFilename);
	}

		ImgEditor();
}


function saveImagePath() {
	const imageEditor = $('.imageEditor').data('kendoImageEditor');
	const image = imageEditor.getCurrentImage();
	const imageObject = new DOMParser().parseFromString(image, "text/xml");
	const canvas = imageEditor.getCanvasElement();
	const fileArray = canvas.toDataURL().split(",");
	const base64String = canvas.toDataURL();
	const imagePathSaved = $('[id="ImagePath"]').val(fileArray[1]);
}

Hi Team,

We've noticed a problem where the "Items per page" section of the grid doesn't load at first. As observed below.

After the screen is zoomed out, it is visible.

Explanation of scenario-

Screen is in default zoom 100% - Not visible, once zoomed out to any value below 100% say 90 - Visible

Screen loaded in 90% - Not visible, Once zoomed out below 90 - Visible