Thursday, May 30, 2013

Kendo UI MVC: Display Detail/Child records for each Grid row using Detail Templates

 

Kendo has good feature to display the detail of any row or relevant child records using detail template. The example already exists in Kendo UI demo site.

example http://demos.kendoui.com/web/grid/detailtemplate.html

There have three different ways to display detail template for grid rows.

1. Server detail template:

If you make server binding in main grid using MVC wrapper then Server Detail Template  is very good option to display child records or detail element for each grid row. Here it is very similar to adding a child control inside a grid using DetailTemplate(…) action. It also gives expression to write as razor MVC syntax.

Example :

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/server-detail-template

2. Client Detail Template :

Some cases you need to display grid records on ajax call.  Example of Datasource ajax call is:

   1: .DataSource(dataSource => dataSource
   2:           .Ajax()
   3:           .Read(read => read.Action("Products_Read", "Home"))
   4:        )

In this case Server Detail Template will not work. Because main grid records are loaded by ajax call dynamically. To display detail template for ajax read call you need to use Client Detail Template . 


Example: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/client-detail-template


The problem is that you need to know some kendo client template syntax. Here has example to write client template scripts ( if-else condition, for loop ) using kendo expression http://docs.kendoui.com/getting-started/framework/templates/overview


But You can still write MVC wrapper widget and at the end you have to call ToClientTemplate to use it inside client template.


 


3. Hybrid Solution:


