Showing posts with label Telerik MVC grids. Show all posts
Showing posts with label Telerik MVC grids. Show all posts

Monday, 2 December 2024

How to Create a Generic Method to Get the Enum Description in C#

        public static SelectList GetSelectListForEnumWithDescription(Type enumType)
        {
            var list = new List<Object>();
            Array enumValues = Enum.GetValues(enumType);
         
            foreach (Enum enumValue in enumValues)
            {
                list.Add(new
                              {
                                 ID = (int)Enum.Parse(enumType, enumValue.ToString()),
                                 Value = GetEnumDescription(enumValue)});
                               }
              return new SelectList(list, "ID", "Value");
        }

        public static string GetEnumDescription(Enum value)
        {

            FieldInfo fi = value.GetType().GetField(value.ToString());

            DescriptionAttribute[] attributes =
                (DescriptionAttribute[]) fi.GetCustomAttributes(typeof (DescriptionAttribute), false);

            if (attributes != null && attributes.Length > 0)

                return attributes[0].Description;

            else return value.ToString();
        }
    }

Tuesday, 18 February 2014

How to open a new tab On click of a hyper-linked column in Telerik Razor Grid

Today i got a requirement to open a external URL in a tab when the linked column is clicked.
This  can be achieved by simply adding the client template/ template to the linked column.

1) Using Template Attribute in the Telerik Grid
column.Bound(a => a.Website)
      .Template(@<text><a href="@Url.Content(item.Website)" target="_blank">@item.Website</a></text>)
      .HeaderTemplate(
        @<text>
    <a href="javascript:void(0)" class="t-link" orderby="Website">Website</a>
@Html.TextBoxFor(m => m.Filter.Website)         
</text>);

2) Using Client Template Attribute in the Telerik Grid


column.Bound(a => a.Website)
    .ClientTemplate("<a href='<#= Website #>' target='_blank'><#= Website #></a>")
    .HeaderTemplate(
        @<text>
    <a href="javascript:void(0)" class="t-link" orderby="Website">Website</a>
@Html.TextBoxFor(m => m.Filter.Website)         
</text>);

Output:


But the really annoying is that when you click the link it is throwing error  as
 "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable"



This is because the IIS is unable to resolve the path.

Solution to the above issue:

The above issue can be fixed by a simple trick, just you need to append the http:// to the website in the client template or in the template attribute. See the code below:

column.Bound(a => a.Website)
      .Template(@<text><a href="@Url.Content("http://"+item.Website)" target="_blank">@item.Website</a></text>)
      .HeaderTemplate(
        @<text>
    <a href="javascript:void(0)" class="t-link" orderby="Website">Website</a>
@Html.TextBoxFor(m => m.Filter.Website)         
</text>);

Note: Similarly if it is a mail ID column then, use mailto: as the prefix.

Thats it, Enjoy!

Monday, 23 September 2013

How to Insert space before capital letters using Jquery

Assume you have a string "HelloWorld" and you need to show as "Hello World". How you can achieve it using Jquery.

It can be done in a very simpler way as below:

"Your string".replace( /([a-z])([A-Z])/g, "$1 $2")

so here it will be "HelloWorld".replace( /([a-z])([A-Z])/g, "$1 $2") will produce "Hello World"

Enjoy!

Monday, 17 June 2013

Error 349: Duplicate headers received from server in Google Chrome while rendering PDF using ITextSharp in Asp.Net MVC



While working on generating  PDF in Asp.Net MVC3, I got a peculiar error while rendering the PDF in Chrome browsers, which is not being found in any other browsers like Internet Explorer or Fire Fox.
This error comes because chrome browsers doesn't ignore duplicate headers. This can be addressed easily the following ways, if you or your web app is sending out headers. Then check the following things:

 1. Enclose fileName using “”. i.e
Response.Addheader('Content-Disposition: attachment; filename="' + fileName '"');
instead of
Response.Addheader('Content-Disposition: attachment; filename='+ fileName);
2. If possible replace spaces and commas (,) with underscores (_)
 string regExp = @"[^\w\d]";
Response.AddHeader("content-disposition""attachment;filename=" + "Test_PDF_" + 
                           Regex.Replace(model.CompanyName, regExp, "_")+ "_" +
                              Regex.Replace(model.FullName, regExp, "_") + "_" +                                                         DateTime.Now.ToShortDateString());teString());

