Creating Custom Grid in Mvc 4.0 with Json Data

Question

I want to create a custom grid which will have three columns and rows can be of any number that depends on the data. But my problem is the data is available as json. I have created grid like structure many times but that is with model and collections like:

First creating the divs for columns

 @{
                if (Model.MessageList.Count > 0)
                {
                <div class="GridView_Div">
                    <div class="GridHeader_Div">
                        <div class="GridHeaderColoums_Div">Message</div>
                        <div class="GridHeaderColoums_Div">Sent Date</div>
                        <div class="GridHeaderColoums_Div">Receive Date</div>
                        <div class="GridHeaderColoums_Div">Actions</div>
                    </div>
                    <div class="GridData_Div">
                        @{
                    for (int i = 0; i < Model.MessageList.Count; i++)
                    {
                        string resultMessage = string.Empty;
                        string newMessage = string.Empty;
                        string result1 = Model.MessageList.ElementAt(i).Message;
                        int length = result1.Length;
                        if (length > 5)
                        {
                            resultMessage = result1.Substring(0, 5);
                            newMessage = resultMessage + "......";
                        }
                        else
                        {
                            resultMessage = result1.Substring(0);
                            newMessage = resultMessage + "......";
                        }
                            <div class="Grid_Row">
                                <div class="GridData_Coloums">
                                    <a href="#" onclick="ShowMessageDetail('@Model.MessageList.ElementAt(i).pkMessageId')" id="@Model.MessageList.ElementAt(i).pkMessageId">@newMessage</a>
                                </div>
                                <div class="GridData_Coloums">@Model.MessageList.ElementAt(i).Sent_Date</div>
                                <div class="GridData_Coloums">&nbsp; @Model.MessageList.ElementAt(i).Receive_Date</div>
                                <div class="GridData_Coloums">
                                    <input type="button"  value="Delete" id="@Model.MessageList.ElementAt(i).pkMessageId"/>
                                </div>
                            </div>
                    }
                        }
                    </div>
                </div>
                }
                else
                {
                <div style="width: 50%; float: left; margin-left: 10%;">No Message Found</div>
                }
            }

But how can I create a grid like structure in Json data?

Please help me with this case. Thank you very much

if you are OK with third party libraries, I recommend KendoUI, it got a powerful grid bind prefectly with Json. — Edi Wang
– Edi Wang, Commented Oct 14, 2013 at 8:47
Sir, I have used KendoUI. the controls are really very good as stated by you but I really want to do things in this manner. I mean I want to construct it by myself.Please help If this can be possible. — Sandy
– Sandy, Commented Oct 14, 2013 at 9:19

Liam · Accepted Answer · 2013-11-12 10:22:54Z

This has been a challenge for me and I accomplished it.

In the view

    $(document).ready(function () {
        $("#hdnPkClientId").val('');
        $("#txt_Autocomplete").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/Home/SearchClientDetail",
                    data: "{'searchtext':'" + document.getElementById('txt_Autocomplete').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        response($.map(data.Data, function (item) {

                            return {

                                label: item.Name,
                                value: item.id,
                                data: item
                            };
                        }));
                    },
                    error: function (xhr)
                    { }
                });
            },
            select: function (event, ui) {
                var detailArr = ui.item.label.split(',');
                $("#txt_Autocomplete").val(detailArr[0]);
                $("#hdnPkClientId").val(ui.item.data.Id);
                $("#Evaluation_Anch").attr("href", "/Evaluation/Index?Client_ID=" + ui.item.data.Id);
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/ClientHome/GetSelectedClientDetails",
                    data: "{'ClientId':'" + document.getElementById('hdnPkClientId').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        $("#Client_Name").html(data.Info.Name);
                        $("#Client_Address").html(data.Info.Address);
                        $("#Client_OtherAddressDetails").html(data.Info.OtherAddressDetails);
                        $("#Client_DOB").html(data.Info.DOB);
                        $("#Client_Phone").html(data.Info.Phone);
                        $("Client_MobilePhone").html(data.Info.Mobile_Phone);
                        var DataDiv = "<table width='100' border='0' cellspacing='0' cellpadding='0'> <tr> <th class='head'>Date</th> <th class='head'>Document Type</th> <th class='head'>Provider</th> </tr>";
                        for (var iRow = 0; iRow < data.Info.Prev_Doc_List.length; iRow++) {
                            var temp = data.Info.Prev_Doc_List[iRow];
                            DataDiv += "<tr>";
                            DataDiv += "<td>" + temp.Created_Date + "</td>";
                            DataDiv += "<td><a id='" + temp.Page_ID + "' href='" + temp.RedirectAddress + "'>" + temp.Doc_type + "</a></td>";
                            DataDiv += "<td>" + temp.Provider + "</td>";
                            DataDiv += "</tr>";
                        }
                        DataDiv += "</table>";
                        $("#PreviousDocumentDiv").html(DataDiv);
                    },
                    error: function (xhr)
                    { }
                });
                return false;
            }
        });
    });

