Help with jQuery SlickGrid

Hi Guys,

I'm trying to populate the slickGrid with an ajax call.

Code:

---

<script type="text/javascript" >
        $(document).ready(function() {
                var params = {};

                    params.strMeetingID = '3';
                                     
                    $.ajax({
                          type: "POST",
                  url: "TopicsGrid.aspx/GetTopicsTable",
                  data: $.toJSON(params),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(message){
                   
                                                         
                  },
                  error: function(errormessage){
                    alert(errormessage.statusText);
                  }
                });
       
                });

---

my function returns a datatable. But I need to convert the datatable to JSON. please help.

You need to make the JSON on the server side - that's what you transmit from your webservice.

When a button is clicked to load the grid

Code:

---

function update(webParam, sender) {
    var senderddtype = $(sender).data("ddtype");
    var lastddtype = $(window).data("lastddtype");
    webParam.fromddtype = lastddtype;
    webParam.fromwho = $(window).data("ddtype" + lastddtype);
    var xyz = $.toJSON(webParam);
    $.ajax({
        type: "POST",
        url: "WebService.asmx/HelloWorld",
        dataType: "json",
        data: xyz, //$.toJSON(webParam), //"{ObText:'" + webParam + "'}",
        contentType: "application/json; charset=utf-8",
        success: function(msg) {
            updateFinished(msg, sender);
        },
        failure: function(msg) {
            updateFinished(msg, "failure");
        },
        error: function(msg) {
            updateFinished(msg, "error");
        }
    });
}

---

That webservice spits out this JSON string

Code:

---

{
    "StuName": "xxxxx, Anne",
    "rowcount": "2",
    "source": [
        {
            "VisitDate": "11/30/2009",
            "VisitTime": "0117",
            "PrimaryComplaint": "General malaise "
        },
        {
            "VisitDate": "02/08/2010",
            "VisitTime": "0930",
            "PrimaryComplaint": "General malaise "
        }
    ]
}

---

And that is eaten up by the updateFinished call just like this

Code:

---

