Write custom plugins/extensions like kendoui and telerik for asp.net mvc razor

Question

Telerik and kendoUI offers a number of html controls like grids, charts etc. to enhance the ui in asp.net mvc. More interesting thing is they are used as html extensions and hence we can bind some model to the controls which also makes it somewhat strongly typed. It also uses javascript libs to handle client side interactions. I need to get some gist over how can we write custom plugins like kendo and telerik like building my own grid component. What is the proper pattern that i should follow?

Answer 1

This is not good example but i think it is good start.

This method generates dataTable

public static string GenerateTableHtml<TValue>(IEnumerable<TValue> model, string DeleteUrl, string EditUrl) 
        {
            StringBuilder Table = new StringBuilder();

            Table.AppendLine("<script type='text/javascript'> $(document).ready(function () {"
                            + "$('.btnDelete').click(function () {"
                            + "var url = $(this).attr('dropzone');"
                            + "$('#dialog-form').attr('action', url);})"
                            + "})</script>");

            Table.AppendLine(" <div class=\"dataTables_wrapper\"><div class=\"\">");

            string TableButtonsTemplate = "<td><div class=\"table_buttons\">"
                                        + "<a href=\"{0}\"><img src=\"../Images/icons/dark/pencil.png\")\" title=\"რედაქტირება\" /></a>"
                                        + "<a href=\"#\" id=\"opener\" class=\"btnDelete\" dropzone=\"{1}\">"
                                        +"<img class=\"\" src=\"../Images/icons/dark/close.png\")\" title=\"წაშლა\" /></a>"
                                        + "</div></td>";

            string TableButtons = String.Empty;
            bool HaveActionButtons = false;
            string rowID = string.Empty;

            if (String.IsNullOrEmpty(DeleteUrl) == false || string.IsNullOrEmpty(EditUrl) == false)
            {
                HaveActionButtons = true;
            }

            Table.AppendLine("<table class=\"display dTable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">");
            Table.AppendLine("<thead>");
            Table.AppendLine("<tr>");

            int ColumnIndex = 0;
            int rowIndexer = 0;

            var fType = model.GetType().FullName;
            var startIndex = fType.IndexOf("[[") + 2;
            var type = fType.Substring(startIndex, fType.Length - startIndex - 2);

            foreach (var item in model)
            {

                if (ColumnIndex == 0)
                {
                    var properties = item.GetType().GetProperties();

                    foreach (var prop in properties)
                    {
                        var metaData = ModelMetadataProviders.Current.GetMetadataForProperty(null,
                                       Type.GetType(type), prop.Name);

                        if (metaData.DisplayName != null)
                        {
                            Table.AppendLine("<th class=\"ui-state-default\" rowspan=\"1\" colspan=\"1\">" + metaData.DisplayName + "</th>");
                        }
                        else
                        {
                            Table.AppendLine("<th class=\"ui-state-default\" rowspan=\"1\" colspan=\"1\">" + prop.Name + "</th>");
                        }
                    }

                    Table.AppendLine("<th></th>");
                    Table.AppendLine("</tr>");
                    Table.AppendLine("</thead>");
                    Table.AppendLine("<tbody>");
                }

                foreach (var value in item.GetType().GetProperties().Select(x => x.GetValue(item, null)))
                {
                    int rowCount = item.GetType().GetProperties().Select(x => x.GetValue(item, null)).Count();
                    rowIndexer++;

                    if (rowIndexer != rowCount)
                    {
                        if (rowIndexer == 1)
                        {
                            Table.AppendLine("<tr class=\"gradeA odd\">");
                        }

                        if (value != null)
                        {
                            string val = value.ToString();
                            Table.AppendLine("<td>" + val + "</td>");
                            rowID = item.GetType().GetProperty("ID").GetValue(item, null).ToString();
                        }
                        else
                        {
                            Table.AppendLine("<td></td>");
                        }
                    }
                    else
                    {
                        if (value != null)
                        {
                            Table.AppendLine("<td>" + value.ToString() + "</td>");
                        }
                        else
                        {
                            Table.AppendLine("<td></td>");
                        }

                        if (HaveActionButtons == true)
                        {
                            Table.AppendLine(String.Format(TableButtonsTemplate, EditUrl + rowID, DeleteUrl + rowID));
                        }

                        Table.AppendLine("</tr>");

                        if (rowIndexer != item.GetType().GetProperties().Count())
                        {
                            Table.AppendLine("<tr class=\"gradeA odd\">");
                        }
                    }
                }
                rowIndexer = 0;
                ColumnIndex++;
            }

            Table.AppendLine("</tbody></table></div></div>");

            Table.AppendLine(String.Format(Resources.MainResources.ModalDialogConfirm, "Confirmation",
                "<strong>Warning!</strong><br /> Are you sure you want to delete user?", ""));

            return Table.ToString();
        }