3. Explicitly tell Asp.Net MVC to override headers by setting optional replace parameter to true.
Response.AddHeader("Content-type: application/pdf",true);
Happy Coding!

Friday, 24 May 2013

Jquery Method to Check the File upload control Empty or not, File Size and File Type(e.g. JPG,BMP,PDF)


Html:
<input type="file" id="file" name="file" />
<span id="valFile" class=""></span> // span for showing error message.

CSS:


.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}


JQuery Snippet:
$(document).ready(function( )
{

//Changing the Error message of the File Upload and checking the File size and File type.
        $("#file").change(function () {

            $("#valFile").html("Please select file."); // Default Error Message
         
            var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'doc', 'docx', 'pdf'];

            if ($(this).val() != "") { //checking wheather the file uploader is empty or not
             
                //Checking the File type
                if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                    $(this).addClass("input-validation-error").removeClass("valid");
                    $("#valFile").addClass("field-validation-error").removeClass("field-validation-valid")
                        .html("Invalid Filetype(only image files/doc/docx/pdf)");
                }
                else {
                    $(this).removeClass("input-validation-error").addClass("valid");
                    $("#valFile").removeClass("field-validation-error").addClass("field-validation-valid");

                    if ((this.files[0].size > 4194304) && ($(this).val() != '')) {
                        $(this).addClass("input-validation-error").removeClass("valid");
                        $("#valFile").addClass("field-validation-error").removeClass("field-validation-valid")
                            .html("File size exceeded 4MB");
                    }
                }
            } else {
                $(this).addClass("input-validation-error").removeClass("valid");
                $("#valFile").addClass("field-validation-error").removeClass("field-validation-valid");
            }
        });

});

Happy Coding!

Wednesday, 22 May 2013

How to create a File Upload with File Validation in Asp.net MVC / How to Use the @Html.TextBoxFor() for File Upload ?

While Wonder how to validate the Upload control in a easy way, I find this solution as the best to do it, although lot of other ways are found.This is because you need not need to write much more code as a normal razor validation will solve the problem.


My View:


 <div id="dvUpload" class="hide fieldControlContainer">
                <div class="innerDivLeft">
                    <label class="blue">Upload Document:</label>
                </div>
                <div class="innerDivRight">
                      @Html.TextBoxFor(model => model.File, new { @class = "inputTextBox", type="file" })
                      @Html.ValidationMessageFor(model => model.File)
                </div>
 </div>

The magic lies with this line  @Html.TextBoxFor(model => model.File, new { @class = "inputTextBox", type="file" }), here it will be rendered as a file upload control rather than a text because we are over riding the default behavior of input tag rendering by specifying it as type="file".

My Controller:



 public ActionResult Index(HttpPostedFileBase file, MyModel model)
        {
                  //Codes written here.
        }


MyModel:

public class MyModel
{

       [Required(ErrorMessage = "Please select file")]     // this is for model validation
        public HttpPostedFileBase File { get; set; }

}

Now your file upload validation will be checked like any other normal control.

Wednesday, 24 April 2013

Searching Records from the Kendo Grid by Date given in the Search Box.

While working on a project I came to an issue in kendo grid i.e to search the Grid records using Date.
Say , I had an accounts list from a bank in which lots of data are displayed including A/C opening date, Last log-in, Last transaction, Last Unsuccessful Log-in and there is a search box that finds the records when the date is given in the search box. But to my dismay it doesn't works for me, after spending a valuable of 1 day of my work , I had got the success.

So here is the image below:





The Code to make your grid work for dates filtration or searching:

In the web page(.html / .cshtml / .jsp etc)
<div id="grid"></div>

Script:
<script type="text/javascript">