function updateFinished(msg, sender) {
    returnObj = $.parseJSON(msg.d);
    if (sender === "bootpage") {
        var didbootbln = false;
.
.
.
    } else {
        $("#acs-info").html("");
        if (sender == "error") {
            $("#acs-info").html("Error:");
        } else if (sender == "failure") {
            $("#acs-info").html("Failure:");
        }
        $("#acs-info").html($("#acs-info").html() + returnObj.StuName);
        var grid;

        var columns = [
            { id: "VisitDate", name: "VisitDate", field: "VisitDate", width: 120, cssClass: "cell-title", editor: TextCellEditor },
        { id: "VisitTime", name: "VisitTime", field: "VisitTime", width: 100, editor: TextCellEditor },
        { id: "PrimaryComplaint", name: "PrimaryComplaint", field: "PrimaryComplaint", width: 100, editor: TextCellEditor },
                ];

        var options = {
        editable: false,
        enableAddRow: false,
            enableCellNavigation: true,
            asyncEditorLoading: false
        };
...

---

And that returnObj object actually contains all those arrays and objects and works right into the JS code

Code:

---

...
        var $tabs = $('#tabset').tabs();
        var selected = $tabs.tabs('option', 'selected') + 1; // => 0[edit]
        var panelstr = "#panel" + selected;
        grid = new Slick.Grid($(panelstr), returnObj.source, columns, options);
        grid.onCellChange = function(currentRow, currentCell, item) {
        alert(currentRow + ":" + currentCell + "> key=" + item['VisitDate'] + ", value=" + item['VisitTime']);
        };

---

Thanks. please tell me what i'm doing wrong.

Code:

---

<script type="text/javascript" >
        $(document).ready(function() {
               
                var params = {};

                    params.strMeetingID = '3';
                                     
                    $.ajax({
                          type: "POST",
                  url: "TopicsGrid.aspx/GetTopicsTable",
                  data: $.toJSON(params),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(message){
                   
                    updateFinished(message);                   
                                                                 
                  },
                  error: function(errormessage){
                    alert(errormessage.statusText);
                  }
                });
           
                });
               
                function updateFinished(msg) {
        returnObj = $.parseJSON(msg.d);
     
              alert(returnObj);
            var grid;

                    var columns = [
                        {id:"sel", name:"#", field:"MeetingID", behavior:"select", cssClass:"cell-selection", width:40, cannotTriggerInsert:true, resizable:false, selectable:false },
                        {id:"Topic", name:"Topic", field:"Topic", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor, sortable:true},
                        {id:"Task", name:"Task", field:"Task", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor,  sortable:true},
                        {id:"Required", name:"Required", field:"Required", minWidth:60, editor:DateCellEditor, sortable:true},
                ];

                var options = {
                        editable: false,
                        enableAddRow: false,
                        enableCellNavigation: false,
                        asyncEditorLoading: true,
                        forceFitColumns: false,
            topPanelHeight: 25,
            enableColumnReorder: false
                };

        grid = new Slick.Grid("#myGrid", returnObj.source, columns, options);
       
        $("#myGrid").show();

}
               
        </script>
</head>

---

Here is my PageMethod:

Code:

---

<WebMethod(True)> _
    Public Shared Function GetTopicsTable(ByVal strMeetingID As String) As String
        Dim strCon As String = System.Configuration.ConfigurationManager.ConnectionStrings("ITDB").ConnectionString
        Dim dt As New DataTable
        Dim jsonString As String = String.Empty
        Try

            Using con As New SqlConnection(strCon)

                If Not String.IsNullOrEmpty(strMeetingID) Then

                    Dim cmd As New SqlCommand("SELECT MeetingID, Topic, Task, DateRequired FROM [v_Meeting_Topics_Tasks] WHERE MeetingID = @MeetingID")
                    cmd.Connection = con
                    cmd.Parameters.AddWithValue("@MeetingID", strMeetingID)

                    con.Open()
                    Dim reader As SqlDataReader = cmd.ExecuteReader

                    dt.Load(reader)

                    Dim TopicList = (From row In dt.AsEnumerable() _
                            Let MeetingID = row.Field(Of Long)("MeetingID") _
                            Let Topic = row.Field(Of String)("Topic") _
                            Let Task = row.Field(Of String)("Task") _
                            Let Required = row.Field(Of DateTime?)("DateRequired") _
                            Select New Meeting(MeetingID, Topic, Task, Required) _
                    With {.MeetingID = MeetingID, .Topic = Topic, .Task = Task, _
                    .DateRequired = Required}).ToList()

                    jsonString = JsonConvert.SerializeObject(TopicList)


                    con.Close()
                    reader.Close()
                    cmd.Dispose()

                End If

            End Using

        Catch ex As Exception
            dt = Nothing
        End Try

        Return jsonString
    End Function

---

the data returned is this:

Code:

---

[{"MeetingID":3,"Topic":"test","Task":"Task 1 dfgd","DateRequired":"\/Date(1276812000000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Task 2","DateRequired":"\/Date(1276812000000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Task 4","DateRequired":"\/Date(1277244000000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Task 5","DateRequired":"\/Date(1277244000000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Task 11","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"Test 12","DateRequired":"\/Date(1277848800000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"sss","DateRequired":"\/Date(1278367200000+0200)\/"},{"MeetingID":3,"Topic":"test","Task":"ssssss","DateRequired":"\/Date(1278367200000+0200)\/"},{"MeetingID":3,"Topic":"ww","Task":"Task 3","DateRequired":"\/Date(1276812000000+0200)\/"},{"MeetingID":3,"Topic":"ww","Task":"Task 6","DateRequired":"\/Date(1277330400000+0200)\/"},{"MeetingID":3,"Topic":"ww","Task":"Task 13","DateRequired":"\/Date(1277848800000+0200)\/"},{"MeetingID":3,"Topic":"dwsds","Task":"Test 10","DateRequired":"\/Date(1277676000000+0200)\/"},{"MeetingID":3,"Topic":"dwsds","Task":"Test 12","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"dwsds","Task":"sdfdf","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"Test New","Task":"vfvfb","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"hmm","Task":"dsss","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"hmm","Task":"gf bf","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"patpoo","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"byronpoo","Task":"dfdf","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"byronpoo","Task":"xc","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"GaryPoo","Task":"Task 7","DateRequired":"\/Date(1277416800000+0200)\/"},{"MeetingID":3,"Topic":"NicPoo","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"Poo","Task":"sda","DateRequired":"\/Date(1277762400000+0200)\/"},{"MeetingID":3,"Topic":"dssd","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"dsdsddsew","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"sss","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"ew","Task":"cscs","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"ew","Task":"dsds","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"ffdfdf","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"q","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"a","Task":"sss","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"a","Task":"qqqq","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"www","Task":null,"DateRequired":null},{"MeetingID":3,"Topic":"we","Task":"ww","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"eee","Task":"sss","DateRequired":"\/Date(1277935200000+0200)\/"},{"MeetingID":3,"Topic":"ssss","Task":"trt","DateRequired":"\/Date(1278367200000+0200)\/"},{"MeetingID":3,"Topic":"ssss","Task":"dsddsds","DateRequired":"\/Date(1278453600000+0200)\/"}]

---

I get an error saying data is undefined in slick.grid.js:(

Seems you are missing some dependencies - what error are you seeing in the Firebug CONSOLE window?

Lots of css and lib files are required - and it's poorly documented.

hey szlamany,

I think I've added all the dependencies. I'm able to add columns etc. Just the population part is throwing the error. When I alert(returnObj) I get this:

Code:

---

[object Object], [object Object], [object Object], [object Object], [object Object], [object Object]

---

I think that's where the problem is. How do i get to the actual values?

my returned JSON is this:

Code:

---

{"d":"[{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 1 dfgd\",\"DateRequired\":\"\\/Date(1276812000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 2\",\"DateRequired\":\"\\/Date(1276812000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 4\",\"DateRequired\":\"\\/Date(1277244000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 5\",\"DateRequired\":\"\\/Date(1277244000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Task 11\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"Test 12\",\"DateRequired\":\"\\/Date(1277848800000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"sss\",\"DateRequired\":\"\\/Date(1278367200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"test\",\"Task\":\"ssssss\",\"DateRequired\":\"\\/Date(1278367200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ww\",\"Task\":\"Task 3\",\"DateRequired\":\"\\/Date(1276812000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ww\",\"Task\":\"Task 6\",\"DateRequired\":\"\\/Date(1277330400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ww\",\"Task\":\"Task 13\",\"DateRequired\":\"\\/Date(1277848800000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"dwsds\",\"Task\":\"Test 10\",\"DateRequired\":\"\\/Date(1277676000000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"dwsds\",\"Task\":\"Test 12\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"dwsds\",\"Task\":\"sdfdf\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"Test New\",\"Task\":\"vfvfb\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"hmm\",\"Task\":\"dsss\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"hmm\",\"Task\":\"gf bf\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"poo\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"poo\",\"Task\":\"dfdf\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"poo\",\"Task\":\"xc\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"GPoo\",\"Task\":\"Task 7\",\"DateRequired\":\"\\/Date(1277416800000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"Poo\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"Poo\",\"Task\":\"sda\",\"DateRequired\":\"\\/Date(1277762400000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"dssd\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"dsdsddsew\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"sss\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"ew\",\"Task\":\"cscs\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ew\",\"Task\":\"dsds\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ffdfdf\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"q\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"a\",\"Task\":\"sss\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"a\",\"Task\":\"qqqq\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"www\",\"Task\":null,\"DateRequired\":null},{\"MeetingID\":3,\"Topic\":\"we\",\"Task\":\"ww\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"eee\",\"Task\":\"sss\",\"DateRequired\":\"\\/Date(1277935200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ssss\",\"Task\":\"trt\",\"DateRequired\":\"\\/Date(1278367200000+0200)\\/\"},{\"MeetingID\":3,\"Topic\":\"ssss\",\"Task\":\"dsddsds\",\"DateRequired\":\"\\/Date(1278453600000+0200)\\/\"}]"}

---

does my JSON format look correct?

Firebugs console gives me this error:

Code:

---

data is undefined
http://localhost:50643/VB.Net/Javascript/slick.grid.js
Line 976

---

oops my bad:blush:

I had:

grid = new Slick.Grid("#myGrid", returnObj.source, columns, options);

.source is in your JSOn and not mine. Sorry.

My grid is populated now. but the date values aint pulling through:(

Still a long way to go in terms of what I need but I'm getting there slowly. thanks for all your help

also, howcome I can't do thsi:

Code:

---

alert(returnObj.MeetingID);

---

I get undefined

I guess I have to loop through the values because it's an array.

Also, what's the Dataview for? I've seen the example but can't make sense of it. How will I be able to propogate changes in the grid through to my datatbase??

oh no:( my grid gets populates in FireFox but in IE 8 I get an error:( seems IE doesn't like my JSON formatting. Do you see any issues with my format?

Notice where you have double quotes around your values that should be arrays - that's a problem

Notice in my JSON I do not have those quotes.

The JSON is an actual representation of the JS object - so quoting will turn what should be an {} object or an [] array into a string.

Code:

---

{
    "StuName": "xxxxx, Anne",
    "rowcount": "2",
    "source": [
        {
            "VisitDate": "11/30/2009",
            "VisitTime": "0117",
            "PrimaryComplaint": "General malaise "
        },
        {
            "VisitDate": "02/08/2010",
            "VisitTime": "0930",
            "PrimaryComplaint": "General malaise "
        }
    ]
}

---

When in firebug you hover over the object and you can see if it's looking stringy or object/array-like.

The edit example from the slickgrid site has dates - look how he does the json for those.

good spot. I'm not sure how I fix this though. My function returns a string. I use a dll called Newtonsoft to serialise the JSON:

Code:

---

<WebMethod(True)> _
    Public Shared Function GetTopicsTable(ByVal strMeetingID As String) As String
        Dim strCon As String = System.Configuration.ConfigurationManager.ConnectionStrings("ITDB").ConnectionString
        Dim dt As New DataTable
        Dim jsonString As String = String.Empty
        Try

            Using con As New SqlConnection(strCon)

                If Not String.IsNullOrEmpty(strMeetingID) Then

                    Dim cmd As New SqlCommand("SELECT MeetingID, Topic, Task, DateRequired FROM [v_Meeting_Topics_Tasks] WHERE MeetingID = @MeetingID")
                    cmd.Connection = con
                    cmd.Parameters.AddWithValue("@MeetingID", strMeetingID)

                    con.Open()
                    Dim reader As SqlDataReader = cmd.ExecuteReader

                    dt.Load(reader)

                    Dim TopicList = (From row In dt.AsEnumerable() _
                            Let MeetingID = row.Field(Of Long)("MeetingID") _
                            Let Topic = row.Field(Of String)("Topic") _
                            Let Task = row.Field(Of String)("Task") _
                            Let Required = row.Field(Of DateTime?)("DateRequired") _
                            Select New Meeting(MeetingID, Topic, Task, Required) _
                    With {.MeetingID = MeetingID, .Topic = Topic, .Task = Task, _
                    .DateRequired = Required}).ToList()

                    jsonString = JsonConvert.SerializeObject(TopicList)


                    con.Close()
                    reader.Close()
                    cmd.Dispose()

                End If

            End Using

        Catch ex As Exception
            dt = Nothing
        End Try

        Return jsonString
    End Function

---

when I hover over the jsonString variable it has those outer quotes:( what do you use to generate your JSON string?

Wrote my own json builder. Actually someone who works for me created it and I've been hacking it to make the [] and {} objects work.

Google for jsonwriter - you will find lots of source examples.

this is turning into a nightmare. I even tried this function to convert a datatable to JSON but I'm having the same issues:

Code:

---

Public Shared Function datatableToJSON(ByVal dt As DataTable) As String
        Dim jsonStringBuilder As New StringBuilder()
        Dim jsonStringWriter As New StringWriter(jsonStringBuilder)

        Dim jsonWriter As JsonWriter = New JsonTextWriter(jsonStringWriter)

        If dt IsNot Nothing AndAlso dt.Rows.Count > 0 Then
            jsonWriter.Formatting = Formatting.None

            jsonWriter.WriteStartArray()
            For i As Integer = 0 To dt.Rows.Count - 1
                jsonWriter.WriteStartObject()
                For j As Integer = 0 To dt.Columns.Count - 1
                    jsonWriter.WritePropertyName(dt.Columns(j).ColumnName.ToString().ToLower())
                    jsonWriter.WriteValue(dt.Rows(i)(j).ToString())
                Next
                jsonWriter.WriteEndObject()
            Next
            jsonWriter.WriteEndArray()

            Return jsonStringBuilder.ToString()
        Else
            Return Nothing
        End If
    End Function

---

I'm using this - it's hacked a bit but it's working for me

Code:

---

Imports Microsoft.VisualBasic

Public Class JsonWriter

    Dim JsonString As String = ""
    Dim DidStartArray As Boolean = False

    'There are objects and arrays
    'object has this format "Name":"Value"
    'an object can have an array of values, ie ["Val1","Val2","Val3"]
    'this function should generate all that
    Public Sub StartObject()
        JsonString = JsonString + "{"
    End Sub
    Public Sub EndObject()
        JsonString = JsonString + "}"
    End Sub
    Public Sub StartArray()
        JsonString = JsonString + "["
        DidStartArray = True
    End Sub
    Public Sub EndArray()
        JsonString = JsonString + "]"
    End Sub


    Public Sub NameObject(ByVal Name As String)
        JsonString = JsonString + Chr(34) + Name + Chr(34) + ":"
    End Sub
    Public Sub ValueObject(ByVal Value As String)
        JsonString = JsonString + Value
    End Sub


    Public Sub NewObject(ByVal Name As String, ByVal Value As String)
        If (Value.ToString.StartsWith("{") And Value.ToString.EndsWith("}")) Or (Value.ToString.StartsWith("[") And Value.ToString.EndsWith("]")) Then
            JsonString = JsonString + Chr(34) + Name + Chr(34) + ":" + Value.ToString()
        Else
            JsonString = JsonString + Chr(34) + Name + Chr(34) + ":" + Chr(34) + Value.ToString() + Chr(34)
        End If
    End Sub
    Public Sub NewObject(ByVal Name As String, ByVal Value As Object, ByVal UseQuotes As Boolean)
        If UseQuotes = False Then
            JsonString = JsonString + Name + ":" + Value.ToString()
        ElseIf UseQuotes = True Then
            If Value.ToString.StartsWith("{") And Value.ToString.EndsWith("}") Then
                JsonString = JsonString + Chr(34) + Name + Chr(34) + ":" + Value.ToString()
            Else
                JsonString = JsonString + Chr(34) + Name + Chr(34) + ":" + Chr(34) + Value.ToString() + Chr(34)
            End If
        End If
    End Sub

    Public Sub NewArray(ByVal Name As String, ByVal Value As Array)
        NewArray(Name, Value, True)
    End Sub
    Public Sub NewArray(ByVal Name As String, ByVal Value As Array, ByVal UseQuotes As Boolean)
        NameObject(Name)
        StartArray()
        For i As Integer = 0 To Value.Length - 1
            If i > 0 Then
                JsonString = JsonString + ","
            End If
            If UseQuotes = False Or (Value(i).ToString.StartsWith("{") And Value(i).ToString.EndsWith("}")) Then
                JsonString = JsonString + Value(i).ToString()
            ElseIf UseQuotes = True Then
                JsonString = JsonString + Chr(34) + Value(i).ToString() + Chr(34)
            End If
        Next
        EndArray()
    End Sub
    Public Sub PushArray(ByVal Value As String, ByVal UseQuotes As Boolean)
        If DidStartArray Then
            DidStartArray = False
        Else
            JsonString = JsonString + ","
        End If
        If UseQuotes = False Then
            JsonString = JsonString + Value.ToString()
        ElseIf UseQuotes = True Then
            JsonString = JsonString + Chr(34) + Value.ToString() + Chr(34)
        End If
    End Sub
    Public Sub Seperate()
        JsonString = JsonString + ","
    End Sub

    Public Function GetJson() As String
        Return JsonString
    End Function

    Public Sub ResetJson()
        JsonString = ""
    End Sub

End Class

---

It's filled like this

Code:

---

    <WebMethod()> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=False)> _
    Public Function OperatorService(ByVal toddtype As String, ByVal fromddtype As String, ByVal fromwho As String) As String
        'Return "<b>This is the content of resource <tt>someResource</tt></b>"
        Dim JsonMaker As JsonWriter = New JsonWriter

        With JsonMaker
            .StartObject()
            Dim NeedColsBln As Boolean = True
            Dim NeedNameBln As Boolean = True
            Dim SettingColsBln As Boolean = False
            Try
                Using dcn As New SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings("LocalSQLServer").ToString)
                    Using cmd As New SqlCommand
                        cmd.CommandType = CommandType.StoredProcedure
                        cmd.CommandText = "dbo.awc_StudentVisits"
                        cmd.Connection = dcn
                        cmd.Parameters.AddWithValue("@StuId", fromwho)
                        dcn.Open()
                        Using readerSDR As SqlDataReader = cmd.ExecuteReader
                            Dim RowCounterInt As Integer = 0
                            Do
                                Dim JsonMaker2 As JsonWriter = New JsonWriter
                                While readerSDR.Read
                                    If readerSDR.GetName(0).StartsWith("acs-") Then
                                        SettingColsBln = True
                                        If NeedColsBln Then
                                            .NewObject(readerSDR.GetName(0), readerSDR(0).ToString)
                                            .Seperate()
                                            NeedColsBln = False
                                            .NameObject("cols")
                                            .StartArray()
                                        Else
                                            .PushArray(readerSDR(1).ToString, False)
                                        End If
                                    Else
                                        SettingColsBln = False
                                        If NeedNameBln Then
                                            .NewObject(readerSDR.GetName(0), readerSDR(0).ToString)
                                            .Seperate()
                                            NeedNameBln = False
                                        End If

                                        With JsonMaker2
                                            If RowCounterInt = 0 Then
                                                .StartArray()
                                            Else
                                                .Seperate()
                                            End If
                                            .StartObject()
                                            For i As Integer = 0 To readerSDR.FieldCount - 1
                                                .NewObject(readerSDR.GetName(i), readerSDR(i).ToString)
                                                If i < readerSDR.FieldCount - 1 Then .Seperate()
                                            Next
                                            .EndObject()
                                            RowCounterInt += 1
                                        End With
                                    End If
                                End While
                                If SettingColsBln Then
                                    .EndArray()
                                    .Seperate()
                                Else
                                    JsonMaker2.EndArray()

                                    .NewObject("rowcount", RowCounterInt.ToString)
                                    .Seperate()
                                    .NewObject("source", JsonMaker2.GetJson())
                                End If
                            Loop While readerSDR.NextResult
                        End Using
                    End Using
                End Using
            Catch ex As Exception
                .ResetJson()
                .StartObject()
                .NewObject("%%dalerror%%", ex.Message)
            End Try
            .EndObject()
        End With

        Return JsonMaker.GetJson()

    End Function

---

And you spend a lot of time validating the JSON here

http://www.jsonlint.com/

before wasting your time seeing if the JS will eat it up...

This code is currently being worked on by me - but it created this JSON very nicely for me just a moment ago

Code:

---

{
    "acs-work": "slickgrid",
    "cols": [
        {
            "id": "VisitDate",
            "name": "VisitDate",
            "field": "VisitDate",
            "width": "120",
            "cssClass": "cell-title",
            "editor": "TextCellEditor"
        },
        {
            "id": "VisitTime",
            "name": "VisitTime",
            "field": "VisitTime",
            "width": "100",
            "editor": "TextCellEditor"
        },
        {
            "id": "PrimaryComplaint",
            "name": "PrimaryComplaint",
            "field": "PrimaryComplaint",
            "width": "100",
            "editor": "TextCellEditor"
        }
    ],
    "StuName": "xxxxx",
    "rowcount": "2",
    "source": [
        {
            "StuName": "xxxxxx",
            "VisitDate": "11/30/2009",
            "VisitTimeIn": "0117",
            "PrimaryComplaint": "General malaise "
        },
        {
            "StuName": "xxxxxx",
            "VisitDate": "02/08/2010",
            "VisitTimeIn": "0930",
            "PrimaryComplaint": "General malaise "
        }
    ]
}

---

Of course this is what it looks like after the JSON validator website both VALIDATES it and RE-FORMATS it for visual review.

Use the link to validate - it saves lots of time.

Keep in mind that I'm crazy - I'm actually passing all the slickgrid info - column names and everything - from my DATABASE. I like to create "extensible" applications - ones that can change with just a tweak to a control table in my DB.

So, not to hijack the thread too much, but szlamany how are you finding this approach working out for you, rather than using the standard ASP.Net Controls?

Nitesh, from the link I posted in your other thread, here is a complete sample application that might help you:

http://archive.msdn.microsoft.com/JSONSampleDotNet

Gary

thanks szlamany and Gary;) szlamany you have been a great help;)

guys, my JSON format wasn't the issue. It was actually a slickGrid bug. The last column created has an id attribute which is null. This is in slick.grid.js:

Code:

---

var header = $("<div class='ui-state-default slick-header-column' id='" + uid + m.id + "' />")
                    .html("<span class='slick-column-name'>" + m.name + "</span>")
                    .width(m.width - headerColumnWidthDiff)
                    .attr("title", m.toolTip || m.name || "")
                    .data("fieldId", m.id || -1)
                    .addClass(m.headerCssClass || "")
                    .appendTo($headers);

---

In IE i was getting a js error saying .html.width.attr.data is null or not an object.

this line used to be:

Code:

---

.data("fieldId", m.id)

---

when the id was null I got the error. I changed it to:

Code:

---

.data("fieldId", m.id || -1)

---

and it worked.

Now i'm having a problem with dates. The JSON serializer makes my dates look like this:

Code:

---

/Date(1276812000000+0200)/

---

i found this post with the exact same problem:

http://www.joe-stevens.com/2010/06/2...t-date-object/

but I get an error saying Invalid Date:( how can i fix this

ok i found this:

http://james.newtonking.com/archive/...-json-net.aspx

it works. The dates are sent back like this:

Code:

---

\"DateRequired\":\"2010-07-01T00:00:00\"

---

in my js I do this:

Code:

---

var dateString = returnObj[i].DateRequired;
                               
                                if (dateString == null)
                                {
                                    date = '';
                                }else{
                                    date = isoDateReviver(dateString).toLocaleString();
                                }                       
                       
                                d["Required"] =date;

---

the only drawback is, I have to use LINQ and then I am able to do this because the SerializeObject Function accepts a converter:

Code:

---

                    dt.Load(reader)

                    Dim TopicList = (From row In dt.AsEnumerable() _
                            Let MeetingID = row.Field(Of Long)("MeetingID") _
                            Let Topic = row.Field(Of String)("Topic") _
                            Let Task = row.Field(Of String)("Task") _
                            Let Required = row.Field(Of DateTime?)("DateRequired") _
                            Select New Meeting(MeetingID, Topic, Task, Required) _
                    With {.MeetingID = MeetingID, .Topic = Topic, .Task = Task, _
                    .DateRequired = Required}).ToList()

                    jsonString = JsonConvert.SerializeObject(TopicList, New IsoDateTimeConverter())

                    con.Close()

---

I had a the following function to directly convert a datatable to JSON, but I don't know how I can set an ISODateConverter anywhere here as it doesn't use the SerializeObject function:(

Code:

---

Public Shared Function Serialize(ByVal value As Object) As String
        Dim type As Type = value.[GetType]()

        Dim json As New Newtonsoft.Json.JsonSerializer()

        json.NullValueHandling = NullValueHandling.Include

        json.ObjectCreationHandling = Newtonsoft.Json.ObjectCreationHandling.Replace
        json.MissingMemberHandling = Newtonsoft.Json.MissingMemberHandling.Ignore
        json.ReferenceLoopHandling = ReferenceLoopHandling.Ignore

        If type Is GetType(DataRow) Then
            json.Converters.Add(New DataSetConverter())
        ElseIf type Is GetType(DataTable) Then
            json.Converters.Add(New DataTableConverter())
        ElseIf type Is GetType(DataSet) Then
            json.Converters.Add(New DataSetConverter())
        End If

        Dim sw As New StringWriter()
        Dim writer As Newtonsoft.Json.JsonTextWriter = New JsonTextWriter(sw)
        'If FormatJsonOutput Then
        writer.Formatting = Formatting.Indented

        'Else
        'writer.Formatting = Formatting.None
        'End If

        writer.QuoteChar = """"c
        json.Serialize(writer, value)

        Dim output As String = sw.ToString()
        writer.Close()
        sw.Close()

        Return output
    End Function

---

Quote:

---

Originally Posted by gep13

So, not to hijack the thread too much, but szlamany how are you finding this approach working out for you, rather than using the standard ASP.Net Controls?

---

I believe it is the holy grail.

My HTML is basically 4 divs - a binder, tracker, operator and work space - can't ask for a simpler HTML.

They are empty.

My database actually feeds a boot call to a web service that fills the tracker with an accordion and a variety of lookup panels.

I attached an image of that data at the bottom of the post

These are hidden in a 5th div - basically a repository of html segments that you might want to use. It clones objects from there as it reads the boot JSON that is returned.

And JSON is truly magic - after I parse it into a JS object I can call EVAL() on the values in the text returned by my database and convert some of those values into JS functions - that is magic.

Basically I can serialize both data and functionality in the JSON and have it expand in the DOM.

Does that sound a bit like silverlight?

At any rate the boot JSON also fills the OPERATOR div with a bunch of buttons - that will make calls to fill the WORK div with slickgrids and what not. All of these sitting in a tab panel that is effortless to use.

jQuery has a really incredible drag and drop library that allows me to do things like drag kids names to buttons or drag kids names to existing grids to make that grid switch to a different kid.

This seems to be like writing a winform in a browser - something I thought I would never achieve.

Where exactly is the jQuery section of the forum?? ;)

Look at the js code to make the accordion and fill the autocomplete textbox? That autocomplete textbox jQuery plugin doesn't do "tag" values for id - look how easy it was to "extend" it to do so. Just hijack the SELECT function - examples abound on the web. Plus I further "extended" it to do my "drag and drop" page-wide logic.

Take a real close look at the LONG statements - jQuery chains that work the dom effortlessly. Magic!

Code:

---

case "acs-tracker":
    switch (value[0]) {
        case "accordion":
            $("#acs-panel").clone().appendTo("#acs-tracker").removeAttr("id").attr("id", value[1]).html("").addClass("acs-newaccordion");
            break;
    }
    break;
case "acs-panels":
    var newaccordion = $(".acs-newaccordion").attr("id")
    for (var i = 0; i < value.length; i++) {
        $("#acs-subpanel").clone().appendTo("#" + newaccordion).removeAttr("id").attr("id", value[i].acsid).children().html(value[i].acspanelname);
        $("#acs-contentpanel").clone().appendTo("#" + newaccordion).removeAttr("id").attr("id", value[i].acsid).html(value[i].acspanelname).addClass("acs-emptyaccordion").data("ddtype", value[i].acsddtype);
    }
    break;
case "acs-tracker:autocompleteid":
    var newaccordion = $(".acs-emptyaccordion:first").html("").attr("id") + "input"
    $("#acs-input").clone().appendTo(".acs-emptyaccordion:first").removeAttr("id").attr("id", newaccordion).parent().removeClass("acs-emptyaccordion");
    $('input.#' + newaccordion).attr("name", newaccordion);
    $('input.#' + newaccordion).each(function() {
        var autoCompleteElement = this;
        var formElementName = $(this).attr('name');
        var hiddenElementID = formElementName + '_autocomplete_hidden';
        /* change name of orig input */
        $(this).attr('name', formElementName + '_autocomplete_label');
        /* create new hidden input with name of orig input */
        $(this).after("<input type=\"hidden\" name=\"" + formElementName + "\" id=\"" + hiddenElementID + "\" />");
        $(this).autocomplete({ source: value,
            select: function(event, ui) {
                var selectedObj = ui.item;
                $(autoCompleteElement).val(selectedObj.label);
                $('#' + hiddenElementID).val(selectedObj.value);
                var parentObj = $(this).parent().data("ddtype")
                if (parentObj != "") {
                    $(window).data("ddtype" + parentObj, selectedObj.value);
                    $(window).data("lastddtype", parentObj);
                }
                return false;
            }
        });
    });
    $('#' + newaccordion)[0].focus();
    break;

---

I guess I should have included a screen shot.

Quote:

---

Originally Posted by szlamany

I believe it is the holy grail.

---

Noice!

Quote:

---

Originally Posted by szlamany

Does that sound a bit like silverlight?

---

Hmm, to an extent. This can certainly be achieved in Silverlight, although the technique would likely be implemented differently.

Quote:

---

Originally Posted by szlamany

Where exactly is the jQuery section of the forum?? ;)

---

I have actually thought about suggesting that. Perhaps as a Sub Forum of JavaScript, or perhaps as a forum in it's own right. Might be worth a suggestion in the Forum Feedback.

wow. szlamany that looks brilliant. I like the look and feel of your site.

I've figured out how to handle dates in my Convert Datatable to JSON function. I just added the line highlighted in red. Now I have to figure out how to format the date to YYYY/MM/DD on the js side. this is much cleaner now. this is a fragment of my json:

Code:

---

[
  {
    "MeetingID": 3,
    "Topic": "test",
    "Task": "Task 1 dfgd",
    "DateRequired": "2010-06-18T00:00:00"
  },
  {
    "MeetingID": 3,
    "Topic": "test",
    "Task": "Task 2",
    "DateRequired": "2010-06-18T00:00:00"
  },

---

Code:

---

Public Shared Function Serialize(ByVal value As Object) As String
        Dim type As Type = value.[GetType]()

        Dim json As New Newtonsoft.Json.JsonSerializer()

        json.NullValueHandling = NullValueHandling.Include

        json.ObjectCreationHandling = Newtonsoft.Json.ObjectCreationHandling.Replace
        json.MissingMemberHandling = Newtonsoft.Json.MissingMemberHandling.Ignore
        json.ReferenceLoopHandling = ReferenceLoopHandling.Ignore

        'handle dates
        json.Converters.Add(New IsoDateTimeConverter())

        If type Is GetType(DataRow) Then
            json.Converters.Add(New DataSetConverter())
        ElseIf type Is GetType(DataTable) Then
            json.Converters.Add(New DataTableConverter())
        ElseIf type Is GetType(DataSet) Then
            json.Converters.Add(New DataSetConverter())
        End If

        Dim sw As New StringWriter()
        Dim writer As Newtonsoft.Json.JsonTextWriter = New JsonTextWriter(sw)
        'If FormatJsonOutput Then
        writer.Formatting = Formatting.Indented

        'Else
        'writer.Formatting = Formatting.None
        'End If

        writer.QuoteChar = """"c
        json.Serialize(writer, value)

        Dim output As String = sw.ToString()
        writer.Close()
        sw.Close()

        Return output
    End Function

---

szlamany I need so help again please. I see in the grouping example they use a dataview. I ain't using one, can I still have grouping?

Also, How can I edit a cell then save the information to my database?

Quote:

---

Originally Posted by Nitesh

wow. szlamany that looks brilliant. I like the look and feel of your site.

---

Remember that the "theme" of the site with jQuery is driven by a css that the jQuery community has produced.

They have a dozen default themes and you can alter them with the themeroller.

I had to make the font color for the ACTIVE state BLACK instead of WHITE because SLICKGRID used the "active" state to color a row that you are editing - and the background color didn't match with the WHITE font.

I used the START theme as the base and then rolled my own change into that.

Look at the GALLERY on this page

http://jqueryui.com/themeroller/

and then look at the roll your own tab...

The nice thing about all this is that those BUTTONS and ACCORDIONS and TABS all use this theme CSS in a consistent fashion making your page coherent with "0 effort" - that is productivity handed to you on a silver platter.

Quote:

---

Originally Posted by Nitesh

szlamany I need so help again please. I see in the grouping example they use a dataview. I ain't using one, can I still have grouping?

Also, How can I edit a cell then save the information to my database?

---

I'm as new to the slickgrid as you - so your grouping / dataview question I cannot address...

As for the SAVE info - back in post #2 you can see the onCellChange event that I put in that would eventually lead to a DB update call...

thanks for the link. definetely will use it in future. ok cool i understand;) I noticed the onCellChanged event. I tried adding it in my project and I get this error:

Code:

---

evt.notify is not a function
http://localhost:50646/OscarVB.Net/Javascript/slick.grid.js
Line 789

---

I'm sure I've included all the necessary js files:

Code:

---

<script src="Javascript/firebugx.js"></script>

       
        <script src="Javascript/jquery-1.5.js" type="text/javascript"></script>
        <script src="Javascript/jquery.json-2.2.min.js" type="text/javascript"></script>
        <script src="Javascript/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>

                <script src="Javascript/jquery.event.drag-2.0.min.js" type="text/javascript"></script>

        <script src="Javascript/slick.core.js" type="text/javascript"></script>
        <script src="Javascript/slick.grid.js" type="text/javascript"></script>
       
                <script src="Javascript/slick.cellrangeselector.js" type="text/javascript"></script>
                <script src="Javascript/slick.cellselectionmodel.js" type="text/javascript"></script>
                <script src="Javascript/slick.editors.js" type="text/javascript" ></script>
                <script src="Javascript/slick.rowselectionmodel.js" type="text/javascript"></script>
                <script src="Javascript/slick.dataview.js" type="text/javascript"></script>
                <script src="Javascript/slick.pager.js" type="text/javascript"></script>
                <script src="Javascript/slick.columnpicker.js" type="text/javascript"></script>

---

i think i'm onto something. This works:

Code:

---

grid.onCellChange.subscribe(function(e,args) {
                alert(args.item.MeetingID);
                console.log(args.item);
            });

---

the other method doesn't though.

Well - I just spent an hour trying to "re-do" all of yesterdays work - argh!!

All of a sudden my rows stopped showing - I tried to step into the slick grid and debug it - seeing that one row had made it into the HTML but for some reason not showing...

I usually save "full copies" of the web folder several times a day so that if I break something I can simply revert back and WINDIF my way back to a working app.

Didn't do that all day yesterday and needed to slowly re-do each edit - argh!!

You and I are pretty much at the same point - I'm not ready to do save logic because my build logic needs to mature further...

At any rate - here's the top of my page if you need to see my dep's. The slickgrid css files are required as well...

Code:

---

<head runat="server">
    <title></title>
<&#37;--    <link href="themes/start/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />--%>
   
    <link href="themes/custom-theme/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />
    <link href="slick.grid.css" rel="stylesheet" type="text/css" />
    <link href="examples.css" rel="stylesheet" type="text/css" />
    <link href="slick-default-theme.css" rel="stylesheet" type="text/css" />
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<%--    <link href="themes/cupertino/jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/jquery-1.5.js"></script>
    <script src="Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
--%>
    <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
   
    <script src="Scripts/jquery.json-2.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jqia2.support.js" type="text/javascript"></script>

    <script src="Scripts/jquery.event.drag-2.0.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.event.drop-2.0.min.js" type="text/javascript"></script>
   
    <script src="Scripts/slick.editors.js" type="text/javascript"></script>

    <script src="Scripts/slick.grid.js" type="text/javascript"></script>

---

sorry you lost your progress:( that suck big time. I'll post my progress as I go along so we can help each other out since we are at the same point;)

hey szlamany,

I've been making steady progress so far. I needed a dropdownlist column and I noticed it wan't built into the grid. So I edited slick.editors.js.

I'm no js guru, but this might help you;)

Code:

---

DropdownCellEditor : function(args) {
            var $select;
            var defaultValue;
            var scope = this;
         
            //alert(args);
            var dataObj = $.parseJSON(args.column.data);
            //console.log(dataObj);
           
         
            this.init = function() {
                $select = $("<SELECT tabIndex='0' class='editor-dropdown'></SELECT>");
                var objCombo = $select;
               
                             
                for (var i = 0; i < dataObj.length; i++)
                    {
                   
                    //alert(dataObj[i].id);
                              //objCombo.append(new Option(dataObj[i].value.toString(), dataObj[i].id));
                    objCombo.append($('<option></option>').attr('value', dataObj[i].ID.toString()).text(dataObj[i].Value.toString()) )
 
                    }
           
                $select.appendTo(args.container);
                $select.focus();
            };

            this.destroy = function() {
                $select.remove();
            };

            this.focus = function() {
                $select.focus();
            };

            this.loadValue = function(item) {
            //console.log(item[args.column.field]);
                $select.val((defaultValue = item[args.column.field]));
                $select.select();
            };

            this.serializeValue = function() {
                return ($select.val() == "yes");
            };

            this.applyValue = function(item,state) {
     
                item[args.column.field] = $select.find(':selected').text();
            };
         
            this.isValueChanged = function() {
                return ($select.val() != defaultValue);
            };

            this.validate = function() {
                return {
                    valid: true,
                    msg: null
                };
            };

            this.init();
        },

---

then when you specify the columns in the grid you do this:

Code:

---

                        {id:"priority", name:"Priority", field:"priority", width:80, selectable:false, editor: DropdownCellEditor, data: $.toJSON(ddlData), resizable:false},

---

I added a data property above. ddlData is an array of data in JSON format which is passed to the DropdownCellEditor.

To populate the ddlDataArray from my database I did this:

Code:

---

$.when(combo()).done(function (combo_data) {
//                console.log(grid_data);
                ddlData = combo_data.d;
                   
                    }); 
                   
                   
                         
            function combo() {             
            return $.ajax({                   
                  type: "POST",
                  url: "TopicsGrid.aspx/GetPriorities",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",                 
                        success: function (combo_data) {                   
                        }               
                        });           
                    }

---

the ajax call is made to a PageMethod which looks like this:

Code:

---

<WebMethod()> _
Public Shared Function GetPriorities() As List(Of Priorities)

        Dim dt As New DataTable
        Dim strCon As String = System.Configuration.ConfigurationManager.ConnectionStrings("DB").ConnectionString
        Dim PriorityList

        Try

            Using con As New SqlConnection(strCon)


                Dim cmd As New SqlCommand("SELECT ID, Description FROM [Task_Priority] WHERE Active = 1")
                cmd.Connection = con

                con.Open()
                Dim reader As SqlDataReader = cmd.ExecuteReader

                dt.Load(reader)

                PriorityList = (From row In dt.AsEnumerable() _
                      Let Id = row.Field(Of Integer)("ID") _
                      Let value = row.Field(Of String)("Description") _
                      Select New Priorities(Id, value) _
                With {.ID = Id, .Value = value}).ToList()

                con.Close()
                reader.Close()
                cmd.Dispose()



            End Using

        Catch ex As Exception
            dt = Nothing
        End Try


        Return PriorityList
    End Function

---

Thank you so much - that is something I'm going to need in the next day or two.

I've spent the past few days getting the "source", "options" and "columns" of my slickgrids to be read from my webservice/json feed. Working nicely.

I am putting several slickgrids in different TAB's. I'm going to have to disable buttons and tabs when in edit mode - seems you can leave grids in a bad state in other tabs - just starting to work through these issues.

Not sure if I want EDIT and SAVE buttons...

no prob;) let me know if you hit any snags with the dropdownlist code. Glad to hear you are making progress. I've got my grid displaying, also I grouped the data and I implemented the composite editor like in the composite_editor example.

I've done an AJAX call to save the data as well.

So my rows contain Tasks grouped by Topic. I am able to edit each task. Now I need to be able to add a New Topic. I'm still trying to figure out the best possible route:(

jQuery does modal pop-ups nicely - if you have just a couple of fields to ask for to do your add that could work.

thanks. I will look into it:wave:

So tell me - how do you manage the editing and saving? Can they make changes to lots of rows and you wait till they click SAVE?

Do you allow them to initialize the EDIT by simply clicking the cell?

How about disabling buttons and other screen action while the EDIT is in place?

Just curious what you have done so that I don't drag my old mainframe-VB6-VB.Net-ASP.Net mind into it with preconceived notions.

Thanks!

hey szlamany,

I'm afraid I haven't done any work on this since last week. At the moment I only edit a single row at a time. No disabling buttons etc either. sorry

Well - I've got ADD and EDIT started in my app - pop-up a DIV that "covers" the grid so you have to work the ADD/EDIT until done - then I'll return you to the grid.

Either full grid data refresh or I'll try to surgically get the new row into the grid.

Not sure I'm going to allow "grid edit" - I might leave the grid read-only - or at least maybe the most complicated grids. The will need the "edit" DIV-cover...

At any rate I've got my add and edit webservices functioning and I'm auto-binding the "sql columns" based on the column name matching a "class" I put on the edit fields...

that sounds good;) do you know how to Remove All rows in the grid. I have a parent grid and a child grid. When I click the parent row I do an ajax call and then populate the child grid. I need to clear the child grid each time before it populates again. any idea

Sorry - not at that point yet - will be managing exising grid rows in a day or so.

Post with what you find if you get their first :)

I have been having a nightmare of a time accessing cell values in an existing grid from code.

Have you done this yet?

Any code snippets I can look at?

nvm - I discovered that the slickgrid really just maintains the data source object and such that you bring in initially.

With that said those objects needed to become global arrays in the javascript so that I could refer to them properly in events and what not.

Check out this thread!!

http://www.vbforums.com/showthread.p...23#post3996323

hey szlamany,

I'm afarid I've had to abandon this approach. I did everything I needed to like save data oncellchange etc, until I got to the grouping part.

I grouped the data by a field and the grid looked great, until I started clicking on a row and trying to get the row data. The grid was giving me Row 5 data for example if I clicked on Row 1.

And I realised it ain't my mistake cos I even tried it on the slickgrid example and got the same result:(

I'm afaid I wasted 2 weeks of development and I now have to look for an alternative approach. I did learn quite a bit about JSON though so I guess all is not lost

@nitesh - did you ever go back to the jQuery SlickGrid? I'm having some really good success with this myself and was wondering if you had time to re-look at your approach?

By the way szlamany, is the site you are creating public facing so that we could take a look at the fruits of your labour? Would be interesting to see.

Gary

hey szlamany,

I haven't gone back to the slickgrid. I've had to take a whole other route. Glad to hear you are going well though:D. as Gary said, It would be great if we colud see a demo;)

I've read this thread with interest and have completely missed the point. Everything that is being done (as far as I can see) can very easily be done with bog standard .net and a bit of ajax ... the two principal posters are clearly very switched on so I've missed the point.

What are the benefits of this 'slickgrid ... javascripty' approach over standard .net?

Quote:

---

Originally Posted by gep13

By the way szlamany, is the site you are creating public facing so that we could take a look at the fruits of your labour? Would be interesting to see.

---

I'm doing three sites at the same time with this app - all NOT public facing (health info for kids visiting a nurse, financial accounting for a small school district and student information at a large school district).

Quote:

---

Originally Posted by Nitesh

hey szlamany,

I haven't gone back to the slickgrid. I've had to take a whole other route. Glad to hear you are going well though:D. as Gary said, It would be great if we colud see a demo;)

---

Why don't you both PM me a bit of "who you really are" and I'll see if I can reply back with a link for you to follow...

Quote:

---

Originally Posted by Webskater

I've read this thread with interest and have completely missed the point. Everything that is being done (as far as I can see) can very easily be done with bog standard .net and a bit of ajax ... the two principal posters are clearly very switched on so I've missed the point.

What are the benefits of this 'slickgrid ... javascripty' approach over standard .net?

---

For me it was all about "control over what was going on" that made me leave standard-net+bit-of-ajax. I'm doing 100%-the-same-thing that asp.net/ajax does but I'm doing it myself from the ground up.

Look at what I'm doing now and see how this wouldn't really be possible with asp.net/ajax.

I need to have an autocomplete dropdown with 5000 items in it - account numbers to pay financial transactions against. And that dropdown appears in a primary spot on my screen - but also will have to appear in any place you can edit an account number. That might be a slickgrid that pops up because I'm looking at a batch or an "edit panel" for doing detail editing of a record.

I "transmit" the drop down / autocomplete "array" once - when the page boots. I can "clone" that autocomplete UI-widget with jQuery and make it appear anyplace I want during the life-cycle of the page.

Look at the image below - I show the autocomplete as I'm typing "10-" (that's too vague for my settings) and you see my "more specific" message - as I get to "10-01" it's showing a list.

Then the bottom image shows the opening of an empty OPENAP batch and the ADDING of a new record - that same autocomplete dropdown appears in that spot as well.

That "elevating" of a simple input control to a autocomplete is done all CLIENT SIDE with JS with this code

Code:

---

    options = {};
    options.source = $("#acs-acctlookupinput").autocomplete("option", "source");
    $("#" + strNewId + " .awc-Account").autocomplete(options);

---

This line of code

options.source = $("#acs-acctlookupinput").autocomplete("option", "source");

is where I'm stealing the source from the other CONTROL on the screen. And now that I'm comfortable with the jQuery api syntax this .chain'ing of methods makes so much sense

I'm about to change this code so the "source" comes from a JS FUNCTION that takes the "source" from a GLOBAL page array. I can then future architect that JS FUNCTION to "sense" that the account cache is stale and refresh with an AJAX call back to a web service.

All without a single PAGE POST BACK - all AJAX - never re-load the page.

How would I have done any of this with asp.net/ajax?

I'm sure with a bit of truely heavy pushing you could "update panel" a drop down to appear - and somehow hack into the final events of that drop down appearing and re-direct the source of the dropdownlist to be another controls data - so you could avoid re-transmit of 5000 entries... Or not give your customer this level of rich UI experience - which unfortunately ended up happening too often for my liking
.

Quote:

---

Originally Posted by szlamany

I'm doing three sites at the same time with this app - all NOT public facing (health info for kids visiting a nurse, financial accounting for a small school district and student information at a large school district).Why don't you both PM me a bit of "who you really are" and I'll see if I can reply back with a link for you to follow...For me it was all about "control over what was going on" that made me leave standard-net+bit-of-ajax. I'm doing 100%-the-same-thing that asp.net/ajax does but I'm doing it myself from the ground up.

Look at what I'm doing now and see how this wouldn't really be possible with asp.net/ajax.

I need to have an autocomplete dropdown with 5000 items in it - account numbers to pay financial transactions against. And that dropdown appears in a primary spot on my screen - but also will have to appear in any place you can edit an account number. That might be a slickgrid that pops up because I'm looking at a batch or an "edit panel" for doing detail editing of a record.

I "transmit" the drop down / autocomplete "array" once - when the page boots. I can "clone" that autocomplete UI-widget with jQuery and make it appear anyplace I want during the life-cycle of the page.

Look at the image below - I show the autocomplete as I'm typing "10-" (that's too vague for my settings) and you see my "more specific" message - as I get to "10-01" it's showing a list.

Then the bottom image shows the opening of an empty OPENAP batch and the ADDING of a new record - that same autocomplete dropdown appears in that spot as well.

That "elevating" of a simple input control to a autocomplete is done all CLIENT SIDE with JS with this code

Code:

---

    options = {};
    options.source = $("#acs-acctlookupinput").autocomplete("option", "source");
    $("#" + strNewId + " .awc-Account").autocomplete(options);

---

This line of code

options.source = $("#acs-acctlookupinput").autocomplete("option", "source");

is where I'm stealing the source from the other CONTROL on the screen. And now that I'm comfortable with the jQuery api syntax this .chain'ing of methods makes so much sense

I'm about to change this code so the "source" comes from a JS FUNCTION that takes the "source" from a GLOBAL page array. I can then future architect that JS FUNCTION to "sense" that the account cache is stale and refresh with an AJAX call back to a web service.

All without a single PAGE POST BACK - all AJAX - never re-load the page.

How would I have done any of this with asp.net/ajax?

I'm sure with a bit of truely heavy pushing you could "update panel" a drop down to appear - and somehow hack into the final events of that drop down appearing and re-direct the source of the dropdownlist to be another controls data - so you could avoid re-transmit of 5000 entries... Or not give your customer this level of rich UI experience - which unfortunately ended up happening too often for my liking
.

---

Very interesting ... and thanks for that explanation.

It reminds me a bit of something I did in an old asp application once. I was developing for a company with about a 1000 users - all of whom did different jobs (obviously). There was an endless need to create a list of these users or a filtered list depending on what they did and what page you were on and who you wanted to allocate things to etc. I initially started out with lots of calls to the database to get what was basically a variable subset of the same data and I kept thinking how to short circuit it.

In the end I used a frames page and the first time the page loaded I downloaded the entire list of users into a javascript array in the 'head' frame. After that every time I need a list of users (or a list filtered by category etc) it was just one call to a javascript function and my drop down list (or table) was populated client side. Worked like a charm. The head frame auto refreshed every 5 minutes so if someone made a change to a user's details it soon was available throughout the app. Not ideal - but a reasonable compromise as it save literally hundreds of database calls throughout the app.

I too used it for autocomplete - a search box in the head frame called an onkeypress function that filtered the list and displayed it in a div below the text box. Best autocomplete I've ever done - none of the .net calling a web service nonsense (which, to be fair, does work well but is occasionally sticky). Everything client side and so fast.

Quote:

---

Originally Posted by Nitesh

hey szlamany,

I'm afarid I've had to abandon this approach. I did everything I needed to like save data oncellchange etc, until I got to the grouping part.

I grouped the data by a field and the grid looked great, until I started clicking on a row and trying to get the row data. The grid was giving me Row 5 data for example if I clicked on Row 1.

And I realised it ain't my mistake cos I even tried it on the slickgrid example and got the same result:(

I'm afaid I wasted 2 weeks of development and I now have to look for an alternative approach. I did learn quite a bit about JSON though so I guess all is not lost

---

btw - I've discovered even though the slickgrid is only displaying your "source" array of data - you need to use the slickgrid .getXXX functions to get row and column "data". I've not done grouping in any ways yet but I'm not having problems getting back to my data for UPDATE calls to the DB...