Kendo Grid MVC combine ajax binding and server editing

Question

Is there a way to combine ajax binding and server editing ?

I want current action such as reading, paging, sorting and deleting, to be done by ajax request and Create and Update by server editing becaus i have a complexe form that need to use the full page.

I tried by inserting action link in a custom column but it says that i can not use server editing on ajax binding.

Answer 1

Yeah sure, this is possible through the use of template() and using Kendo client templates.

Client Templates is basically JavaScript that is executed on the client at run time so we can pass in variables the Kendo UI knows about, these will be you Model Property Names.

So if you want a link next to each row that might link of to a details page for example you would:

#=...# - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template.
#...# - Evaluates the JavaScript code expression inside, but doesn't output value.
#:...# - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template which is HTML encoeded.

The most simple solution / example add a new column like so:

columns.Template(x => null).ClientTemplate(Html.ActionLink("DisplayText", "Edit", new { Id = "id" }).ToHtmlString().Replace("id", "#=ClientPayeeCodeId#"));

I have created a Html Helper to help me achieve this so I can customise the Html, centralise the implementation etc:

In the Razor View I have:

columns.Template(x => null).ClientTemplate(Html.KendoActionLink("Foo", "Bar", "This is a Test", "Name",htmlAttributes: null, routeValues: new Dictionary<string, string>() { { "someParameter", "someValue" }, { "someParameter2", "someValue2" } }));

And My Extension Method:

        /// <summary>
        /// This should be used in the Kendo UI ClientTemplate() Calls to generate MVC ActionLinks in a Kendo UI Grid
        /// </summary>
        /// <example>  
        /// Usage:
        /// <code> 
        /// columns.Template(x => x.Foo).ClientTemplate(Html.KendoActionLink("Index", "Home", "View Foo","Foo"));
        /// </code> 
        /// </example>
        /// <param name="action">"The Action Name of a Controller you wish to call"</param>
        /// <param name="controller">The Controller Name of a Controller you wish to call</param>
        /// <param name="linkText">Text to display to the user</param>
        /// <param name="propertyName">The property name that acts as the ID for the MVC Action</param>
        /// <param name="htmlAttributes">Additonal Html attribute to add to the anchor tag</param>
        /// <returns>A Relative Url string to the Action you wish to Call</returns>
        public static string KendoActionLink(this HtmlHelper helper, string action, string controller, string linkText, string propertyName, IDictionary<string, string> htmlAttributes, IDictionary<string,string> routeValues)
        {
            //TODO: Support for MVC RouteLink (KendoRoutLink Method) and nested grids (I think) will need to use \\#= #

            TagBuilder tag = new TagBuilder("a");

            string kendoUrl;

            //Kendo UI uses  #=variableName# to escape from from text / html to JavaScript
            if (!string.IsNullOrEmpty(propertyName))
            {
                kendoUrl = string.Format("~/{0}/{1}/#={2}#", controller, action, propertyName);
            }
            else
            {
                kendoUrl = string.Format("~/{0}/{1}", controller, action);
            }

            if (routeValues != null) // Adding the route values as query string, only kendo values for now
                kendoUrl = kendoUrl + "?" + String.Join("&", routeValues.Select(kvp => String.Format("{0}=#={1}#", HttpUtility.UrlEncode(kvp.Key), HttpUtility.UrlEncode(kvp.Value))).ToArray());

            string kendoIcon = "<span class=\"k-icon k-i-restore\"></span>";

            tag.Attributes["href"] = UrlHelper.GenerateContentUrl(kendoUrl, helper.ViewContext.HttpContext);

            tag.SetInnerText(kendoIcon + linkText);

            if (htmlAttributes != null)
            {
                foreach (KeyValuePair<string, string> attribute in htmlAttributes)
                {
                    tag.Attributes[attribute.Key] = attribute.Value;
                }
            }

            tag.AddCssClass("k-button k-button-icontext");

            return tag.ToString();
        }

If you want just one link at the top of the grid, just do this.

.ToolBar(toolbar =>
        {
            toolbar.Custom().Action("Create", "SomeController").Text("<span class=\"k-icon k-i-plus\"></span> Create"); 
        })