$(document).ready(function () {
       initGrid();
      
/// This function is called when you start typing in the search textbox. Here Id of search textbox is #search.
    $('#search').keyup(function () {
        clearTimeout($.data(this, 'timer'));
        var wait = setTimeout(searchDataSource, 500);
        $(this).data('timer', wait);
    });

});



 function searchDataSource() {
        var query = $("#search").val();
        var $filter = [
                       { field: "AccOpenDate", operator: "eq", value: new Date(query) },
                       { field: "LastLogin", operator: "eq", value: new Date(query) },
                       { field: "LastTrans", operator: "eq", value: new Date(query) },
                       { field: "FaliureLogin", operator: "eq", value: new Date(query) }
        ];

        if (query.length > 2)  // search only when the no. of character typed is greater than 2
        {
            grid.data("kendoGrid").dataSource.filter({
                logic: "or",
                filters: $filter
            });

        } else if (query.length == 0)
            grid.data("kendoGrid").dataSource.filter([]);
    }


 function initGrid() {
        grid = $("#grid").kendoGrid({
            dataSource: {
                transport: { read: "/Bank/accounts" },
                schema: { data: "Data", total: "Total" },
                pageSize: 30,
                serverPaging: false,
                serverFiltering: false,
                serverSorting: false
            },
            height: gridHeight,
            change: function () {
                var selectedRows = this.select();
                selectedElement = this.dataItem(selectedRows[0]);
                showActionPane(selectedElement.Name != null && selectedElement.Name != "");
            },
            selectable: "single",
            filterable: true,
            sortable: true,
            pageable: true,
            resizable: true,
            columns: [

                { field: "Name", title: "Name", width: 60, template: '<a href="/Account/Details/#=Id#">#=Name#</a>' },
                { field: "Status", title: "Status", width: 50 },
                { field: "AccountType", title: "Account Type", width: 80 },
                { field: "AccOpenDate", title: "A/c Open Date", width: 50, template: '#=(AccOpenDate==null)?"":kendo.toString(kendo.parseDate(AccOpenDate,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: true, format: "{0:M/d/yyyy}", type: "date" },
                { field: "LastLogin", title: "Last Login", width: 50, template: '#=(LastLogin==null)?"":kendo.toString(kendo.parseDate(LastLogin,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: false, format: "{0:M/d/yyyy}", type: "date" },
                { field: "LastTrans", title: "Last Transaction", width: 50, template: '#=(LastTrans==null)?"":kendo.toString(kendo.parseDate(LastTrans,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: false, format: "{0:M/d/yyyy}", type: "date" },
                { field: "FaliureLogin", title: "Unsuccessful Login", width: 50, template: '#=(FaliureLogin==null)?"":kendo.toString(kendo.parseDate(FaliureLogin,"0:MM/dd/yyyy"),"MM/dd/yyyy") #', filterable: false, format: "{0:M/d/yyyy}", type: "date" }
            ]
        });
    }

output:
Search records by Date through Search Textbox text:  ( here searching the record occurs on all the columns)



Search records by Date through filter Button: ( here searching the record which has opened on 04/04/2013. So two records where as in the above it is searching all the columns having 04/04/2013. so three records. 


Wednesday, 6 March 2013

Getting the Error: "Templates Can be used only with field access,property access, single dimension, or Single-parameter Custom Indexer Expression" in Asp.Net MVC3/MVC4



While working on an MVC3 project I need to Show the short date  & time in the display for HTML helper, but when I used it is throwing the above error, the reason behind it was that the HTML helper DisplayFor and EditorFor  takes directly the properties of the model rather than the functions which are associated with it.
  @Html.DisplayFor(model => model.DateStart.Value.ToShortDateString( ))

To fix the above situation you can simply remove the DisplayFor and use as :

@if(Model.DateStart!=null)
{
  Model.DateStart.ToShortDate( )
}


However, the best method to fix this situation is create a partial class with the above field and use the DisplayFormat properties to it with the one you wants.

    [DisplayName("Start Date")]
    [DisplayFormat(DataFormatString="{0:MM/dd/yyyy}",  ApplyFormatInEditMode=true)]
    public System.Nullable<System.DateTime> ModifiedStartDate
    {
        get
        {
            return this.StartDate.ToShortDateString( );
        }
        set
        {
            this.StartDate = value;
        }
    }


How to use it:
  @Html.DisplayFor(model => model.ModifiedStartDate)