In controller

   [HttpPost]
        public ActionResult GetSelectedClientDetails(string ClientId)
        {
            ProgressNotesService objService = new ProgressNotesService();
            var Client_Detail = objService.GetSelectedClient(Convert.ToInt32(ClientId));
            if (Client_Detail != null)
            {
                Session["Client_ID"] = Client_Detail.Id;
            }
            return Json(new { Info = Client_Detail });
        }

In Service

    public ClientDetailModel GetSelectedClient(int ClientID)
        {
            ClientDetailModel ClientDetail = new ClientDetailModel();
            List<PreviousDocuments> objDocsList = new List<PreviousDocuments>();
            using (DataContext DB = new DataContext())
            {
                var Row = DB.tbl.Where(m => m.ID == ClientID).FirstOrDefault();
                if (Row != null)
                {
                    ClientDetail.Id = Row.ID.ToString();
                    ClientDetail.Name = Row.First_Name + " " + Row.Last_Name;
                    ClientDetail.Address = Row.Address;
                    ClientDetail.Client_DOB = (DateTime)Row.DOB;
                    ClientDetail.DOB = ClientDetail.Client_DOB.ToString("MM/dd/yyyy");
                    ClientDetail.OtherAddressDetails = (Row.City == "" || Row.City == null ? "N/A" + " " + "," : Row.City + " ,") + (Row.State == "" || Row.State == null ? "N/A" + " " + "," : Row.State + " ,") + (Row.ZipCode == "" || Row.ZipCode == null ? "N/A" : Row.ZipCode);
                    ClientDetail.Phone = Row.Phone;
                    ClientDetail.Mobile_Phone = Row.OtherContact_Phone;
                    var ProgressNoteRecords = DB.ProgressNotes.Where(m => m.FkReferralID == ClientID).ToList();
                    if (ProgressNoteRecords.Count() > 0)
                    {
                        for (int iRow = 0; iRow < ProgressNoteRecords.Count(); iRow++)
                        {
                            objDocsList.Add(new PreviousDocuments
                            {
                                Created_Date = Convert.ToString(ProgressNoteRecords.ElementAt(iRow).Created_Date),
                                Doc_type = "Progress Note",
                                Provider = " blah blah",
                                Page_ID = Convert.ToString(ProgressNoteRecords.ElementAt(iRow).Id),
                                RedirectAddress = "../ProgressNote/Add?ProgressNote_ID=" + Convert.ToString(ProgressNoteRecords.ElementAt(iRow).Id)

                            });
                        }
                    }
                    var Ref = DB.tblrefServices.Where(m => m.ID == ClientID).ToList();
                    if (Ref.Count > 0)
                    {
                        for (int iRow = 0; iRow < Ref.Count(); iRow++)
                        {
                            objDocsList.Add(new PreviousDocuments
                            {
                                Created_Date = Convert.ToString(Ref.ElementAt(iRow).First_Name),
                                Doc_type = "Referral Service",
                                Provider = "blah blah",
                                Page_ID = Convert.ToString(Ref.ElementAt(iRow).ID)
                            });
                        }
                    }
                    ClientDetail.Prev_Doc_List = objDocsList;
                }

            }
            return ClientDetail;

        }

In model

public class ClientDetailModel
    {
        public ClientDetailModel()
        {
            Prev_Doc_List = new List<PreviousDocuments>();
        }
        public string Name { get; set; }
        public string Id { get; set; }
        public string DOB { get; set; }
        public string Address { get; set; }
        public string OtherAddressDetails { get; set; }
        public string Phone { get; set; }
        public string Mobile_Phone { get; set; }
        public DateTime Client_DOB { get; set; }
        public List<PreviousDocuments> Prev_Doc_List { get; set; }

    }
    public class PreviousDocuments
    {
        public string Created_Date { get; set; }
        public string Doc_type { get; set; }
        public string Provider { get; set; }
        public string Page_ID { get; set; }
        public string RedirectAddress { get; set; }
    }

Ramppy Dumppy · Accepted Answer · 2013-10-14 15:38:02Z

0

You can use KnockoutJS to bind your json data to your custom grid

answered Oct 14, 2013 at 15:38

Ramppy Dumppy

2,8477 gold badges30 silver badges38 bronze badges

1 Comment

Sandy Over a year ago

Can you please explain A bit more about this method.Please tell some useful references also or some demo code or how can I use it?

Bharath · Accepted Answer · 2013-10-15 05:15:54Z

0

what about using any template engines like jsrender. where you can convert provided mvc's view code to templates. Then pass the json to the template that will render grid in desired element.

refer the below link for more details

http://borismoore.github.io/jsrender/demos/demos.html

http://www.jsviews.com/#jsrender

answered Oct 15, 2013 at 5:15

Bharath

8077 silver badges14 bronze badges

Collectives™ on Stack Overflow

Creating Custom Grid in Mvc 4.0 with Json Data

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related