It is a mix solution of client detail template and using server call to render HTML . So I called this hybrid solution. Inside client script you can also make Javascript ajax call.



   1: <script id="client-template" type="text/x-kendo-template">
   2: <div id="placeholder">
   3: <script>
   4: $.get("url",function(data){
   5:  // do somethings
   6: $(document.getElementById("placeholder)).html(data);
   7: });
   8: </script>
   9: </script>

 


In this example I am making an simple Javascript ajax call to get data from server side ( calling MVC controller action). In server side through Partial View I am getting the html which is rendered in server side. Using this way you are getting full freedom to write code in MVC razor syntax and Kendo MVC wrapper though you are using client template. After getting html from server side the placeholder div is populated with the resultant HTML.


Note: Jquery element select option “$(‘#placeholder’) does not work as # is used also for Kendo syntax. so that I used  document.getElementById.

Sunday, March 24, 2013

Wizard control widget: my first Jquery Widget

 

We are familiar with ASP.NET Wizard control and that is powerful to create form which need to perform many steps clicking on next and next button.But in Javascript, the problem in writing such widget control is we usually become dependent to HTML controls. Jquery Widget is giving us such power full and object oriented way to create control or plugin which we can easily make it independent on HTML control and more re-usable. It provides object oriented features such as encapsulation, inheritance.Widget also provides constructor and destructor to manage lifetime of plugin.

In MSDN there have a nice article on JQuery Widget http://msdn.microsoft.com/en-us/library/hh404085.aspx. Silk Project is real good example of Jquery Widget.

I found some nice wizard control using Jquery those are dependent on HTML controls. Some good articles on Jquery Widget :

http://blog.degree.no/2012/03/creating-a-simple-form-wizard-in-asp-net-mvc-4/

http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx

both are almost same and I am not here reinventing wheel. I am using the second article code to create wizard plugin so that I can make it more reusable but I can not say that is perfect for any type of requirement.

If you read the second article ( mentioned above) Code  are pretty simple to understand. I am here just trying here to covert it into Jquery widget.

Jquery widget has constructor like _create method which is invoked first time. Here underscore is used to define private scope. So other object can not call _create method.

So in the _create method I have defined how control can be bind to methods and how control would be displayed initially.

To make it independent of particular Form, I have some properties inside Widget options so that we can set ui element or action there. Wizard widget can be called in form as like other widget.

   1: var wizard= $("#WizardForm").Wizard(
   2:       {
   3:           backButtonId: '#back-step',
   4:           nextButtonId: '#next-step',
   5:           finalButtonId: '#next-step',
   6:           confirmAction: ConfirmAction,
   7:           finalAction: FinalAction
   8:       });

  Here back-step, next-step are HTML button ids. and ConfirmAction and FinalAction are methods which is using as callback method.


To set those properties jquery widget provides us to create options object with these properties.



   1: $.widget("system.Wizard", {
   2:         options: {
   3:             backButtonId: '',
   4:             nextButtonId: '',
   5:             finalButtonId: '',
   6:             finalAction: null,
   7:             confirmAction: null
   8:         },
   9:  
  10:         _create: function () {
  11:             var that = this, name = this.element.name;
  12:             this.FirstStep = this.element.find(".wizard-step:first");
  13:             this.FirstStep.fadeIn();
  14:             this.CurrentStep = this.FirstStep;
  15:             $(this.options.backButtonId).click(function () { that.moveBack(); })
  16:             $(this.options.nextButtonId).click(function () { that.moveNext(); })
  17:         },

In this code we have exposed some properties so that user can set those properties as defined above and in _create method provided control ids are bind with widget method to make it reusable.


We exposed two method for logic to go next step or in previous step. This code need more improvement to make it more reusable. In the moveNext() method I have called callback method so that we can perform some actions which are dependent on particular UI control



   1: moveNext: function () {
   2:  
   3:            var $step = this.CurrentStep; // get current step
   4:  
   5:           //part of code
   6:  
   7:           if ($step.next().hasClass("confirm")) { // is it confirmation?
   8:               //invoking callack method
   9:                this.options.confirmAction($step);
  10:  
  11:            }
  12:  
  13:            //part of code 
  14:  
  15:            else { // this is last step, submit form
  16:                this.options.finalAction();
  17:            }
  18:        }     

Here is complete code of Wizard plugin. https://dl.dropbox.com/u/20275838/Wizard.js

Sunday, March 17, 2013

Custom Conditional Validation Depends on Another Property Value using JQuery Unobtrusive feature and ASP.NET MVC

 

Data Annotation Validation Attribute ( example [Required]) makes easy to provide validation in ASP.NET MVC. Also if Enable unobtrusive validation, we do not need to write any code in JavaScript for client validation. Jquery unobtrusive  validation parse the data attribute in HTML and we do not need to any custom code to validate form.

To enable client side  validation and unobtrusive validation we need to provide settings in web.config or in server side HtmlHelper.

 

   1: <appSettings>
   2:     <add key="ClientValidationEnabled" value="true" />
   3:     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
   4: </appSettings>

or



   1: HtmlHelper.ClientValidationEnabled = true;
   2: HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

If  jquery unobtrusive library is referenced in cshtml then there do not need to write any custom code to validate form with the help of data annotation validation attribute.



   1: public class CustomerFormModel : ICustomerCommand
   2:   {
   3:       public int Id { get; set; }
   4:       
   5:       [Required(AllowEmptyStrings = false, ErrorMessageResourceName = "CustomerNameRequired", ErrorMessageResourceType = typeof(StringTable))]
   6:       [StringLength(200, ErrorMessageResourceName = "CustomerNameLenthValidationError", ErrorMessageResourceType = typeof(StringTable))]
   7:       public string Name { get; set; }
   8: }

When this code will be executed the form can be validated automatically by jquery unobtrusive validation.


image


When you enable unobtrusive validation ASP.NET MVC add data attribute in HTML  for each data annotation.


image


In HTML attributes are generated for data annotation in server side and jquery unobtrusive library parsed those attribute for client validation.


But what will happen if validation on any field depends on the value of another field value. You may also want this validation not only client side but also in server side. Usually in such case we write custom validation before submitting form and also do same validation in server side.  We can also do same custom validation using Data annotation and jquery unobtrusive validation without directly referencing client control.


Suppose the requirement is to validate Email field as required only if Name field is not empty. So if Name field is not empty then we do not have to provide Email.


It this case the server side validation would be not difficult. We can create an data annotation attribute which will make decision based on value of Name property.


This is not final code.



   1: namespace SimpleTier.Domain.Validators
   2: {
   3:     using System;
   4:     using System.Collections.Generic;
   5:     using System.Linq;
   6:     using System.Text;
   7:     using System.ComponentModel.DataAnnotations;
   8:     using System.Web.Mvc;
   9:     using SimpleTier.Domain.Properties;
  10:  
  11:     public class EmailValueValidator : ValidationAttribute
  12:     {
  13:         private string _dependentPropery;
  14:         private bool _isRequired;
  15:         public EmailValueValidator(string dependentpropery, bool isrequired)
  16:             : base()
  17:         {
  18:             _dependentPropery = dependentpropery;
  19:             _isRequired = isrequired;
  20:         }
  21:  
  22:         protected override ValidationResult IsValid(object value, ValidationContext validationContext)
  23:         {
  24:             if (_isRequired == false) return null;
  25:             System.Reflection.PropertyInfo property = validationContext.ObjectType.GetProperty(_dependentPropery);
  26:             if (property != null)
  27:             {
  28:                 var value1 = property.GetValue(validationContext.ObjectInstance, null) as string;
  29:                 if (string.IsNullOrEmpty(value1) == false && string.IsNullOrEmpty(value as string))
  30:                     return new ValidationResult("Value can not be empty");
  31:  
  32:                 return null;
  33:  
  34:             }
  35:             else
  36:                 new ValidationResult(string.Format("Unknown Properties {0}", _dependentPropery));
  37:  
  38:             return null;
  39:  
  40:         }
  41:  
  42:     }
  43: }

In this code a custom validation attribute is created. IsValid() function gets the value of Name field and make decision based on Name value. Attribute on Email property can be defined as:



   1: public class CustomerFormModel : ICustomerCommand
   2:    {
   3:        public int Id { get; set; }
   4:        
   5:        [Required(AllowEmptyStrings = false, ErrorMessageResourceName = "CustomerNameRequired", ErrorMessageResourceType = typeof(StringTable))]
   6:        [StringLength(200, ErrorMessageResourceName = "CustomerNameLenthValidationError", ErrorMessageResourceType = typeof(StringTable))]
   7:        [TextLineInputValidator]
   8:        public string Name { get; set; }
   9:  
  10:        //[Required(AllowEmptyStrings = false, ErrorMessageResourceName = "EmailRequired", ErrorMessageResourceType = typeof(StringTable))]
  11:        [EmailValueValidator("Name",true)]
  12:        [StringLength(200, ErrorMessageResourceName = "EmailStringLengthValidationError", ErrorMessageResourceType = typeof(StringTable))]
  13:        public string Email { get; set; }
  14: }

Here Name is the property on which validation depends and also sets another value to determine validation logic is required or not.  But this validation works only on server side and in the HTML code no such validation attribute is created.


image


To make this validation work also on client side some Html attribute need to be created and make jquery unobtrusive library understand those attribute. To create those html attribute our custom attribute class need to be implemented  by IClientValidatable interface. If class is implemented by IClientValidatable interface,  method name GetClientValidationRules() can be implemented to define the rules that will be generate as html attribute.


 


image 



We need to define such rule in unobtrusive adapter so that client side validation understand these html attribute. unobtrusive adapter gives option to define method which will work with such rules and defined data attribute.



   1: <script type="text/javascript">
   2:     $.validator.unobtrusive.adapters.add(
   3:         'emailcustomvalidation',['dependentpropery','isrequired'],function(options)
   4:         {
   5:             options.rules["emailcustomvalidation"] =
   6:                 {
   7:                     dependentpropery: options.params.dependentpropery,
   8:                     isrequired: options.params.isrequired
   9:                 };
  10:             options.messages["emailcustomvalidation"] = options.message;
  11:         });
  12:     $.validator.addMethod("emailcustomvalidation", function(value, element, params)
  13:     {
  14:         var parts = element.name.split(".");
  15:         var prefix = "";
  16:         if (parts.length > 1)
  17:             prefix = parts[0] + ".";
  18:         var emailvalue = $('input[name="' + prefix + params.dependentpropery + '"]').val();
  19:         if (!value && !emailvalue)
  20:             return true;
  21:         if (emailvalue && !value)
  22:             return false;
  23:         return true;
  24:     })
  25:            
  26:     
  27: </script>

Here same validation is defined as server side code. When the save button will be clicked the form will be be validate and it will call this method. Client side validation provides same validation with error message defined in server side. Such validation can be used for multiple controls as that does not depend on any HTML control.