Planet Technologies Blog

How to filter Kendo MVC Treeview in javascript

Here We have Textbox control
@Html.TextBoxFor(m => m.Activity_name)

Here we have filter button
<img src="@Url.Content("~/Content/images/filter.gif")" title="Click to filter" class="Handsymbol" onclick="onfilterclick()" />

when click the filter button make visible only the required Tree view child and it's header that's match with the textbox content using the following javascript function

When using file upload control it must be post back. But in some scenario upload image when clicking save button. Save button is under ajax setting so we could not get the image from the file upload control.

Solution : Image upload using JavaScript and web service.Get the image data when selecting file and pass the data to web service to create a file in server.

Following is the code which I used to achieve this.

In web service

[WebMethod(EnableSession = true)]
public string UploadImage(string byteArray, string contentType, string contentLength, string fileName)
{
byte[] bytes = System.Convert.FromBase64String(byteArray.Split(',')[1]);
string imgPath = Server.MapPath("~/UploadImages/" + fileName + ".png");
System.IO.FileStream imgFile = new System.IO.FileStream(imgPath, System.IO.FileMode.Create);
imgFile.Write(bytes, 0, bytes.Length);
imgFile.Close();
return imgPath;
}

In aspx design:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadTest.aspx.cs" Inherits="UploadTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Script/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowpImagePreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image1').attr('src', e.target.result);
var byteArray = e.target.result.split(',');
document.getElementById("<%=HImageBytes.ClientID %>").value = byteArray;
document.getElementById("<%=HContentType.ClientID %>").value = "image/png";
document.getElementById("<%=HContentLength.ClientID %>").value = input.files[0].size;
document.getElementById("<%=HFileName.ClientID %>").value = "fileName";
}
var file = input.files[0].size;
reader.readAsDataURL(input.files[0]);
}
}

function uploadimage() {
var ImageBytes = document.getElementById("<%=HImageBytes.ClientID %>").value;
var ContentType = document.getElementById("<%=HContentType.ClientID %>").value;
var ContentLength = document.getElementById("<%=HContentLength.ClientID %>").value;
var FileName = document.getElementById("<%=HFileName.ClientID %>").value;
PlanetTech.AutoComplete.AutoComplete.UploadImage(ImageBytes, ContentType, ContentLength, FileName, message);
}
function message(result) {
alert(result);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ajax:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<ajax:ServiceReference Path="WebService/AutoComplete.asmx" />
</Services>
</ajax:ScriptManager>
<div>
<asp:FileUpload ID="fileUpload1" onchange="ShowpImagePreview(this);" runat="server"/>
<asp:Image ID="image1" Width="400px" Height="300px" runat="server" />
<asp:Button ID="btnSave" runat="server" OnClientClick="uploadimage();" />
</div>
<input type="hidden" id="HImageBytes" runat="server" />
<input type="hidden" id="HContentType" runat="server" />
<input type="hidden" id="HContentLength" runat="server" />
<input type="hidden" id="HFileName" runat="server" />
</form>
</body>
</html>

Hope this will help.

Planet Technologies Blog

Saturday 31 January 2015

Filter Kendo MVC Treeview

Image upload in client side using web service (With out post back)